Designing for Colour Blindness: How to Check Your Work
Roughly one man in twelve and one woman in two hundred has some form of colour vision deficiency. That means a red-versus-green status indicator - the single most common pattern in software - is ambiguous to a meaningful share of everyone who uses what you build. The Colour Blindness Simulator shows you what they see.
The three kinds, briefly
Deuteranopia and protanopia both affect the red-green range and together account for the overwhelming majority of cases. Reds, greens, oranges and browns collapse toward similar muddy yellows and beiges.
Tritanopia affects blue and yellow. It is far rarer, but worth checking if your palette leans heavily on those.
None of these is an inability to see colour. It is an inability to tell certain colours apart - which is why the fix is never "use more colour".
The rule that solves most of it
Never let colour be the only thing carrying meaning. If red means failed and green means passed, add a tick and a cross, or the words. If a chart distinguishes series by colour, add different line styles or direct labels. If a required field turns red, also say what is wrong.
Done properly this helps far more people than it was aimed at: readers in sunlight, anyone printing in black and white, and anyone glancing at a screen too quickly to register a hue.
How to check a design
Open the tool, choose an image of your interface, pick a deficiency type, and compare it side by side with the original. The question to ask is not whether it looks nice - it is whether you can still tell which element is which.
Contrast is the other half of the same job, and a pair that passes the Contrast Checker stays distinguishable for a far wider range of vision.
Charts are where this bites hardest
A line chart with six series distinguished only by colour is unreadable to a colour-blind viewer, and it is the single most common accessibility failure in reports and dashboards. Colour is doing all the work and the legend is the only key.
Three fixes, in order of how well they work. Label the lines directly, at the end of each, so nobody needs the legend at all. Vary the line style - solid, dashed, dotted - so shape carries the difference as well as hue. And limit the number of series, because beyond about five even a reader with full colour vision is struggling to match legend to line.
The same applies to maps, status tables and anything using red and green to mean bad and good.
Common questions
Does this mean I should avoid red and green entirely?
No. Use them, but make sure something other than hue also distinguishes them.
What about colour-blind-friendly palettes?
They help, but they do not remove the need for a second cue. Check the result rather than trusting the palette.
How many people does this actually affect?
Around eight percent of men and half a percent of women, which on most sites is a larger group than any single browser you test against.
Do I need to test with real users?
It helps, but simulation catches the great majority of problems and costs nothing.
See your design the way others do: