Blog · Accessibility

Deuteranopia Design

How to design interfaces that work for deuteranopes — the most common form of red-green color blindness.

Published November 15, 2026 · 6 min read

What Deuteranopes See

Deuteranopes have missing or reduced green cones. The result is that reds, greens, browns, oranges and yellows all look similar — they all appear as variations of yellowish-brown. Blues and purples remain distinguishable, but pure greens fade toward gray-brown.

Deuteranopia affects about 1 in 100 men — the most common severe color blindness. A milder form, deuteranomaly (reduced green perception rather than missing), affects 5% of men and is more common overall.

The Core Problem for Designers

The most impactful design problem: deuteranopes cannot distinguish the "success green" from the "error red." A form with red validation errors and green success states is confusing — both look like the same brown-yellow color to deuteranopes.

Every red/green pair becomes a false equivalence.

Colors Deuteranopes Confuse

  • Red ↔ Green (all shades)
  • Orange ↔ Yellow ↔ Olive
  • Brown ↔ Dark Red ↔ Dark Green
  • Pure green ↔ Grey (nearly)

Colors Deuteranopes Distinguish Well

  • Blue (any shade, distinct)
  • Purple (distinct from blue but can look blue to some)
  • Black, white, gray (always distinguishable by lightness)
  • Cyan (distinct from blue but sometimes confused with green)
  • Yellow vs. blue (well distinguished by lightness and hue)

The Blue-Orange Palette

The safest categorical palette for deuteranopes uses blue and orange as its primary hue contrast. Both remain vivid and distinct under deuteranopia, and both remain distinct under protanopia (red-blindness).

Common combinations:

  • Blue #155EEF with Orange #F97316 — classic and highly distinguishable
  • Blue #2563EB with Amber #F59E0B — softer but equally distinguishable
  • Teal #0D9488 with Rose #E11D48 — modern but still distinguishable

Redesigning Success/Error States

Replace the red-green pairing with blue-orange:

  • Success: green + checkmark (icon + text + color)
  • Error: red + X circle (icon + text + color)
  • Warning: amber + triangle (icon + text + color)
  • Info: blue + info circle (icon + text + color)

The color and icon combination works for everyone. The color and label work for users with any CVD.

Redesigning Charts

Multi-series line charts are the most common failure. If two lines are red and green, deuteranopes see two nearly identical brown lines.

Solutions:

  • Use blue and orange instead of red and green
  • Add line styles (dashed, dotted, thick) to differentiate series
  • Add markers (circles, squares, triangles) at data points
  • Label lines directly rather than relying on a color legend

Redesigning Links

Blue links are usually fine for deuteranopes (blue remains distinguishable). The failure case is red links that match text color, or green links that become indistinguishable from body text.

Solution: always underline links in body text. Blue + underline is a universal signal.

Testing

Preview your interface through the deuteranopia filter using our Color Blindness Simulator. If any two categories or states become indistinguishable:

  1. First try adding redundant signals (icon, label, pattern)
  2. Then adjust the palette (blue-orange instead of red-green)
  3. Last, adjust lightness (make one clearly lighter than the other)

    4. Frequently Asked Questions

    Related Resources