Colour Blindness Simulator

Around 8% of men and 0.5% of women of northern European descent have some form of colour vision deficiency, and red-green types account for the overwhelming majority. The practical conclusion is not to avoid red and green, but never to rely on colour alone to carry meaning. Pair it with text, an icon, a pattern or position, and the design works for everyone. Luminance is the other half of the answer: two colours that differ strongly in lightness stay distinguishable under every simulation here, which is why checking contrast ratio matters as much as checking hue.

Colours are converted from sRGB into linear light, transformed with the Machado, Oliveira and Fernandes (2009) matrices for each deficiency type, then converted back. Achromatopsia uses the Rec. 709 luminance weights. Doing the maths on gamma-encoded values instead would give visibly wrong results.

This simulates dichromacy — the complete absence of one cone type — which is the most severe form. Most people with colour vision deficiency have anomalous trichromacy, a milder shift, so their real experience sits between these swatches and normal vision. Simulation also cannot capture individual variation, adaptation or context: a colour that fails in isolation may be perfectly usable next to a label or an icon.

A green (#22c55e) and a red (#ef4444) look strongly different in normal vision, but under deuteranopia both shift towards similar muddy yellow-browns — which is why a red/green status indicator fails for roughly one man in twelve.

1. Enter the colour you want to check.
2. Add a second colour if you are testing a pair.
3. Compare the swatches across the four vision types.
4. If a pair is flagged as hard to tell apart, add a non-colour cue.

• Using red and green as the only difference between two states.
• Assuming a colour-blind-safe palette needs no contrast check.
• Testing only for deuteranopia and ignoring the other types.
• Treating the simulation as exactly what someone sees.

The Colour Blindness Simulator shows how a colour appears to people with each of the four main types of colour vision deficiency. Add a second colour and it also tells you whether the pair remains distinguishable — the question that actually matters when you are choosing colours for a chart or a status indicator.

Designers, developers and anyone choosing colours for charts, interfaces or signage.

• Simulates in linear light, which is what makes the result accurate.
• Compares a pair of colours and flags when they collapse together.
• Covers all four types, including complete colour blindness.
• Reports the WCAG contrast ratio alongside the hue comparison.

• Checking whether a red/green status pair is distinguishable.
• Choosing an accessible palette for a chart.
• Testing brand colours for accessibility.
• Explaining to a client why a colour pair needs changing.