Designing for Color-Vision Deficiency

Color-vision deficiency (usually called color blindness) affects roughly 1 in 12 men and about 1 in 200 women. Very few of those people see no color at all — most see a compressed range in which certain hues that look obviously different to you land on nearly the same perceived color. If your interface encodes meaning in those hues, that meaning quietly disappears for a meaningful slice of your users.

The main types

• Red-green deficiencies — by far the most common group. Protan types (protanopia, protanomaly) are reduced sensitivity to red light; deutan types (deuteranopia, deuteranomaly) to green. In both, reds, greens, oranges, and browns crowd together, and red can look darker than you intend.
• Blue-yellow deficiency — tritan types (tritanopia, tritanomaly) are much rarer; blues and greens blur, and yellows can drift toward pink or light gray.
• Achromatopsia — complete absence of color vision. Very rare, but a useful design benchmark: an interface that survives grayscale survives almost anything.

Design rules that actually help

• Never encode meaning in hue alone. Pair color with a second channel: a label, an icon, a pattern, a position, a weight change. “Green = ok, red = error” fails exactly the people most likely to need the distinction; ”✓ ok” and ”✕ error” fail no one.
• Lean on luminance, not just hue. Two colors that differ clearly in brightness stay distinguishable across every type of deficiency — which is the same property WCAG contrast ratios measure. Contrast work and color-blind work are mostly the same work.
• Prefer risky-pair awareness over color bans. Red/green, green/brown, and blue/purple are the classic collision pairs. You don’t have to avoid those hues — you have to avoid making two of them the only difference between two adjacent things.
• Test with simulations, not intuition. You can’t reason your way into someone else’s retina. Preview the actual palette under protan, deutan, and tritan simulation before it ships — Palette Library has these color-blindness previews built in, next to its contrast checks, so the test happens while the palette is still easy to change.

A two-minute audit for any design

1. Convert a screenshot to grayscale. Is every state still tellable apart?
2. Find every place where color is the only signal (chart lines, status dots, form errors). Add a label, icon, or pattern to each.
3. Check the luminance contrast of the pairs that remain — if they pass AA contrast, they’re almost certainly safe here too.

None of this makes designs duller. Constraints on hue push palettes toward differences in lightness and saturation — which tend to look more deliberate, not less.