Colour Blindness Image Simulator

Who this affects

Roughly 8% of men and 0.5% of women of northern European descent have some form of red-green colour vision deficiency. In a team of twenty-five people that is likely to be one or two; on a website with ten thousand visitors a month it is several hundred. Most of them are not registered as anything and will not tell you your chart is unreadable — they will simply not use it.

The four types

Note that protanopia darkens reds as well as confusing them. A red warning on a dark background can disappear entirely, which is why red-on-black error text is a bad habit.

What to do when something fails

The rule that solves nearly every case: never let colour be the only thing carrying meaning.Add a second signal and the problem goes away without changing your palette.

• Status indicators — pair the red and green dots with a cross and a tick.
• Line charts — give each line a different dash pattern, and label the lines directly rather than using a colour key off to the side.
• Bar and pie charts — vary the fill pattern, or order and label the segments so the legend is not load-bearing.
• Maps and heatmaps — use a sequential palette that also varies in lightness, so it still reads when desaturated. Check it with the achromatopsia setting.
• Form errors — an icon and a written message, not a red border alone.
• Links in body text — underline them. This is the oldest example of the rule and still the most commonly broken.

A quick test that costs nothing

Set the type to achromatopsia and look at your design in pure greyscale. If two things that need to be distinguishable are now the same shade, they were relying on hue alone and will fail for a lot of people. This one check catches most real problems faster than working through each deficiency in turn.

Contrast is a separate question

Passing a colour blindness check does not mean your contrast is adequate, and vice versa. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5 to 1 for body text and 3 to 1 for large text of 18.66 pixels bold or 24 pixels regular and above. That is about light versus dark, which this tool does not measure. Check both.

Testing live pages

For a static image — a chart, a poster, a screenshot of a dashboard — dropping the file here is the quickest route. For an interactive page, Chrome and Edge can simulate these deficiencies live: open developer tools, open the Rendering panel from the three-dot menu, and choose an option under "Emulate vision deficiencies". That lets you click through a flow rather than checking one frame.