Never use color as the only signal
About 1 in 12 men has some color blindness. Pair color with a second cue, like an icon, a label, a pattern or a position, so the state still reads in grayscale.
Why it matters
Color vision deficiency affects about 1 in 12 men and 1 in 200 women, and red and green are the colors most often confused. Color also disappears in grayscale printing, in bright sunlight, and on a screen with night mode on. When color is the only difference between two lines on a chart, or between a valid field and an invalid one, some people can’t tell them apart at all.
How to do it
- Pair every color with a second cue: a label, an icon, a pattern, a shape, or a position.
- On charts, name each series at the end of its line, and vary the line style and the marker shape, not only the hue.
- For states like errors and success, add an icon and words to the red or green.
- Underline links in body text, so they don’t depend on being blue.
- Keep the colors themselves readable, too (tip #004).
- Test it: switch your screen to grayscale, or use the vision deficiency emulation in your browser’s dev tools, and see what still reads.
When it bends
Color can still lead. It’s often the fastest cue for people who see it. It just can’t be the only one.