Color Blindness Simulator — See Colors as Others Do

Color blindness by the numbers

Color vision deficiency (CVD) affects approximately 300 million people worldwide — about 8% of men and 0.5% of women of Northern European descent. Red-green variants are by far the most common: deuteranopia and deuteranomaly (green-weak) together affect roughly 5% of men, while protanopia and protanomaly (red-weak) affect about 2.5%. Tritanopia (blue-yellow) is much rarer, occurring in fewer than 1 in 10,000 people regardless of sex. Total achromatopsia, the complete absence of color vision, is rarer still at 1 in 30,000.

These numbers mean that for every 12 men who look at your website or app, roughly one of them cannot distinguish certain color combinations the way you intended. High-traffic products — whether a data dashboard, a checkout button, or a warning banner — must account for this audience. Simulating what those users see is the first step toward designing inclusively.

How color vision simulation works

The human eye has three types of cone cells sensitive to long (red), medium (green), and short (blue) wavelengths of light. Color blindness occurs when one or more cone types are absent or have shifted spectral sensitivity. Researchers model this in the LMS color space, which maps directly to cone responses, and then derive transformation matrices that predict what a color-deficient eye perceives when viewing a given RGB value.

This simulator uses simplified Machado 2009 matrices applied directly in sRGB space. The approach trades a small amount of physiological precision for speed and simplicity — the perceptual difference is negligible for design work. All output values are clamped to the 0–255 range, since the matrix coefficients can produce out-of-gamut results for very saturated input colors. The achromatopsia simulation collapses all channels to the standard luminance value (0.299 R + 0.587 G + 0.114 B), mimicking total absence of color perception.

No simulation can perfectly replicate the lived experience of color blindness, since cone response varies between individuals. Use this tool as a practical heuristic rather than a definitive diagnostic: if a pair of colors looks confusingly similar in the simulator, it will likely cause problems for at least some color-blind users.

Design tips for color-blind accessibility

The single most effective technique is never relying on color alone to convey information. Combine color with shape, pattern, or text label. A pie chart slice should not be distinguished only by its hue — add a direct label or a distinct pattern fill. A form validation error should not just turn a border red — add an icon and an explicit error message. These principles appear in WCAG 2.1 Success Criterion 1.4.1 (Use of Color) and are mandatory for AA compliance.

When choosing a color palette, test your foreground and background pairs with a contrast checker (WCAG requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text). Beyond contrast, favor hue combinations that remain distinguishable under deuteranopia simulation: blue-orange pairs work well, while red-green pairs are problematic. Avoid using red and green as the sole differentiators for any status or data category. For data visualization, the ColorBrewer palettes (especially the 'colorblind-safe' subsets) are a reliable starting point.

Interactive elements should also have non-color states: underlines on links, focus rings on inputs, and borders on buttons all help users who cannot rely on color changes alone to perceive affordances. After making changes, run your design through this simulator for each major color type to confirm that meaning survives across all four views.