Designing for Color Blindness: What 300 Million Users Actually See

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency — about 300 million people worldwide. If your product has a million users, that’s around 60,000 people who may not see your red error banner as red, your green success check as green, or the difference between the two lines on your chart. And because most designers and developers have typical color vision, these failures ship silently: everything looks fine on your screen.

The fix isn’t memorizing rules like “never use red and green.” It’s understanding what color blindness actually does to an image, then looking at your own designs through it. Here’s the whole picture, plus a free in-browser simulator to test with.

What color blindness actually is

Human color vision comes from three types of cone cells in the retina, each tuned to a different band of light:

• L-cones — long wavelengths (reds)
• M-cones — medium wavelengths (greens)
• S-cones — short wavelengths (blues)

Your brain doesn’t receive “red” or “green” directly — it compares the relative responses of the three cone types. Color blindness happens when one cone type is missing or shifted. Lose the comparison signal between L and M cones and huge swaths of the spectrum — reds, oranges, yellows, greens, browns — collapse toward each other.

That’s the key insight: color blindness is rarely “seeing in black and white.” It’s losing the ability to tell specific color pairs apart while everything else looks normal. A person with deuteranopia sees a rich, colorful world — it just doesn’t contain the red/green distinction your UI depends on.

The 8 types, and who they affect

Type	What’s affected	What gets confused	Prevalence (male)
Protanopia	L-cone absent	Red ↔ green, red looks dark	~1%
Protanomaly	L-cone shifted	Red ↔ orange ↔ green, milder	~1%
Deuteranopia	M-cone absent	Red ↔ green ↔ brown	~1%
Deuteranomaly	M-cone shifted	Green ↔ yellow ↔ red, milder	~5%
Tritanopia	S-cone absent	Blue ↔ green, yellow ↔ pink	<0.1%
Tritanomaly	S-cone weakened	Blue ↔ green, milder	very rare
Achromatopsia	No working cones	All color (grayscale vision)	~1 in 30,000
Achromatomaly	Cones weakened	Most color, partially	very rare

Two things stand out. First, deuteranomaly alone affects about 5% of men — it’s the common case, not an edge case. Second, the four red/green types together dwarf everything else, which is why “red vs. green as the only signal” is the single most damaging pattern in UI design.

The red/green types are X-linked genetic traits, which is why they’re so much more common in men. Tritan (blue/yellow) deficiencies aren’t sex-linked and are usually acquired — through aging, glaucoma, or diabetes — so their share of your audience grows with its age.

Where designs actually fail

The failures are predictable once you know what merges:

• Error red vs. success green. The classic. Form validation that turns a border red or green — with no icon or message — is invisible to a deuteranope.
• Charts and dashboards. Default palettes in most charting libraries put red and green series side by side. Two lines become one. Traffic-light KPI dashboards (red/amber/green tiles) are the worst offender in enterprise software.
• Diffs and code review. Red deletions vs. green additions distinguished only by hue. (Good tools also use +/- markers — that’s the fix pattern in action.)
• Links that differ from body text only by color. If link blue and text black is fine, but link color vs. surrounding text needs more than a subtle hue shift.
• Maps and heatmaps. Red-to-green “bad-to-good” gradients read as a single muddy band. This is why modern tools default to blue-to-yellow scales like viridis.

Notice what all of these share: hue is the only channel carrying the information. Nothing else — not shape, not text, not position, not brightness — repeats the message.

The rules that actually work

1. Never let hue carry meaning alone. Pair every color signal with a second channel: an icon (✓/✗), a label, a pattern, a shape, or a position. This is also literally WCAG success criterion 1.4.1 “Use of Color”.

2. Vary lightness, not just hue. A dark red vs. a light green survives every deficiency type, because lightness differences survive even achromatopsia. If your two states differ in brightness as well as hue, you’re mostly safe.

3. Prefer blue/orange over red/green. Blue is distinguishable in all common deficiency types. When you need a two-color contrast — diffs, diverging scales, before/after — blue vs. orange is the safe default.

4. Use a colorblind-safe palette for data. The Okabe–Ito palette (8 colors chosen for CVD distinguishability) and the viridis family of sequential scales are battle-tested defaults. Build your own with the Color Palette Generator, then verify it survives simulation.

5. Check contrast too — it’s a different failure mode. Contrast ratio measures lightness difference, which matters for low vision and legibility; it says nothing about hue confusion. A red/green pair can pass WCAG AA contrast and still be indistinguishable to 8% of men. Use the Contrast Checker for legibility and a simulator for hue — they catch different bugs.

How simulation works (briefly)

Simulators transform each pixel’s RGB value with a 3×3 matrix derived from research on dichromatic vision (Brettel, Viénot & Mollon, 1997). Each deficiency type has its own matrix that collapses the confused hues onto each other — for deuteranopia, reds and greens both land on muddy yellow-browns, which is a good approximation of the distinctions lost, rendered in colors people with typical vision can evaluate.

That’s the point of simulating: you can’t borrow someone else’s eyes, but you can see which of your colors merge — and that’s the actionable information.

Test your design in 30 seconds

The fastest workflow, using our free Color Blindness Simulator:

1. Screenshot your UI (or grab your chart, map, or brand palette).
2. Paste it straight into the tool — clipboard paste, drag-and-drop, and iPhone HEIC photos all work. Everything runs in your browser; nothing is uploaded to a server.
3. Click “All types” to see the original plus all eight deficiency simulations in one grid. The problems jump out — you’re looking for any two UI elements that were distinct in the original and identical in a tile.
4. Audit your design tokens with the palette mode: paste your hex colors and see how each swatch shifts under the selected deficiency.
5. Fix and re-test. Add the icon, adjust the lightness, or swap green for blue — then run the grid again.

Ten seconds of looking at the deuteranopia tile tells you more than an hour of reading guidelines. Your design either survives it or it doesn’t — and now you’ll know before your users do.