Designing for Color Blindness: A Practical Guide

Contrast ratios tell you whether text is legible. They say nothing about whether a red bar and a green bar mean two different things to the person looking at them. Around 8% of men and 0.5% of women have some form of color vision deficiency (CVD), and for them a substantial share of color-coded interfaces are simply missing information — not harder to read, but genuinely undecodable.

This post is about that second problem: what CVD actually changes at a perceptual level, which color pairs collapse, and how to build palettes that survive. For the contrast side of color accessibility and how it fits alongside this, see The Complete Guide to Accessible Color and Contrast.

What is actually happening

Typical human color vision uses three cone types, each sensitive to a different band of the spectrum: long (roughly red), medium (green), and short (blue). Color is perceived from the ratios between their responses. CVD occurs when one cone type is absent, or when its sensitivity curve is shifted so that it overlaps too heavily with a neighbor. When two cone responses overlap, the brain loses the ability to separate the colors that depended on that difference.

That framing matters because it explains the failure mode. A colorblind user does not see "less color" uniformly. They see specific pairs of colors merging into one, while other pairs remain perfectly distinct. Design for the merges.

Red-green deficiencies

These cover the overwhelming majority of cases, because the L and M cone pigment genes both sit on the X chromosome.

• Deuteranomaly — the M (green) cone's sensitivity is shifted toward red. The most common form overall and usually mild: reds, greens, oranges and browns desaturate toward each other but rarely become fully identical.
• Deuteranopia — no functional M cone. Red, green, orange, brown and olive collapse toward a narrow band of yellowish tans. Distinguishing a red error from a green success becomes guesswork.
• Protanomaly / protanopia — the L (red) cone is shifted or absent. Similar confusions to deuteranopia, plus a crucial extra effect: reds appear substantially darker. A red-on-dark-gray pairing that looks fine to you can drop close to invisible.

Blue-yellow deficiency

• Tritanomaly / tritanopia — the S (blue) cone is shifted or absent. Much rarer, and more often acquired (from aging, diabetes, or medication) than inherited. Blue and green become hard to separate, as do yellow and pink, and violet tends to read as blue.

Total color blindness

• Achromatopsia — no functional color discrimination; perception is lightness only. Extremely rare, and the ideal stress test. An interface that works in grayscale works for every CVD type, because grayscale is the strictest possible case.

The pairs that break

Some combinations fail predictably. Treat this list as a set of things to check, not a ban — each is fine when a non-color cue or a lightness difference backs it up.

• Red / green — the canonical failure. Under deuteranopia and protanopia these can be near-identical, especially at similar lightness. This is why a red/green status system with no icons is the single most common CVD accessibility bug.
• Green / brown and green / olive — merge under both red-green deficiency types.
• Green / blue and blue / purple — merge under tritanopia, and blue/purple also causes trouble for some red-green types since purple's red component is what separates it from blue.
• Light green / yellow — very close in both hue response and lightness.
• Blue / gray and pink / gray — desaturated pairs lose their small hue difference easily.
• Any two mid-tone colors at similar lightness — this is the general case that swallows all the others.

That last one is the useful principle. The pairs above are symptoms; the underlying cause is relying on a hue difference that a given CVD type cannot resolve, without any lightness difference to fall back on.

The rule that makes palettes safe

Separate by lightness as well as hue. If two colors differ meaningfully in relative luminance, they remain distinguishable to every CVD type and in grayscale, regardless of what happens to their hue.

Practically, when you build a categorical palette:

1. Pick your hues for brand and semantics as usual.
2. Assign each one a distinct lightness step — not just distinct hues. A five-color series should look like five different grays when desaturated.
3. Verify by simulating, not by intuition.

A second principle: prefer blue-orange over red-green for two-state encoding. Blue and orange stay separable under all common red-green deficiencies and differ naturally in luminance. Many scientific and dashboard palettes use exactly this axis for that reason.

The Color Palette Generator is useful for producing candidate sets with controlled hue spacing, and the Color Blindness Simulator renders any palette under protanopia, deuteranopia, tritanopia and achromatopsia so you can see which pairs merge before you ship them. Both run entirely in the browser, so an unreleased brand palette stays on your machine.

Applying it: four common surfaces

Status and semantic colors

Red for error, green for success, amber for warning is the deepest convention in UI, and it is exactly the pairing CVD breaks. Do not abandon the convention — supplement it. Every status needs a second channel: an icon with a distinct silhouette (✕ for error, ✓ for success, ! for warning), a text label, or both. Choose icons whose shapes differ, not three variations of a circle.

Then widen the lightness gap. A darker red against a lighter green stays separable in grayscale even when the hues merge.

Charts and dashboards

Legends are the core problem. A color-only legend forces the reader to match a swatch to a series by hue alone, which is the exact operation CVD makes unreliable.

• Label lines directly at their end point instead of using a legend.
• Vary line style — solid, dashed, dotted — so the pattern carries identity.
• Vary markers — circle, square, triangle, diamond.
• Add texture or hatching to bars and areas where the medium allows.
• Cap categorical series at five or six. Beyond that, no palette is reliably distinguishable and you should aggregate or facet instead.

For sequential data (a heatmap, a choropleth), use a single hue varying in lightness rather than a rainbow scale. Rainbow scales fail CVD users, fail in grayscale, and mislead everyone else because they imply category boundaries that the data does not have.

Maps and diagrams

Region fills should differ in lightness and carry direct labels or hatching patterns. Where labels do not fit, a legend keyed to pattern rather than pure color is the fallback.

Links and inline emphasis

Text distinguished from surrounding copy by color alone is a CVD failure and a WCAG 1.4.1 failure at Level A. Underlines solve it. This has enough nuance around contrast requirements and hover states that it has its own treatment in Accessible Link Colors: Getting 4.5:1 Without Ugly Blue.

Testing it in practice

Three passes, in increasing cost:

Grayscale first. Desaturate a screenshot. If two things that mean different things look the same, you have a problem, and you found it in ten seconds. This catches most issues because it is the strictest case.

Simulate the specific types. Grayscale is strict but not representative — it will flag pairs that a deuteranope actually distinguishes fine, and it treats a protanope's red-darkening as a non-issue. Run the real palette through the Color Blindness Simulator for the actual conditions.

Check contrast separately. CVD safety and contrast are independent requirements. A palette can be perfectly colorblind-safe and still fail 4.5:1. Run the final pairs through the Contrast Ratio Checker (WCAG AA/AAA), and if a color needs to move, the Accessible Color Pair Finder will give you the nearest compliant variant so you do not have to re-simulate a completely different hue.

The underlying discipline is simple to state and easy to skip: hue may reinforce meaning, but it must never be the sole carrier of it. Everything above is an application of that one rule.