Contrast, and what to do about it
Your pair
Text colour
Background
Body text at this size
And the smaller size most interfaces actually use for paragraphs.
WCAG 2.1 contrast ratio
5.47:1
Passes AA for body text
The normative measure. It does not know which of the two is the text.
- ✓AA · body text 4.5:1
- ✓AA · large text 3:1
- ✕AAA · body text 7:1
- ✓Icons and borders 3:1
APCA lightness contrast
Lc 77.3
Clears Lc 75 — body text at a normal size and weight.
Positive: dark text on a lighter background.
And to someone who does not see all three cones
Contrast is a brightness question, so it survives colour vision deficiency — but two colours that differ only in hue do not. All three simulations.
What the thresholds are, and where they come from
4.5:1 — AA, body text
The level almost every accessibility requirement points at. Applies to text under 24px, or under 18.66px when bold.
3:1 — AA, large text
24px and up, or 18.66px bold and up. The same 3:1 covers icons, form borders and anything non-text that carries meaning.
7:1 — AAA
Stricter. Worth aiming at for long-form reading; hard to hit with a saturated brand colour.
Why black on white is 21:1 and not infinity
The formula adds 0.05 to both luminances, modelling light bouncing off a real screen. It is the one number in this tool anyone can check by hand.
APCA, the perceptual contrast model being drafted to replace this one, is deliberately not here yet. Its constants are versioned, and a wrong one produces something that looks like a contrast score and is not. Why we would rather print nothing.