Color Blindness Simulator

A noticeable share of men and a much smaller share of women have some form of colour vision deficiency, and many of them cannot tell certain reds, greens and browns apart. A chart legend that relies on a red line and a green line, a status badge with only a colour difference, a map with a red-to-green scale: all of them can fail for a part of the audience without anyone noticing. This page lets you load an image or list your palette and see each type of deficiency at once.

The types

Protanopia is the absence of the long-wavelength (red) cones, deuteranopia the absence of the medium-wavelength (green) cones, and tritanopia the absence of the short-wavelength (blue) cones. The first two make reds and greens look similar, usually as shades of olive, brown and yellow. Tritanopia is much rarer and confuses blue with green and yellow with violet. Achromatopsia, complete colour blindness, is shown as luminance only: a grey version of the picture.

How the simulation works

Each pixel is converted from the sRGB values stored in the file to linear light, because the matrices describe physical quantities and not gamma-encoded numbers. A three by three matrix from Machado, Oliveira and Fernandes (2009), published in IEEE Transactions on Visualization and Computer Graphics, maps the colour to what the missing cone type would make of it, and the result is converted back to sRGB. The page uses the matrices for the full deficiency and blends toward the original colour for lower severity settings, a simple approximation of protanomaly, deuteranomaly and tritanomaly.

A worked example

Press Sample to load a classic five-colour chart palette: red #e41a1c, green #4daf4a, blue #377eb8, orange #ff7f00 and purple #984ea3. At full severity protanopia turns them into #645817, #b3a040, #6480bb, #a59100 and #4166a6: the red becomes a dark olive and the orange and green are both yellowish. Deuteranopia gives #938208, #a69852, #5274b7, #c4ae00 and #586ea1, and achromatopsia gives greys from #6b6b6b to #a3a3a3. The page then warns that the blue and the purple may look alike with deuteranopia: their distance drops from about 0.17 in the normal view to about 0.035 in the simulated one.

Reading the warning

The warning does not mean the design is unusable; it points to one pair to fix. Change lightness first, because deficiency of hue leaves lightness differences intact: make one of the pair clearly darker. Add shapes to markers, dashes to lines and direct labels instead of a legend. Where a pair is only a stylistic accent, no change is needed. The check covers the three dichromacies at full severity, so a pair that passes is not guaranteed to work for every viewer.

Using images

Drop a screenshot, a chart or a map. The page scales the image down to at most 520 pixels wide for the preview, and shows normal vision beside the four simulations. Zoom into areas of low contrast, such as thin lines or small icons, which are the first to fail. Use the severity slider from 10% to 100% to see the milder forms.

Limits

A simulation is a model. Real perception varies between people, and screens, brightness settings and surrounding light change what anyone sees. The matrices are for typical sRGB displays. The tool cannot judge text legibility or recommend a replacement palette automatically; use the contrast checker and the palette matrix for that. Files remain on your device.

Related tools

• Accessible Palette Contrast Matrix scores every text and background pair.
• Contrast Checker tests a single pair against WCAG levels.
• Color Palette Generator builds alternatives to try.
• Image Color Picker reads exact values from your picture.