How to check a design works for colour-blind people

A chart with a red line and a green line. A form that marks errors in red. A map where the safe areas are green and the closed ones red. Each works perfectly for most viewers and fails completely for a sizeable minority — and the person who made it usually never finds out.

How common colour blindness is

Colour vision deficiency affects roughly 1 in 12 men and 1 in 200 women of Northern European ancestry, and is common in every population. The great majority of cases are red-green deficiencies, which come in two forms:

• Deuteranomaly and deuteranopia — reduced or missing sensitivity to green. The most common form.
• Protanomaly and protanopia — reduced or missing sensitivity to red. Reds also look darker.

Blue-yellow deficiency (tritanopia) is rare, and complete absence of colour vision (achromatopsia) rarer still. In a room of fifty people, a red-green chart is likely confusing at least one or two of them.

The principle: never rely on colour alone

Accessibility guidelines put it simply: colour must not be the only way information is conveyed. Colour is fine as an extra signal. The problem is when it is the only one — when the only difference between “passed” and “failed” is green versus red.

Test your design step by step

1. Take a screenshot of the chart, page or graphic.
2. Add it to the Colour Blindness Simulator.
3. Start with deuteranopia, then switch through the other types.
4. Look for anything that becomes impossible to tell apart: two lines, two map regions, a status badge, a link in body text.

A quick second test is to turn the image grey with the Black and White Image Converter. If two important colours become the same grey, they differ only in hue, and anyone who cannot see that hue — or who prints in black and white — loses the distinction.

Fixes that work

Changing the palette alone rarely solves the problem. Adding a second signal almost always does:

• Label things directly. Put the series name at the end of each line in a chart instead of relying on a colour key.
• Use shape and pattern. Different marker shapes, dashed and solid lines, or hatching on bars.
• Add icons and text to status. A tick and a cross, or the words “Passed” and “Failed”, alongside the green and red.
• Underline links in body text, rather than marking them by colour only.
• Mark form errors with a message and an icon, not just a red border.

A worked example: a status dashboard

A dashboard shows each service as a coloured dot: green for running, amber for degraded, red for down. Run through the simulator as deuteranopia, the green and red dots look like two similar brownish yellows, and amber sits between them. A colour-blind engineer cannot tell at a glance which service is down.

The fix keeps the colours but stops relying on them:

1. Add a word next to each dot: Running, Degraded, Down.
2. Give each state its own symbol: a tick, a warning triangle, a cross.
3. Sort failing services to the top, so position carries the meaning too.

Run the simulator again. The dots still merge, but nothing is lost — and the dashboard is easier for everyone to scan.

Choosing colours that separate better

When you do pick colours, pairs that differ in lightness as well as hue survive best. Blue and orange are a well-known safe pair, because they differ strongly for all common types. Avoid relying on red against green, or on similar-lightness pairs such as green and brown or blue and purple. To check the colours actually used in a design, the Color Palette Extractor lists them with their HEX values.

Contrast is a separate check

Contrast matters for everyone, including people with low vision and anyone reading in bright sunlight. The Web Content Accessibility Guidelines ask for a contrast ratio of at least 4.5:1 between normal text and its background, 3:1 for large text, and 3:1 for important parts of graphics and interface controls. The palette extractor shows each colour's contrast against white and black text, which is a fast way to rule out colours that are too pale for text.

What a simulator cannot tell you

Simulations are approximations. Real colour vision varies from person to person, and many people have milder forms than the full simulations show. A simulator is very good at catching designs that fail; it does not replace asking people who see colour differently to try what you have made.