What color blindness is and its main types
The retina has three types of cones, the cells responsible for color vision: L cones, most sensitive to long wavelengths (reds), M cones to medium wavelengths (greens) and S cones to short wavelengths (blues). The brain compares the signals from these three channels to build every color. In color blindness, one cone type is missing or has shifted sensitivity, so some colors that other people tell apart start to look the same.
Most cases are inherited and linked to the X chromosome, which is why the condition is far more common in men. The table summarizes the types this simulator reproduces:
| Type | Affected cone | Colors that get confused | Frequency |
|---|---|---|---|
| Protanopia | L (red) missing | Red, green, orange and brown; reds look darker | Protan and deutan, counting full and partial forms, affect about 8% of men of European descent |
| Deuteranopia | M (green) missing | Red, green, orange and brown, without the darkening of reds | |
| Tritanopia | S (blue) missing | Blue with green, yellow with pink or violet | Rare |
| Achromatopsia | Cones not functioning | All of them: vision is in shades of gray | Very rare |
"Red-green color blindness" covers both protans and deutans, who together account for the vast majority of cases. If you only have time for one test, start with deuteranopia and protanopia.
How the simulation works
The simulator applies the matrices published by Machado, Oliveira and Fernandes in 2009 to every pixel. It is a physiologically based model widely used in research and accessibility tools. The math runs in linear RGB: the tool first removes the sRGB gamma encoding, then multiplies the values by the matrix for the chosen type and finally converts back to sRGB. Working in linear space matters, because applying the matrix directly to gamma-encoded values distorts brightness.
Achromatopsia is handled differently: each pixel is converted to its luminance, which measures how light or dark a color looks, and shown in gray. It is a quick way to see whether your design relies on hue alone to separate elements.
There are two modes:
- Image: upload a screenshot, a chart or a photo and see the original next to the simulated version. The grid option shows all four types at once, which speeds up reviews.
- Palette: enter up to 6 colors and see how each one looks under each type. It is the fastest way to check a chart palette before you draw the chart.
Images are processed in your browser and are never sent to a server.
Limitations to keep in mind
The tool simulates full severity, meaning dichromacies where a cone type is absent. Partial anomalies such as deuteranomaly and protanomaly, where the cone is present but its sensitivity is shifted, are actually more common than the complete forms. For those people colors become less distinct rather than identical. That has a practical upside: if a design works under the full simulation, it also works for the partial forms, which is why testing the worst case is a sound strategy.
A few other caveats: the simulation assumes a typical sRGB monitor, so a poorly calibrated screen changes the result, and it shows average perception rather than the exact experience of any one person. Use the simulator to find problems, not as proof of accessibility.
What to test in your project
- Charts and dashboards: red and green lines or slices often turn into two similar mustard tones under protanopia and deuteranopia. If the legend relies on color alone, the chart becomes unreadable.
- Maps: green-to-red scales, common in heat maps and risk maps, lose their meaning. Scales that also change in lightness stay readable.
- UI states: a red error border and a green success border may look identical. Test forms, status badges, notifications and online/offline indicators.
- Inline links: if links differ from body text by color only, check that they are still visible. An underline fixes it.
- Product photos and color variants: in online stores, show the color name next to each swatch.
Design best practices for color blindness
- Don't rely on color alone. Success criterion 1.4.1 of WCAG (Use of Color) requires that color is not the only way to convey information. Add text, icons, fill patterns, line styles or distinct markers.
- Use lightness contrast. Two colors with clearly different lightness remain distinguishable even in grayscale. Check your pairs in the contrast checker; the contrast and accessibility guide explains the WCAG thresholds.
- Prefer safe combinations. Blue and orange, such as blue and orange, stay distinct for red-green types. Avoid placing red and green of similar lightness side by side.
- Label directly. In charts, writing the series name at the end of each line works better than a separate color legend.
- Test early. Build your palette in the palette generator and paste the colors into palette mode here before applying them to the design.
To go further, read the guide on designing for color blindness, with examples of fixes for charts and interfaces.