Color Blindness and Design: How to Make Your Site Work for Everyone

The Prevalence of Color Vision Deficiency

Color vision deficiency (CVD) — commonly called color blindness, though the term is a misnomer since most people with CVD can see some colors — is significantly more common than most designers realise:

• Approximately 1 in 12 men (8%) and 1 in 200 women (0.5%) have some form of red-green color vision deficiency
• Approximately 0.005% of the population is completely achromatopic (no color vision at all)
• Blue-yellow color blindness (tritanopia) affects approximately 0.01% of the population
• Globally, an estimated 300 million people have some form of color vision deficiency

The sex-linked prevalence of red-green CVD (X-chromosome linked, affecting far more males than females) means that for a website with a typical visitor demographic, roughly 1 in 12 male visitors has a form of red-green CVD. For a site with 1 million monthly visitors, that is potentially 40,000+ users who may have difficulty with red-green color distinctions.

Types of Color Vision Deficiency

Red-Green Deficiencies (Most Common)

Deuteranopia — missing M-cones (green-sensitive). The most common form, affecting approximately 6% of men. Colors in the green-yellow-red range are confused. Red and green may appear as similar shades of yellowish-brown or olive.

Deuteranomaly — M-cones present but with shifted sensitivity. Milder than deuteranopia. Approximately 5% of men. Green appears shifted toward red; red-green distinctions are reduced but not eliminated.

Protanopia — missing L-cones (red-sensitive). Approximately 2% of men. Red appears very dark or near-black; red and green distinctions are lost. Red items (such as red warning messages) may appear to disappear against dark backgrounds.

Protanomaly — L-cones present with shifted sensitivity. Approximately 1% of men. Red appears shifted toward green; milder than protanopia.

Blue-Yellow Deficiencies (Rare)

Tritanopia — missing S-cones (blue-sensitive). Very rare (less than 1 in 10,000). Blue appears green; yellow appears pink or light grey. Not X-linked; affects men and women equally.

Tritanomaly — S-cones with shifted sensitivity. Also very rare. Blue-yellow distinctions reduced.

Complete Color Blindness

Achromatopsia — all cones absent or non-functional. Very rare. World perceived in shades of grey. Typically accompanied by other visual issues (nystagmus, photophobia, reduced visual acuity). Affects approximately 1 in 30,000 people.

Common Design Mistakes That Affect Color-Blind Users

Red = Error, Green = Success

The most ubiquitous color convention in user interfaces — red for error, green for success — is precisely the distinction lost in the most common forms of CVD. A form validation interface that uses only color to indicate valid and invalid fields (green border = valid, red border = invalid) is unusable for users with deuteranopia or protanopia.

The fix: Never rely on color alone to convey information (WCAG 1.4.1). Use color plus another indicator: an icon (X for error, checkmark for success), a label ("Error: required field"), a change in border thickness, or a text description of the validation state.

Red Text on Green Backgrounds (and Vice Versa)

Red text on a green background — or any combination of red and green that relies on hue distinction rather than luminance contrast — is illegible to people with deuteranopia or protanopia. Even if the contrast ratio passes WCAG (because luminance contrast is sufficient), the design may still cause confusion because the hue distinction disappears.

Heatmaps and Data Visualization

The classic "traffic light" data visualization — green (good), yellow (warning), red (bad) — loses its meaning for red-green CVD users. Heatmaps using red-to-green gradients are similarly problematic.

The fix: Use colorblind-friendly palettes. The Blue-to-Orange diverging palette is widely used in data visualization because it maintains contrast for all major forms of CVD. ColorBrewer (colorbrewer2.org) provides ready-made palettes with colorblind-safe options.

Green Links or Buttons

Green calls-to-action against a red background (or the reverse) can be completely invisible to protanopes. Green text on a white background has acceptable contrast for sighted users but may appear as a lighter shade for some CVD users, reducing distinctiveness.

Design Practices for Color Accessibility

Use Luminance Contrast, Not Hue Contrast

The most reliable accessible color practice is to ensure that adjacent UI elements have sufficient luminance contrast — this is what the WCAG contrast ratio measures. Luminance contrast is preserved across all common forms of CVD, while hue contrast is not. Design around luminance first; use hue as an additional dimension, not the only dimension.

Always Pair Color with Another Indicator

The WCAG Success Criterion 1.4.1 (Use of Color) requires that color is not the only visual means of conveying information. In practice:

• Error messages: color + icon + text
• Charts: color + pattern fill or direct label
• Maps: color + pattern or annotation
• Form states: color + border weight + label
• Navigation active state: color + underline or bold weight

Test with Color Blindness Simulators

Several tools allow designers to preview how their work appears under different forms of CVD:

• Stark — Figma and Sketch plugin with multiple CVD simulation modes
• Coblis — web-based image simulator (coblis.xyz)
• Chrome DevTools — Vision Deficiency emulation in the Rendering panel
• macOS Accessibility — Display Accommodations filters for colour blindness simulation

Choose Colorblind-Safe Palettes

Several color palette resources are designed with CVD in mind:

• ColorBrewer (colorbrewer2.org) — cartographic palettes with colorblind-safe filter
• IBM Design Language color palette — includes accessible combinations
• Paul Tol's color schemes — academically published palettes designed for colorblind accessibility

Check color contrast →