Accessible Color: Contrast Ratios and Color Blindness, Explained

Accessible color comes down to two questions: can people read it, and does it still make sense without color? The first is contrast — WCAG Level AA needs a ratio of 4.5:1 for normal text and 3:1 for large text. The second is color blindness — about 1 in 12 men can’t reliably tell certain colors apart, so color must never be the only signal.

The two pillars

Pillar 1 — contrast

Contrast is a ratio between the relative luminance of the text and its background, from 1:1 (identical, invisible) to 21:1 (black on white). WCAG 2 sets the thresholds:

Level	Normal text	Large text (≥18.66px bold / ≥24px)
AA	4.5:1	3:1
AAA	7:1	4.5:1

AA is the level referenced by most accessibility law (the European Accessibility Act, the ADA, Section 508). Check any pair with the contrast checker; check a whole palette at once with the contrast grid.

Fixing a color that fails

The trick is to change only lightness and keep the hue, so the color still reads as “the same color”, just legible. Darken text on a light background (or lighten it on a dark one) until the ratio crosses your target. The accessible-color generator does this search for you — enter the foreground, background and target, and it returns the nearest passing color, lighter and darker.

Pillar 2 — color blindness

Contrast fixes legibility, but a perfectly high-contrast red and green can still be indistinguishable to a color-blind user. Color-vision deficiency affects about 8% of men (and far fewer women), in three main forms:

• Deuteranopia — green-weak, the most common. Reds, greens, browns and oranges blur together.
• Protanopia — red-weak. Similar red-green confusion, and reds appear darker, so red-on-dark text can nearly vanish.
• Tritanopia — blue-weak, rare. Blues and greens, and yellows and pinks, become hard to separate.

The way to catch problems is to simulate your interface under each type and look for two colors that collapse into the same appearance. The color blindness simulator does this for an uploaded screenshot or a pasted palette (the design-system case), entirely on your device.

The one rule

Never rely on color alone to convey information.

If red means “error” and green means “ok”, add a symbol (✕ / ✓), a label, or a shape. Charts should use patterns or direct labels, not just a color legend. Do that, and the design works for everyone — color-blind or not, on a cheap display or in bright sunlight.

WCAG 2 vs APCA

You may see a newer method called APCA (Accessible Perceptual Contrast Algorithm), proposed for the draft WCAG 3. Instead of a ratio it reports a lightness-contrast value (Lc) and accounts for polarity and font size — often a more realistic readability signal. It is worth checking with the APCA contrast checker, but WCAG 2 remains the standard referenced by law today, so use it for compliance and treat APCA as a forward-looking second opinion.

Quick summary

Accessible color needs enough contrast — WCAG AA is 4.5:1 for text, 3:1 for large text — and must not depend on color alone, because roughly 1 in 12 men have color-vision deficiency (most often green-weak deuteranopia). Fix failing colors by adjusting lightness while keeping the hue, simulate your palette under each deficiency, and always add a non-color cue. Start with the accessible-color generator and the color blindness simulator.

Sources: WCAG 2.2 (W3C) success criteria 1.4.3 and 1.4.11; Machado, Oliveira & Fernandes (2009) CVD model; APCA / WCAG 3 working draft. Educational information — not a formal accessibility audit.