Blog · Accessibility

Protanopia Design

How to design interfaces that work for protanopes — users with missing or reduced red perception.

Published November 15, 2026 · 6 min read

What Protanopes See

Protanopia is a form of red-green color blindness where red cones are missing or non-functional. Reds appear unusually dark — sometimes indistinguishable from black — and reds look similar to browns and dark greens. Bright red often looks almost black to a protanope, which makes warning signs and stop signals harder to see than for typical viewers.

Protanopia affects about 1 in 100 men. A milder form, protanomaly (reduced red perception), affects another 1% of men and is more common overall.

Key Distinguishing Features

  • Reds darken dramatically — a saturated red like #FF0000 appears near-black
  • Red and green confuse — both appear as brownish-yellow
  • Bright reds look dull — no vividness to red
  • Blues and yellows remain distinct — most protanopes distinguish these well
  • Purples confuse with blue — because purple has a strong red component

Colors That Fail for Protanopes

  • Red ↔ Black (saturated red looks nearly black)
  • Red ↔ Dark Green (both look dark brown)
  • Red ↔ Brown (nearly identical)
  • Dark red ↔ Purple (both appear dark blue)

The Danger of Red for Warnings

Red is the universal warning color in Western design. But red fails specifically for protanopes — the exact users who most need to see warnings. A red warning on a dark background becomes invisible.

Solution: use amber/orange for warnings, or pair red with icon + text + position. Never rely on red alone for critical alerts.

Recommended Palette for Protanopes

The safest palette uses blue and yellow as the primary hue contrast. Both are highly distinguishable under protanopia.

  • Primary: Blue #155EEF
  • Secondary: Amber #F59E0B
  • Success: Teal #0D9488 (still distinguishable)
  • Warning: Amber #F59E0B
  • Error: Deep red #B91C1C paired with X icon
  • Info: Blue #2563EB

Redesigning Red Signals

Every place you would use red, add redundancy:

  • Error states: red + X icon + text label
  • Required fields: red asterisk + "required" text (or move to amber)
  • Delete buttons: red + trash icon + "Delete" text (never color alone)
  • Sales badges: red + "SALE" text (never just color)

Testing

Use our Color Blindness Simulator to preview through the protanopia filter. Any element that becomes indistinguishable from its background or from other critical elements requires a redundant signal.

Frequently Asked Questions

Related Resources