Blog · Accessibility

Color Blindness Design

How to design interfaces that work for the 8% of men and 0.5% of women with color vision deficiency.

Published November 15, 2026 · 7 min read

Understanding Color Vision Deficiency

Color vision deficiency (CVD) is not a single condition. There are several distinct types, each affecting different parts of the color spectrum:

  • Protanopia: red cones missing — reds look dark and often confuse with black or dark brown
  • Deuteranopia: green cones missing — greens and reds look similar yellowish tones
  • Tritanopia: blue cones missing — blues and greens confuse, and yellows can appear pink
  • Achromatopsia: total color blindness — everything is grayscale

Protanopia and deuteranopia are the most common forms, together affecting roughly 8% of men and 0.5% of women of Northern European descent. Tritanopia is rare (1 in 10,000).

The Core Principle: Redundancy

The single most important rule of color blindness design is: never rely on color alone to convey meaning. Every important distinction must have a secondary signal — pattern, icon, label, position or shape.

If you follow only one rule from this guide, follow this one.

State Design

UI states (success, warning, error, info) are the most common failure point. A red badge and a green badge may look identical to a protanope.

Solution: pair color with icon and text:

  • Success: green + checkmark + "Success" label
  • Warning: yellow + triangle + "Warning" label
  • Error: red + X circle + "Error" label
  • Info: blue + i circle + "Info" label

The color becomes a subtle enhancer, not the primary signal.

Chart and Data Visualization Design

Charts are where color blindness hurts most. Standard issues:

  • Pie charts with red and green slices — indistinguishable to protanopes
  • Line charts with red vs. green lines — the two lines look identical
  • Heatmaps with red-to-green scale — the middle becomes invisible

Solutions:

  • Use distinctly different lightness values alongside hue differences
  • Add patterns or textures to fill areas
  • Label series directly on the chart instead of relying on a color legend
  • Use blue-orange or blue-yellow palettes instead of red-green

Test every chart with our Color Blindness Simulator before shipping.

Link Design

Colored links are a common accessibility failure. If a link is blue on black text and the surrounding text is black, a user with monochromatic CVD will see only black text with no distinguishable link.

Solution: always underline links in body content. Underline is a non-color signal that works for every CVD type.

Form Field Design

Form validation is a common CVD failure point. Error fields outlined only in red may look identical to normal fields to a protanope.

Solution: pair the red border with:

  • An error icon inside the field
  • An error message below the field
  • A solid red dot or exclamation mark in the label

Focus Indicators

Keyboard focus indicators rely on color in many designs — often a blue glow on a blue button. To a user with tritanopia, the glow may be invisible.

Solution: use a thick (2px+) solid border with high contrast (3:1+) against both the element and the surrounding background. Blue outline on white button + white background is universally visible.

Testing Your Design

Before publishing any interface, test with our Color Blindness Simulator. Cycle through all 7 CVD types. If any two categories become indistinguishable:

  1. Add a pattern, icon or label to distinguish them
  2. Adjust the lightness (make one clearly lighter or darker)
  3. Change one color to a hue that is more distinguishable (like blue instead of red)

Frequently Asked Questions

Related Resources