Skip to content
RGBHex

Designing for Color Blindness

Color-vision deficiency affects about 1 in 12 men and 1 in 200 women — a larger audience than most teams design for. The fixes are mostly small habits, not redesigns. (The person who built these tools is color-blind, so none of this is hypothetical.)

The common types

Red-green deficiencies (protanopia and deuteranopia) are by far the most common. Blue-yellow (tritanopia) is rare, and total color blindness (achromatopsia) is very rare. Most color blindness is partial — an anomalous weakness rather than a complete absence — so people see a muted, shifted version rather than no color at all.

The one rule that matters most: never rely on color alone

If color is the only thing telling two states apart — a red error and a green success, two lines on a chart, a 'required' field marked only in red — then anyone who can't distinguish those colors is locked out. Pair every meaningful color with a second cue: a label, an icon, an underline, a shape, or position.

Check your palettes

Colors that look obviously different to you can collapse into the same muddy tone under red-green deficiency — a status red and a status green especially. Simulating your key color pairs shows which ones merge, so you can add a non-color cue exactly where it's needed.

Keep contrast honest

Good contrast helps everyone, including people with low color discrimination, so meet WCAG 2.2 AA on text regardless of palette. Contrast and color-independence are two different things — you need both.

Try the tools