Color Blindness Simulator
Preview any color as seen by people with color vision deficiency — 6 types simulated.
① Enter a HEX code or pick a color ② Simulate 6 types of color blindness ③ Copy any simulated HEX
Try a preset:
What is Color Blindness and Why Does It Matter for Design?
Color blindness (color vision deficiency) affects approximately 8% of men and 0.5% of women worldwide. The most common types — deuteranopia and protanomaly — involve confusion between red and green hues. Designers and developers should always test their color choices to ensure information is not conveyed through color alone. WCAG 2.1 Success Criterion 1.4.1 requires that color is not the only visual means of conveying information. This simulator uses the scientifically validated LMS color model (Viénot 1999) to produce accurate previews for all major deficiency types
Frequently Asked Questions
Color blindness (color vision deficiency, CVD) is the inability to distinguish certain colors due to absent or malfunctioning cone cells in the retina. It affects approximately 8% of men and 0.5% of women of Northern European descent. The most common form is deuteranomaly (reduced green sensitivity), followed by protanomaly (reduced red sensitivity). Tritanopia (blue-yellow) is much rarer at about 0.01% of the population.
This tool uses the LMS color model (Viénot 1999 method). The pipeline is: HEX → sRGB [0,1] → linear RGB (gamma removal) → LMS cone responses via Hunt-Pointer-Estevez matrix → apply deficiency simulation matrix → LMS → linear RGB → sRGB (gamma re-application) → HEX. This produces perceptually accurate results that match clinical studies on color vision deficiency.
Deuteranopia: M (green-sensitive) cones are absent — greens, reds and oranges appear similar. Protanopia: L (red-sensitive) cones are absent — reds appear very dark and are confused with green/brown. Tritanopia: S (blue-sensitive) cones are absent — blues and greens are confused with reds and pinks. Anomalous trichromacy (deuteranomaly, protanomaly) involves reduced rather than absent cone sensitivity, causing milder confusion.
Enter each key color in your UI — primary buttons, status indicators, charts, badges. For each simulation, check whether the color still conveys the intended meaning. If the simulated color looks nearly identical to another element (e.g., error red becomes indistinguishable from success green), add a secondary cue: icon, pattern, label, or border. Test your entire color palette systematically.
WCAG 2.1 Success Criterion 1.4.1 (Level A): Color must not be the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. SC 1.4.3 (Level AA): Text contrast must be at least 4.5:1 (3:1 for large text). These requirements apply regardless of color vision type, making it essential to combine color with shape, pattern, or text labels.
The safest combinations maintain high luminance contrast independent of hue. Blue-orange and blue-yellow work for most deficiency types. Red-green combinations (the most common UI pattern) are the most problematic for deuteranopia and protanopia. Add icons or patterns alongside color coding, and always check contrast ratios with a WCAG tool. Dark-on-light or light-on-dark with sufficient luminance difference is the most universally safe approach.
This tool simulates one color at a time — ideal for checking individual brand colors, palette entries, and key UI elements. To test a complete webpage or screenshot, use browser extensions such as NoCoffee (Chrome/Firefox) or Colorblinding, or your operating system's built-in color filter (macOS: System Settings → Accessibility → Display → Color Filters; Windows 11: Settings → Accessibility → Color Filters). These provide a real-time overlay across your entire screen.