Color Blindness Simulator

Roughly one man in twelve and one woman in two hundred has some form of colour vision deficiency. This tool shows approximately how a colour looks with protanopia, deuteranopia, tritanopia and complete colour blindness. Enter two colours to see whether they stay distinguishable, which is the thing that matters when designing charts, maps and status indicators.

How to use it

1. Enter a colour, and optionally a second to compare.
2. Look at the swatches for each type.
3. Check whether the two colours remain clearly different.
4. Adjust the palette if they merge.

When it helps

• Checking chart and map colours for accessibility.
• Making sure red and green status colours are still distinct.
• Designing inclusive interfaces.
• Understanding how colour vision varies.

Good to know

• Never rely on colour alone. Add labels, icons or patterns.
• Red and green is the most common problem pair.
• The simulation is an approximation; real experience varies from person to person.

The main types

Protanopia and deuteranopia are red-green deficiencies, where reds and greens look similar and often brownish. Tritanopia, which is rare, affects blue and yellow. Achromatopsia is complete colour blindness, seeing only shades of grey. Milder forms, called anomalous trichromacy, are much more common.

The simulation uses standard matrices from vision research, applied in linear colour space.

Worked example: red and green

Enter #d93025 and #1e8e3e, a typical red and green used for errors and success. In deuteranopia, both appear as dull yellow-browns that are hard to tell apart. If a chart relies on those colours alone, some people can't read it.

Fix it by adding icons, labels or patterns, or choose colours differing in lightness, such as a dark blue and a light orange.

Designing for everyone

Use colour as an extra, not the only signal. Label chart lines directly, use different shapes for markers, and check your palette in the simulator. Blue and orange is a reliable pair for most types.

Accessibility guidelines also require sufficient contrast between text and background regardless of colour vision.

Testing real designs

Besides entering colours, try browser extensions or built-in developer tools that simulate colour vision deficiency on a whole page. Check charts, maps, status badges, links inside text and form errors.

Even better, ask people with colour vision deficiency to try your design. Simulations are useful, but real feedback is better.

Contrast beyond colour vision

Low contrast hurts many people, including those with low vision, older readers and anyone using a screen in bright light. Adequate lightness difference between text and background helps everyone, whatever their colour vision.

Check lightness contrast first, then hue differences.

Further reading

Organisations such as colour-blind awareness charities and accessibility guidelines publish advice on palettes. The WCAG guidelines add contrast rules that apply to everyone.

Questions