How to Simulate Color Blindness

Color blindness affects roughly 8% of men and 0.5% of women worldwide. If you design interfaces, charts, or visual content without testing for color vision deficiency, a significant portion of your audience may struggle to interpret what you have built. The color blindness simulator lets you catch these issues before they reach users.

Understanding color vision deficiency

Color vision deficiency is not a single condition — it is a spectrum of variations in how the eye’s cone cells perceive light. The three main types are named after which cone type is affected:

• Protanopia (red-blind): The long-wavelength (red) cones are absent. Reds appear dark and can be confused with greens, browns, and blacks. Affects roughly 1% of males.
• Deuteranopia (green-blind): The medium-wavelength (green) cones are absent. The most common form, affecting about 5% of males. Red and green hues are difficult to distinguish, though the overall brightness perception is less affected than with protanopia.
• Tritanopia (blue-blind): The short-wavelength (blue) cones are absent. This is rare (under 0.01% of the population) and affects the blue-yellow axis, making blues and greens hard to tell apart.
• Achromatopsia (total color blindness): All color perception is absent, leaving only shades of gray. This is extremely rare.

Most people with color vision deficiency have the “anomalous” versions (protanomaly, deuteranomaly) where the cones are present but shifted in sensitivity, rather than fully absent. The simulator models the more severe forms so your design holds up even in the worst case.

Tips and best practices

• Never rely on color alone to convey information. This is WCAG guideline 1.4.1 and the single most important rule. Pair colors with labels, patterns, icons, or shapes so meaning is clear without color.
• Use a colorblind-safe palette. Palettes that emphasize blue-orange or blue-vermilion contrasts work well across most types of color vision deficiency, since the blue channel is rarely affected.
• Test charts and data visualizations first. Graphs with red and green series lines are the most common accessibility failure. Use the simulator to verify that every data series is distinguishable.
• Check interactive states. Hover, focus, active, and disabled states often rely on subtle color shifts. Make sure these states are apparent through more than just a hue change.

Troubleshooting

• Design looks fine in the simulator but users still report issues. Anomalous trichromacy (partial deficiency) can produce different confusion patterns than the full deficiency the simulator models. If possible, test with real users or use multiple simulation models.
• Unsure which types to prioritize. Deuteranopia and protanopia together account for the vast majority of color vision deficiency. If you can only test two, test those. If your design passes both, it will almost certainly work for tritanopia as well.