accessibility
Colour blindness
How does colour blindness affect interface design?
Colour blindness is reduced ability to tell certain colours apart - most commonly red from green - affecting a meaningful slice of people, mostly men. For design it means one thing above all: if colour is the only way you signal something, a lot of users simply won't receive the message.
Also known as: colour blindness, color blindness, colour vision deficiency, colour-blind
Prefer to watch?
Watch the recap 0:43
The demo
A status panel that leans on colour. Switch the simulated vision type and watch the red/green signals collapse - then add non-colour cues and see the meaning come back.
What this demo shows (text version)
A status panel shows three rows - payment received, card expiring, payment failed - distinguished only by colour (green, amber, red dots). A selector applies a filter approximating different colour-vision types. Under the red-green simulations, the green "received" and red "failed" dots become nearly the same colour, so you can no longer tell success from failure.
Turning on "non-colour cues" adds a tick, an exclamation and a cross plus the text labels, so the meaning is clear regardless of colour. That's the core accessibility rule: colour can reinforce a signal but must never be the only thing carrying it - pair it with an icon, shape, pattern or label. (The filters only approximate colour-blind vision; the real test is whether the information survives without the colour.)
Never let colour be the sole carrier of meaning. Red/green "error/success", colour-only chart legends, "tap the blue one" - all vanish for colour-blind users. The fix is cheap and helps everyone: back colour with a second cue - an icon, a label, a shape or a pattern - so the information survives even when the colour difference doesn't.
Switch the simulation to red-green colour blindness and the "success" and "error" dots became the same muddy tone - the status you were relying on, gone. Add the tick, the cross and the words, and it read perfectly again. The colour was never the information; it was just one fragile way of carrying it.
The common types affect red-green discrimination (protanopia and deuteranopia), with blue-yellow (tritanopia) rarer and full colour blindness rarer still. Because red-green is so common, the classic failure is the red-versus-green status cue - error/success, stop/go, over/under budget - which collapses into a single indistinguishable colour for a large group of users.
The rule is simple: colour can reinforce meaning, but never carry it alone. Pair it with an icon (a tick versus a cross), a text label, a shape or a fill pattern, and position. A chart needs direct labels or patterns, not just a colour legend; a required field needs the word "required", not just a red asterisk's colour.
Don't lean on the simulation as a pass/fail, either. Filters approximate what colour-blind users see, but the real test is the principle: could someone who can't distinguish these hues still get the information? Designing that way also helps in bright sunlight, on cheap screens and in greyscale printouts - colour independence is robustness for everyone.