Color Blind Simulator
See how colors look to users with protanopia, deuteranopia, tritanopia, and achromatopsia. Test palettes for color-blind accessibility.
About this tool
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. The most common are protanopia (red-blind) and deuteranopia (green-blind), collectively called red-green color blindness; tritanopia (blue-yellow) is much rarer. Achromatopsia is complete color blindness, where everything appears in shades of gray.
This simulator transforms your colors using the Brettel/Viénot dichromacy matrices in linear sRGB space, which matches the model used by academic accessibility tools and is the recommended approach in WCAG technique G183. You see five panels side by side: the original, then the same colors as they appear under each condition. Each panel also shows the WCAG contrast ratio between foreground and background under that simulation, with a badge for AA (4.5:1) and AAA (7:1) compliance.
Example: red text (#E63946) on cream (#F1FAEE) looks punchy to a typical viewer but appears as a muddy brownish-gray to someone with deuteranopia — they cannot tell the red from the green in your palette, which is exactly the failure mode this tool catches before you ship it. The contrast ratio may also drop under simulation, revealing that a design has become illegible even if the colors are still technically distinguishable.
FAQ
Which type of color blindness is most common? ›
Deuteranomaly (reduced green sensitivity) is the most common, affecting about 5% of men. Protanomaly (reduced red) is similar in effect. Together the red-green deficiencies make up over 99% of cases. Tritanopia (blue-yellow) is rare, affecting under 0.01% of people.
Does passing the contrast checker mean colors are color-blind safe? ›
No. Luminance contrast and color perception are separate. A red button on a green background can have high luminance contrast yet become indistinguishable to a red-green color-blind user. Always check both: contrast checker for legibility, this simulator for color reliance.
How accurate is the simulation? ›
It uses the Brettel and Viénot dichromacy matrices applied in linear sRGB space, which is the standard model cited in accessibility research. It approximates full dichromacy (complete absence of one cone type). Anomalous trichromacy — partial deficiency, the more common real-world case — produces milder effects.
What does the contrast ratio badge mean? ›
The WCAG contrast ratio measures the brightness difference between foreground and background, from 1:1 (no contrast) upward. AA requires 4.5:1 for normal text, AAA requires 7:1. The badge shows the ratio under each simulated condition — a design that passes contrast in normal vision may fail under a color deficiency because the simulated colors land closer on the luminance scale.
What makes a design color-blind friendly? ›
Never rely on color alone to convey information. Pair color with text labels, patterns, icons, or position. Avoid red/green and red/black pairings for status. Run your palette through this simulator — if two colors collapse into one under any condition, or if the contrast ratio drops below 4.5:1, add a non-color cue.
Can I simulate my own palette of more than two colors? ›
This tool focuses on a foreground/background pair. For multi-color palette testing, check each pair that must be distinguishable (for example status colors in a legend) using the foreground and background inputs.