How Color Blindness Simulator works
Roughly one in twelve men and one in two hundred women has some form of colour vision deficiency, which means a red-and-green status indicator is unreadable for a substantial share of any audience. This simulator takes two colours and shows how each appears under the eight main types, then reports the contrast between them in every case. That last figure is the one that matters: two colours can both still be visible while having become indistinguishable from each other, and it is the difference between them — not their individual appearance — that determines whether your interface still communicates.
Where this helps
Checking status colours
Green for success and red for error is the single most common accessibility failure, and it collapses for the most common deficiency type.
Designing chart palettes
Series that look distinct to you may merge for a large share of readers; the table shows which pairs survive.
Reviewing a data visualisation before publishing
Simulating the palette catches problems while they are still cheap to fix, rather than after readers report them.
Auditing an existing interface
Running the colour pairs already in your design system shows which need a supporting icon or label added.
How to use it
- 1
Pick the two colours you are relying on to convey a difference — a success and error state, or two chart series.
- 2
Read the verdict panel for the worst-case contrast across all simulated types.
- 3
Check the table to see which specific types of colour vision deficiency lose the distinction.
- 4
If the worst case falls below 3:1, add a label, icon or pattern rather than adjusting the colours alone.
What the different types actually are
Normal colour vision relies on three cone types, sensitive to long, medium and short wavelengths — roughly red, green and blue. Colour vision deficiency comes from one of these being absent or shifted. The names follow a pattern worth learning: the -anopia endings mean a cone type is missing entirely, while -anomaly means it is present but its sensitivity is shifted, giving a milder effect. Protan refers to the red cone, deutan to green and tritan to blue. Deuteranomaly, a shifted green cone, is by far the most common and affects around 6% of men, while complete absence of either the red or green cone runs closer to 1% each. Tritan deficiencies affecting blue are rare and, unlike the others, are not sex-linked. Achromatopsia, no colour vision at all, is rarer still. Because red and green cones respond to heavily overlapping parts of the spectrum, losing or shifting either collapses much of the difference between reds and greens — which is exactly why that pairing causes the most trouble in practice.
Why the real fix is never a different shade of red
It is tempting to respond to a failed check by hunting for a red and a green that survive simulation, and while that is possible it is fragile: it depends on the simulation matrices being accurate for a given individual, it constrains your palette severely, and it still fails for achromatopsia. WCAG success criterion 1.4.1, 'Use of Color', takes a different position — colour must never be the only means of conveying information. That is a design requirement rather than a colour-picking exercise, and meeting it makes the colour question much less critical. A status badge that pairs its colour with a tick or a cross works for everyone. A chart that labels lines directly instead of relying on a colour legend works for everyone, and incidentally reads better for everybody else too. A form field that marks an error with an icon and a message rather than a red border alone works when the page is printed in greyscale. Note also that 1.4.1 is separate from the contrast requirements in 1.4.3, which govern whether text is legible against its background — a design can satisfy one and fail the other.
Worth knowing
- Never encode meaning in colour alone — pair it with a label, an icon or a pattern.
- Vary lightness as well as hue between colours that must be told apart; a palette that survives greyscale generally survives colour vision deficiency.
- Label chart series directly on the lines rather than in a colour-keyed legend, which removes the matching problem entirely.