Color Blindness Simulator

How to use the color blindness simulator

1. Drop an image on the drop zone or click it to choose a file (JPG, PNG, WebP, GIF…). You can also click Use a sample image to load a test chart of hues and easily confused color pairs.
2. Choose the Type of color vision deficiency: Protanopia, Deuteranopia, Tritanopia, their milder forms Protanomaly, Deuteranomaly and Tritanomaly, or Achromatopsia.
3. For the three anomalous types, set the Severity from 10 % to 90 %.
4. Pick a View: Side by side shows the original and the simulated image next to each other; Slider lays one over the other so you can drag the split across the picture.
5. Click Download simulated image to save the result as a PNG.

The image never leaves your device: it is read and processed in your browser. Very large pictures are reduced to 1,600 pixels on the longest side to keep the simulation fast.

The types of color blindness

Normal color vision relies on three kinds of cone cells, sensitive to long (L, “red”), medium (M, “green”) and short (S, “blue”) wavelengths.

• Protanopia and protanomaly: the L cones are missing or shifted. Reds look darker and are confused with greens and browns. About 1 % of men have each form.
• Deuteranopia and deuteranomaly: the M cones are missing or shifted. Deuteranomaly is by far the most common deficiency, affecting about 5 % of men of European descent; red, orange, yellow and green become hard to tell apart.
• Tritanopia and tritanomaly: the S cones are affected. Blues and greens, and yellows and pinks, get mixed up. It is rare (well under 0.1 %) and affects men and women equally.
• Achromatopsia (rod monochromacy): no working cones, so the world is seen in shades of grey, often with light sensitivity. It affects about 1 person in 30,000. The simulation shows the image’s luminance only.

Overall, roughly 1 man in 12 and 1 woman in 200 has some form of red-green color vision deficiency.

How the simulation works

The tool uses the physiologically based model of Machado, Oliveira and Fernandes (2009), “A Physiologically-based Model for Simulation of Color Vision Deficiency”, IEEE Transactions on Visualization and Computer Graphics 15(6). The authors published one 3 × 3 matrix per deficiency and per severity from 0 to 1 in steps of 0.1; the tool uses severity 1 for the “‑opia” types and interpolates between the published steps for the anomalous types.

These matrices are defined for linear RGB. Each pixel is therefore decoded from sRGB to linear light, multiplied by the matrix, clamped, and encoded back to sRGB. Applying the matrices directly to gamma-encoded values, as many quick filters do, makes reds much too dark. Achromatopsia uses the standard sRGB luminance weights (0.2126, 0.7152, 0.0722).

A simulation is an approximation. Real color vision varies from person to person, and a screen cannot show exactly what someone else perceives. Use it to find problems, then confirm with real users when you can.

Tips for color-blind-friendly design

• Never rely on color alone: add labels, icons, patterns or underlines.
• Avoid red/green pairs for good/bad states; blue/orange is much safer.
• Keep a strong lightness difference between colors that must be told apart. Check it with Achromatopsia: if two areas look the same grey, many people will struggle.
• Test charts, maps, status badges and form errors, not just photos.