Color Blindness Types: See What Others See

What Color Blindness Actually Is

Your retina has three types of cone cells, each sensitive to different wavelengths: roughly red, green, and blue. Your brain builds every color you see by comparing their signals. Color blindness happens when one cone type is missing or shifted — the comparison breaks down, and certain colors become indistinguishable.

Total color blindness (achromatopsia) — seeing only in grayscale — is extraordinarily rare, affecting roughly 1 in 33,000 people. When people say "color blind," they almost always mean one of the three common types below, where the world is still colorful but specific pairs of colors collapse into each other.

The key insight for designers: color blind users aren't missing the information in your design if you don't rely on color alone. They're missing the distinction between specific color pairs. Design around the pairs, and you're most of the way there.

Protanopia & Protanomaly: The Red-Blind Types

Protanopia (red-blind: missing red cones) and protanomaly (red-weak: shifted red cones) affect about 1% of men. Red looks darker — dramatically darker — and red-green distinctions vanish.

What this looks like in real life:

• A red apple and a green apple on a tree can look nearly identical — both darkish olive.
• Red text on a black background becomes nearly invisible, because the red reads as very dark against the black.
• Traffic lights are navigated by position (top/middle/bottom), not color — which is exactly why traffic lights are always in the same order.
• A "red" warning icon and a "green" success icon side by side? Same muddy color.

The darkening of red is the signature. Protanopes don't just confuse red and green — they experience red as dimmer than everyone else does. A designer who makes error states red-on-dark is building something a protanopic user literally cannot see.

Deuteranopia & Deuteranomaly: The Green-Blind Types

Deuteranopia (green-blind) and deuteranomaly (green-weak) are the most common types — deuteranomaly alone affects about 5% of men, making it the single most common color vision deficiency on earth.

Red-green confusion again, but without the darkening of red. Green and red both shift toward a yellowish-brown middle ground:

• The classic Ishihara test plates (those dotted circles with hidden numbers) are designed around exactly this confusion — the number is visible only if you can distinguish red-green dot patterns.
• Ripe vs unripe fruit is genuinely hard. Many deuteranomalous people pick fruit by feel and smell.
• In data visualization, the default red-green diverging scale (bad=red, good=green) is the most common accessibility failure in dashboards. A deuteranopic user sees two similar browns.
• Sports: red vs green team kits are a known problem — several football leagues now check kit combinations for color-blind accessibility.

If you remember one thing: never use red and green as the only way to distinguish two states. It's the most common pairing in interfaces (errors, stocks, status indicators) and the most commonly confused pair in human vision.

Tritanopia & Tritanomaly: The Blue-Blind Types

Tritanopia (blue-blind) and tritanomaly (blue-weak) are rare — well under 0.01% of people — and affect men and women equally, because they're not carried on the X chromosome like the red-green types.

Blue looks greenish; yellow looks pinkish or light gray. Blue-yellow distinctions collapse:

• A blue sky and green foliage can blur together.
• Yellow highlighters on white paper can nearly disappear.
• Blue links vs purple visited-links — the web's oldest convention — can be indistinguishable.

Tritan defects are also the type most likely to be acquired rather than inherited — eye diseases, cataracts, and some medications can cause blue-yellow confusion later in life. So even in an audience with no inherited color blindness, your older users may have tritan-like difficulties.

Designing So Everyone Sees It

Here's the practical part. These rules cover the vast majority of color vision deficiencies:

1. Never use color alone. Every color-coded meaning needs a second channel: an icon, a label, a pattern, or position. Error messages get an ⚠ icon and the word "Error." Required form fields get an asterisk and red. Charts get direct labels or distinct patterns, not just colored lines.

2. Fix the red-green habit. Replace red/green status pairs with alternatives: blue/orange, or red (with icon) vs a neutral. The blue-orange palette is distinguishable under every common type of color blindness — it's why so many "colorblind-friendly" palettes are built on it.

3. Check contrast, not just hue. Many failures are contrast failures wearing a color disguise. Light green text on a white background is hard for everyone; for a deuteranope it's invisible. Aim for WCAG AA contrast ratios (4.5:1 for normal text) and most color-blind problems shrink dramatically.

4. Simulate before you ship. This is the single highest-value habit. Run your design through the Color Blindness Accessibility Simulator — upload a screenshot or test your palette and see it through protanopic, deuteranopic, and tritanopic eyes. Thirty seconds of simulation catches problems that hours of guidelines-reading won't. Make it part of your design review checklist, next to spell-check.

5. Test with real users when it matters. Simulation is excellent for catching obvious failures, but real users catch the subtle ones — like the chart that's technically distinguishable but takes ten seconds of squinting. For anything high-stakes (medical, financial, safety), include color-blind users in testing.

The Worked Example: Fixing a Dashboard

A startup's analytics dashboard used the classic scheme: green up-arrows for growth, red down-arrows for decline, in a table of 40 metrics. For the ~8% of male users with red-green deficiency, the table was 40 identical brownish arrows.

The fix took twenty minutes:

• Kept the colors (green/red are fine as decoration) but added ▲/▼ arrow direction as the primary signal — direction works for everyone.
• Added the percentage value next to each arrow — now there's a numeric channel too.
• Changed the red to a slightly orange-red and the green to a teal-green, widening the distinguishable gap for anomalous (shifted, not missing) vision.

Result: three channels (color, direction, number) carrying the same information. That's the gold standard — redundant encoding. If any one channel fails for any user, the other two carry the meaning.

Apply this to your own work: pick one interface you own, list every place color carries meaning alone, and add a second channel to each. It's usually an afternoon's work, and it's the highest-impact accessibility fix per hour you'll ever do.

Try This Now

Take a screenshot of something you designed — a slide, a chart, a UI — and run it through the Color Blindness Accessibility Simulator. Look specifically at your reds vs greens and your light-on-light text. Whatever surprises you is exactly what 1 in 12 of your male users have been experiencing. Fix the worst one today.