Color Blindness Simulator

The eight conditions

  • Red and green: deuteranomaly (about 5% of men), deuteranopia, protanomaly and protanopia (about 1% of men each).
  • Blue and yellow: tritanomaly and tritanopia (rare).
  • No color: achromatomaly and achromatopsia (very rare).

Each pixel is converted to linear light and passed through the Machado, Oliveira and Fernandes (2009) model of the condition, the model most accessibility tools use. Use it on designs, charts, maps and slides to find colors that differ only by hue.

How it works

See any picture the way people with color blindness see it, through eight conditions

Upload, drop or paste a picture, or start from the IDE screenshot of a Codigrate theme, and drag the handle across it: the original on one side, the picture through the chosen color vision deficiency on the other. Each pixel is converted to linear light and multiplied by the Machado, Oliveira and Fernandes (2009) model of the condition, the model most accessibility tools use, at full strength for protanopia, deuteranopia and tritanopia and at 60% for their milder forms; the two kinds of monochromacy keep only lightness.

About one man in twelve and one woman in two hundred has a color vision deficiency, most of them red and green ones. Use the simulator on designs, charts, maps and slides to find colors that only differ by hue, then check text with the Contrast Checker. The picture is processed on your device and never uploaded.

Questions

What is the most common type of color blindness?
Deuteranomaly, a weaker green cone, affects about 5% of men; the red and green types together about 8% of men and 0.5% of women. Blue and yellow types and total color blindness are rare.
How accurate is the simulation?
It uses the Machado, Oliveira and Fernandes (2009) model in linear RGB, the standard in accessibility tools. Real color vision varies from person to person, so treat it as a close guide rather than an exact copy.
Is my image uploaded?
No. The picture is read and processed on a canvas in your browser, and the download is made on your device. Nothing leaves the page.
How do I make my design work for color blind people?
Do not rely on hue alone: pair colors with labels, icons or patterns, keep enough lightness contrast between neighboring colors, and check the result in every simulation, especially deuteranomaly and protanopia.
Codigrate

Codigrate