Designing for Color Blindness

July 3, 2026 · Accessibility · a four-minute read

Roughly one man in twelve and one woman in two hundred has some form of color vision deficiency — overwhelmingly along the red-green axis. If your product has a thousand users, statistically dozens of them can't tell your error state from your success state. The good news: fixing this almost never means abandoning your palette.

What's actually happening

Human color vision runs on three cone types tuned to long, medium and short wavelengths — roughly red, green and blue sensors. In the common deficiencies, the red or green cones are missing (protanopia, deuteranopia) or shifted. The result isn't a gray world: it's a world where red and green both land near the same muddy yellow-brown, while blues and yellows survive almost untouched. That asymmetry is the whole design playbook.

The playbook, in order of effort

1 – Never let color carry meaning alone. The error field gets an icon and a message, not just a red border. The chart lines get labels or direct annotation, not just a color legend. This single rule fixes most products and costs a few icons.

2 – Separate by lightness, not just hue. A dark red versus a light green survives every deficiency, because lightness perception is intact. Run your palette through the simulator's grayscale panel: if categories are still distinguishable with hue removed entirely, you're safe everywhere.

3 – When hues must differ, differ along blue-orange. It's the axis that survives red-green deficiency. This is why so many mature data-viz palettes are built on blue-to-orange ramps rather than the intuitive red-to-green — the intuition is exactly the trap.

4 – Keep red-and-green where convention demands it — traffic-light UX is too embedded to fight — but make the red darker and the green lighter, and add the icon. Convention plus a second channel beats either alone.

Prove it, don't vibe it

Screenshot your dashboard, your chart, your form states. Feed the screenshot to the simulator and look at the deuteranopia panel — the most common case. Ask one question: can I still do every task? Then check the grayscale panel for the strict version. Two minutes, and you know instead of hoping. If a text-background pair fails, the contrast checker will hand you the nearest passing shade of your own color — palette preserved, as promised.

Screenshot in hand? Run the simulation — the answer is two panels away.