Colour-blind friendly charts, maps and designs
About 1 in 12 men and 1 in 200 women of Northern European ancestry have some form of colour vision deficiency. Most of them can see colour, but certain pairs that look obviously different to you look the same to them. A chart that relies on those pairs is unreadable to a sizeable share of its audience.
The types, and what they confuse
| Type | What is missing | Colours that run together |
|---|---|---|
| Deuteranomaly | Weak green cones (the most common type) | Red, orange, yellow and green; some purples and blues |
| Deuteranopia | No green cones | Red and green, strongly; brown and green |
| Protanopia | No red cones | Red and green; red also looks much darker, almost black |
| Tritanopia | No blue cones (rare) | Blue and green; yellow and pink |
| Achromatopsia | No working cones (very rare) | Everything: only lightness is left |
Red-green problems account for nearly all cases, which is why the red/green "good/bad" convention in dashboards and spreadsheets is the single most common accessibility failure in charts.
Fixes that work
- Do not rely on hue alone. Add labels on the lines, patterns or textures on the bars, or different marker shapes. Direct labels beat a colour legend for everyone.
- Make the colours differ in lightness, not just hue. A dark blue next to a light orange stays distinct for almost every type. If the design still reads in greyscale, it reads for nearly everyone.
- Swap red/green for blue/orange. It keeps the "two opposite things" meaning and survives the common types.
- Use a palette built for this, such as the Okabe-Ito palette or the viridis colour map for heat maps, instead of a rainbow scale.
- Keep text contrast high. WCAG asks for at least 4.5:1 between normal text and its background, which also helps low-vision readers and anyone on a phone in sunlight.
Checking your own work
The Color Blindness Simulator shows your image as it looks with each type side by side, all on your device, so unpublished designs stay private. Check deuteranomaly and protanopia first. If two series or two map regions merge, fix it with one of the methods above and check again. The achromatopsia view doubles as the greyscale test.
To confirm what changed between your old and new version, the Image Compare tool highlights every pixel that differs. The colour palette extractor lists the colours a design actually uses, which makes it easy to spot near-duplicates.
When this matters most
Charts and maps, status colours in an interface (error/success), sports kits and game teams, wiring and transit diagrams, and anything printed, where nobody can hover for a tooltip. Photos and artwork matter less: viewers lose some nuance, but nothing they need to read.