Accessibility · 9 tools

Color Accessibility Tools

Contrast is measurable. So is what happens to your palette under color vision deficiency. Measure both before you ship.

Color accessibility comes down to one question asked repeatedly: can someone who is not you, on hardware that is not yours, in lighting you have never seen, read this? Designers are the worst available judges of their own interfaces, because they already know what the text says. The measurements exist to replace that broken instrument.

WCAG 2.2 answers it with a contrast ratio computed from relative luminance — a weighted sum of the linearised channels where green carries 72% and blue only 7%. The thresholds are 4.5:1 for body text, 3:1 for large text and for non-text elements that convey boundary or state. They are floors, not goals: text at exactly 4.5:1 is legible in good conditions and tiring across a long article.

The ratio's blind spots are real. It ignores font weight almost entirely, and it treats light-on-dark and dark-on-light as equivalent when the eye does not. APCA, drafted for WCAG 3, models both and reports a signed lightness contrast instead of a symmetric ratio. Run both: WCAG is what an audit will cite, APCA is what will explain why a technically-passing pair still looks thin.

Separately from contrast, roughly one in twelve men has some form of color vision deficiency — usually a shifted rather than absent cone response, collapsing part of the color space onto itself. The practical rule that follows is narrow: hue must never be the only thing carrying meaning. Lightness survives every form of CVD intact.

All 9 accessibility tools

Further reading

Frequently asked questions

What contrast ratio do I need to pass WCAG?

For AA, 4.5:1 for normal body text, 3:1 for large text (18pt, or 14pt bold and above) and 3:1 for user interface components and graphical objects. For AAA, 7:1 and 4.5:1 respectively. These are minimums for conformance, not targets for comfort — extended reading is easier somewhere above 7:1.

What is the difference between WCAG contrast and APCA?

WCAG 2.2 reports a symmetric ratio from 1:1 to 21:1 derived from relative luminance. APCA reports a signed lightness contrast that accounts for polarity — light text on dark needs more separation than the reverse to look equally solid — and weights font size and weight. WCAG is the conformance standard today; APCA is the better predictor of how a pair will actually look.

Can I use red and green together in an interface?

Yes, provided hue is not the only difference between them. Red-green deficiency is the common form, and a red error state and a green success state that differ only in hue can be nearly identical to a deuteranope. Separate them in lightness as well, and pair each with an icon or a label. The fix is redundancy, not avoidance.

How do I simulate color blindness on my design?

Transform the colors through LMS cone space and attenuate or remove the affected cone response, rather than rotating hue with a filter. The simulators here do the former, which is why what you see approximates the actual perceptual collapse instead of merely looking wrong in an unrelated way.

Other categories