Designing for Color-Vision Deficiency

Color-vision deficiency (often called color blindness) changes how people distinguish colors. The National Eye Institute estimates that about 1 in 12 men have it; prevalence varies between populations. Most affected people can see colors, but some combinations are harder to tell apart. An interface needs to communicate its meaning even when those differences are not visible.

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.
• Complete color-vision deficiency — very rare. Grayscale can expose some design problems, but it does not reproduce all forms of color-vision deficiency or all low-vision conditions.

Design rules that actually help

• Do not use color as the only signal. Pair status colors with a written label, shape, or pattern. Make the same meaning available to assistive technology. W3C’s use-of-color guidance explains why color alone is insufficient.
• Check contrast separately. Text contrast, non-text contrast, and communicating meaning without color are distinct requirements. Passing a WCAG contrast check does not guarantee that two status colors will be distinguishable to every user.
• 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.
• Use simulations as a review aid. Palette Library includes color-blindness previews alongside contrast checks. Simulations can suggest combinations to revisit, but cannot reproduce every person’s experience or certify an interface. Where possible, include people with color-vision deficiency in usability testing.

A two-minute audit for any design

1. Convert a screenshot to grayscale as an initial check. Are labels and shapes still clear?
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 text and meaningful graphics against their actual backgrounds using the applicable contrast requirements.
4. Review focus, error, selected, and disabled states. Combine simulation with keyboard, assistive-technology, and user testing; no single check covers them all.

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.