Color Blindness Explained: The 4 Types Designers Should Know

Accessibility · 7 min read

Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency (CVD). That's about 300 million people — more than the population of the United States — looking at your chart, your game, your form validation, and possibly not seeing the difference you think is obvious. Here's what each type actually changes, and how to design for all of them at once.

How color vision works (the 60-second version)

Your retina has three types of cone cells, each tuned to a different band of light: L cones (long wavelengths — reds), M cones (medium — greens), and S cones (short — blues). Every color you perceive is your brain comparing the responses of these three signals. Color blindness is what happens when one cone type is missing or shifted: the comparisons lose an axis, and colors that used to be distinct collapse into each other.

The four types

1. Protanopia — missing red cones

Affects about 1% of men. Reds darken dramatically and collapse toward muddy browns and dark yellows. A bright red warning button can read as near-black. Red/green distinctions vanish — but so do red/brown and orange/green ones, which surprises designers who only tested "pure" red vs green.

2. Deuteranopia — missing green cones

Also about 1% of men, with milder deuteranomaly (shifted, not missing) being the most common CVD of all at ~5% of men. Greens and reds both drift toward beige and ochre. This is the type most worth testing first: it's the most prevalent, and it hits the red/green axis most product UI relies on for success/error states.

3. Tritanopia — missing blue cones

Rare (well under 0.01%), and unlike the other two it's not sex-linked. Blues and greens blur together; yellows and violets shift. Blue/yellow confusions are unusual enough that most palettes survive tritanopia accidentally — but data visualizations built on blue-to-yellow ramps do not.

4. Achromatopsia — no functioning cones

Very rare (~1 in 30,000). Vision is effectively grayscale, usually with light sensitivity. You can't design hue for achromatopsia at all — only lightness differences survive. Which is exactly why it makes the perfect stress test: if your palette still works in grayscale, it works for everyone.

What this means for your designs

1. Never let hue carry meaning alone. Red/green status dots are invisible information for ~8% of your male audience. Pair color with an icon, a label, or a position: "✓ Saved" beats a green dot.
2. Separate colors by lightness, not just hue. Two colors that differ strongly in lightness survive every CVD type — that's why dark blue + light orange is the classic safe pairing, and why the grayscale test works.
3. Test charts with the worst case in mind. Categorical chart palettes are the most common failure. Six hues at equal lightness collapse into three under deuteranopia. Vary lightness across the series, or add direct labels.
4. Check both states of interactive color. A link that's only "blue instead of black" may vanish; underlines exist for a reason.
5. Don't rely on red for errors. Add the message and the icon. Form validation that only tints the border red fails silently for exactly the users most used to being failed silently.

A quick workflow

Extract or build your palette in the Palette Extractor, then run the result through two filters: the Contrast Checker for lightness separation, and the Colorblind Simulator for hue collapse. If a pair passes contrast and stays distinguishable under deuteranopia, it will survive nearly any audience. Two checks, thirty seconds, no excuses.

Color blindness isn't an edge case — it's a Tuesday. Design with lightness, label your meanings, and let hue be the decoration it was always meant to be.

Try it yourself

Everything above is hands-on in the free tools — no signup, nothing uploaded: Colorblind Simulator · Contrast Checker. More reads in the guides section.