Test your designs with a color blindness simulator
Around 1 in 12 men and 1 in 200 women have some form of colour-vision deficiency, most often red-green. For them, a red error and a green success message can look almost identical, and a line chart with red and green series becomes hard to read. This color blindness simulator shows your images and palettes the way they would appear with seven types of colour-vision deficiency.
Types simulated
| Type | Affected cones | What gets confused |
|---|---|---|
| Protanopia / protanomaly | Red (L) cones missing / weak | Red with green and brown; reds look darker |
| Deuteranopia / deuteranomaly | Green (M) cones missing / weak | Red with green — the most common type |
| Tritanopia / tritanomaly | Blue (S) cones missing / weak | Blue with green, yellow with pink |
| Achromatopsia | No functioning cones | All hues; only lightness remains |
How the simulation works
Pixels are converted from sRGB to linear light and multiplied by the matrices published by Machado, Oliveira and Fernandes (2009), which model how the missing or shifted cone response changes perceived colour. Full deficiencies use severity 1.0; the "-anomaly" variants use severity 0.6 to represent the milder, more common forms. Achromatopsia is shown as luminance only. Simulations are approximations: individual vision varies, but the model is widely used in accessibility tooling.
Checking a palette
The palette table shows each colour in every simulation. If two cells in a row look alike, users with that deficiency may not tell the colours apart. For example, #dc2626 (red) and #16a34a (green) become two similar olive-brown tones under deuteranopia.
Design fixes that work
- Never use colour as the only signal: add icons, labels, patterns or line styles.
- Differ in lightness, not only hue — a light and a dark colour stay distinguishable in every simulation.
- Prefer blue/orange over red/green for binary states and chart series.
- Check text contrast separately with the contrast checker.
Build a new, safer palette with the color palette generator and verify it here before shipping.
Charts and data visualisation
Charts are where colour-vision deficiencies cause the most real problems, because legends force readers to match colours precisely. Test every chart palette here: if two series merge in the deuteranopia or protanopia column, change one of them or add direct labels at the end of each line. Sequential scales (light to dark in one hue) survive all simulations well, while rainbow scales do not. Status colours deserve the same care — pair red and green indicators with distinct icons or text such as "Failed" and "Passed" so meaning never depends on colour alone.
Downloading results
Select a single deficiency to see the original and the simulation side by side at a larger size, then use Download simulated PNG to attach the result to a ticket or design review. Showing stakeholders how a chart looks to a colour-blind user is often more persuasive than quoting guidelines.
Privacy
Everything happens locally in your browser with JavaScript and the Canvas API. Your images are never uploaded to our servers, so the tool also works with confidential screenshots and personal photos.