Designing for color blindness

Color vision deficiency isn’t a rare edge case. Roughly 8% of men and 0.5% of women, close to a quarter of a billion people worldwide, see fewer color distinctions than the design you ship assumes. Designing for them is mostly about not relying on hue alone.

The conventional designer instinct when first told about color blindness is to mute everything: drop chroma, prefer grays, avoid color as a tool. That instinct is wrong. The actual principle is redundancy: convey meaning through more than one channel, so the channel that fails for any given user isn’t the only one. Color stays in the toolkit; it just stops being load-bearing on its own.

Who has color blindness, and what they actually see

Color vision deficiency (CVD) comes from the cone photoreceptors covered in the color theory entry. Healthy human retinas have three cone types (L, M, and S) peaking around 564, 534, and 420 nm respectively. Most CVD is congenital: a missing or shifted cone type encoded on the X chromosome, which is why the male incidence rate is roughly twelve times the female rate (women have two X chromosomes; men have one). The condition is permanent and present from birth.

The three main categories, ordered by prevalence:

• Deuteranomaly / deuteranopia (~6% of men). The M cone is shifted toward L (anomaly) or absent entirely (-opia). Red and green become hard to separate; the opponent red↔green axis collapses. The most common form by far.
• Protanomaly / protanopia(~1% of men). The L cone is shifted or absent. Red↔green collapses similarly to deutan, with the added effect that pure reds darken dramatically. The missing L cone removes much of red’s contribution to perceived brightness.
• Tritanomaly / tritanopia (~0.01% of all people, both sexes). The S cone is shifted or absent. Blue↔green and yellow↔pink pairs become ambiguous. Genuinely rare, often acquired (age-related macular changes, certain medications) rather than congenital.

Achromatopsia (full monochromacy, no chromatic perception at all) exists but is extraordinarily rare (~1 in 30,000). For practical UI work the dominant case is deutan/protan; tritan and achromatopsia are minority cases, but designing for them produces UI that survives every other case automatically, so the cost-benefit of going further is favorable.

The numbers above come from Birch’s 2012 meta-analysis in JOSA A, which compiled red-green CVD prevalence across 139 published surveys. They’re consistent across ethnicities to within a couple of percentage points. The 8% male / 0.5% female figure is the widely-cited shorthand and is accurate to a working tolerance.

What collapses, and why

The dominant red-green confusion happens because the L and M cones overlap heavily in their wavelength sensitivity even in normal vision. They share most of the visible-light range and differ mainly in where their peaks sit. The brain constructs the red↔green opponent channel by differencing their signals. Lose or shift one of the two and the difference collapses. Red and green stop being opposites; they merge into the same perceived hue family, most often a dull olive or muted brown, depending on lightness.

Pairs that collapse for protan and deutan, and that you should therefore never use as the sole signal:

• Red ↔ green. The flagship case. A red error state next to a green success state on a status badge is unreadable for ~7% of male readers.
• Red ↔ brown, green ↔ brown. Brown is dark red or dark green in the deutan/protan world. All three appear as variants of the same muted hue.
• Pink ↔ gray. Pink is desaturated red; with the red signal weakened, low-chroma pinks fold into neutral gray.
• Blue ↔ purple. Purple contains a red component; remove that component and purple shifts toward straight blue. Two visually distinct brand colors can become the same color.
• Teal ↔ gray. Teal’s green component flattens, leaving a slightly tinted but visually muted gray.

For tritanopes the collapse is in the blue/yellow direction: blue↔green and yellow↔pink. Less common in design feedback because tritan is rare, but worth knowing if your palette leans heavily on cyans and yellows together.

One useful instinct: if your two competing signals share a similar lightness and only differ in hue, suspect the pair. Lightness contrast survives every CVD type. What fails is relying on hue distinction at the same lightness.

WCAG 1.4.1: the rule that names this

The Web Content Accessibility Guidelines name the failure mode in Success Criterion 1.4.1: Use of Color (Level A, the practical-floor compliance level): “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.” The rule is older than the modern understanding of CVD; it just operationalizes the redundancy principle into something testable.

The rule’s wording is broad on purpose. It doesn’t say howto add the redundant signal: text labels, icons, shapes, lightness contrast, position, all qualify. It doesn’t require muting your palette. It just requires that the meaning still come across when hue is removed. The common failure isn’t designers ignoring the rule; it’s designers thinking it’s only about errors and forgetting it applies to charts, status badges, category labels, link colors, and form-field validation states.

WCAG 2.1 SC 1.4.11 (Non-text Contrast) is the adjacent rule for graphical elements: interactive controls and meaningful UI parts must hit 3:1 against their adjacent colors. Hitting it usually means working with lightness contrast directly rather than chasing hue distinction, which coincidentally makes a UI more CVD-friendly. The two rules push the same direction.

Designing for redundancy

The single most useful working rule: if you remove all hue and the UI still works, hue wasn’t load-bearing. The grayscale-test instinct from how to pick a palette is the same instinct here, applied to information signaling rather than aesthetic distinction. Drop the entire canvas to grayscale for thirty seconds; if pass/fail, category, or status is still legible, the design is robust.

The tactical moves that produce that result:

• Pair color with shape and text.A green checkmark is more legible than a green dot. A red “✗ Error” with a triangle icon survives every CVD; a red dot alone doesn’t. The textual label is the fallback channel.
• Use lightness contrast as the differentiator.A light-blue and a dark-blue are still visually distinct under any CVD because lightness is preserved. Two equal-lightness hues at different chromas are not.
• Avoid red-green pairs at the same lightness.The most common visual collapse case in the wild. Designers reach for them because they’re intuitive opposites in normal vision; they’re also the most ambiguous pair for the largest CVD population. Use red and green if the design needs them, but at differentiated lightness. A bright red against a dark green will still read as two things across CVD types.
• Keep purple separated from blue. If both appear in the same UI as distinct categories, push the purple noticeably toward magenta (more red component) so the difference survives the protan/deutan collapse.
• Underline or restyle hyperlinks.The default “hyperlinks are blue” convention is the most famous violation of 1.4.1 in the entire web. Underlines carry the meaning where color can’t.

Charts and dashboards: the worst offenders

Data visualization is where color-only signaling causes the most damage and where most teams ship the worst-tested examples. A bar chart with red bars against green bars, sequential heatmaps in pure red-green ramps, scatterplots with categorical color encoding only: all of these collapse for CVD users in different ways.

The chart-specific tactics:

• Use ColorBrewer-style palettes.Cynthia Brewer’s 2003 work on cartographic color schemes produced palettes specifically validated to remain distinguishable across CVD types. Most modern data-viz libraries (Vega, Plotly, D3) ship them as defaults. viridis, magma, cividis are all CVD-friendly diverging or sequential ramps. cividis is specifically optimized to look almost identical to deutan and protan viewers as to normal viewers.
• Add texture or shape patterns for categorical encoding. A bar chart with three categories should differ in pattern (solid / hatched / dotted) as well as hue. Texture is purely accessibility-additive: it costs almost nothing visually and survives every CVD.
• Label data points directly. The most robust chart accessibility move is to put the value or category label next to the data point. The chart no longer depends on color for identification.
• Avoid red-green diverging palettes.Use orange-blue or purple-yellow for diverging scales instead. Both pairs survive deutan/protan. Brewer’s RdYlBu palette is the cartographic canon.

Tools and workflow

The simulation matrices powering the demo above (and most every CVD tool) come from Brettel, Viénot, and Mollon’s 1997 paper in JOSA A on dichromat color simulation, refined by Machado et al. in 2009 to handle anomalous trichromacy more accurately. The math is well-established; what changes is the surface around it.

The working set most designers and front-end engineers should know:

• Chrome and Firefox DevTools.Both have CVD simulation built in. Chrome: open DevTools → Rendering tab → “Emulate vision deficiencies”. Free, fast, live on the page you’re looking at. The single most accessible auditing tool for any designer who already has DevTools open.
• Sim Daltonism(macOS, free). A floating window that simulates CVD on whatever’s underneath it. Good for design tools that don’t have CVD modes built in. Apple silicon native, actively maintained.
• Coblis (web, free). Upload an image and simulate any CVD type. Useful for static asset auditing.
• Stark (Figma plugin, freemium). Inline contrast and CVD checks during design. Worth it if your team works mainly in Figma.

Workflow recommendation: build CVD checks into the same review where you check WCAG contrast, not as a separate accessibility audit at the end. If the contrast is right and the design uses redundant signals from the start, CVD compliance is mostly automatic. The cost of testing late is the cost of redesigning a chart or status pattern after it ships.

The wider frame

Designing for CVD is one of the few accessibility constraints that visibly improves UI for everyone. Redundant signals (color plus shape plus text) survive every other context in which color discrimination is degraded: dim rooms, sun-lit phones, low-contrast e-ink displays, users glancing at a screen for two seconds before looking back at the road. A status indicator that depends on a green dot is harder to read in any of those contexts; one that uses a green ✓ with the word “Pass” works in all of them.

The same logic extends to the rest of the codex. Lightness contrast surviving across CVD is the same property that makes dark-mode blueslegible. Luminance is the perceptual axis the brain uses for fast pattern-matching, and it’s preserved across nearly every degraded viewing situation. Building UI on lightness rather than hue is, beyond CVD, just the more robust choice.