Color blind friendly design: palettes that work for everyone
Roughly one man in twelve does not see your palette the way you do. The fix is not a beige interface. It is making sure color is never the only thing carrying the message.
About 8% of men and 0.5% of women of northern European descent have some form of color vision deficiency. In a product with a hundred thousand users that is thousands of people, and none of them will file a bug report saying “your status indicators are identical”. They will just get it wrong.
What color blind users actually see
Three types account for nearly all of it:
- Deuteranomaly and deuteranopia: green cones shifted or absent. By far the most common, around 6% of men. Reds and greens converge towards a yellowish brown.
- Protanomaly and protanopia: red cones shifted or absent, around 2% of men. Similar confusion, plus reds appear noticeably darker than they do to typical vision.
- Tritanopia: blue cones absent. Very rare, under 0.01%, and it affects men and women equally. Blues and greens converge; yellow and pink become hard to separate.
The critical detail: red and green color blindness is a hue problem, not a lightness problem. People with deuteranopia see differences in brightness perfectly well. That is the opening you design through.
The one rule
Never let color be the only carrier of information.
That is the whole of WCAG Success Criterion 1.4.1 and it costs you almost nothing:
| Instead of | Add |
|---|---|
| A red border on an invalid field | An icon and a text message |
| Green and red status dots | A tick and a cross, or the words |
| Series in a chart told apart by color | Direct labels, or different line styles |
| A link in body text shown only by color | An underline |
| A red asterisk for required | The word “required” |
That point about links is worth dwelling on. Removing underlines from links inside a paragraph is a popular aesthetic choice and it is a real accessibility failure. If you remove them, the link color needs 3:1 against the surrounding text as well as 4.5:1 against the background, and you need another distinguishing feature on hover and focus. Underlines are easier and they were always clearer.
Color blind friendly palettes that survive
For categorical data, such as chart series, tags and status colors, the reliable trick is to vary lightness as well as hue. Two colors that converge in hue for a deuteranope are still distinguishable if one is clearly darker.
Color combinations that work:
- Blue and orange. The single most robust pairing. Distinct for every common type.
- Blue and red. Reliable, though red darkens noticeably under protanopia.
- Yellow and purple. Strong, if the yellow is dark enough to sit on a light background.
Color combinations to avoid:
- Red and green. The obvious one.
- Green and brown. Nearly identical for deuteranopes.
- Light green and yellow.
- Blue and purple. Close in hue, and often close in lightness too.
The established color blind friendly palettes for graphs are worth borrowing rather than reinventing: the eight colors from Okabe and Ito, and the qualitative sets in ColorBrewer, are both designed and tested for this.
Testing it
Simulation is a check, not a design method. Design with redundant encoding from the start, then simulate to catch what you missed.
Every result on this site includes a color blindness simulation. The color palette generator shows all four types under each palette, and the color contrast checker recomputes the ratio for each. The simulations use the Machado, Oliveira and Fernandes matrices, which are a solid model rather than a medical instrument.
What to look for: any two swatches that merge into one. If the two things they represent need to be told apart, that pair needs a second signal.
The blunt manual test, which costs nothing: turn the design to grayscale. If you can still use it, you are most of the way there. Grayscale is harsher than any real deficiency, so passing it gives you a comfortable margin.
The thing people get wrong
Designing for color vision deficiency does not mean designing without color. It means color is a reinforcement layer rather than the one holding everything up. Use as much color as you like and make it beautiful. Then make sure that if you deleted every hue from the page, the interface would still tell the user what they need to know.
That constraint tends to produce clearer interfaces for everyone, which is the usual way accessibility work pays for itself.