Charts · 14
Contrast, two ways that disagree
WCAG 2 contrast is a ratio of two luminances, and it has three problems a designer meets weekly: it is symmetric, so white on orange scores the same as orange on white; it over-rewards mid greys on black; and it fails colours that read perfectly well as headings. APCA, the candidate method for WCAG 3, is perceptual, cares which colour is the text, and gives a size and weight rather than a pass. Pick a pair and read both numbers next to the actual text.
Body text at 16px regular. The quick brown fox jumps over the lazy dog, and the contrast is what lets you read it without effort.
Caption at 12px, where every method gets strict.
Heading at 28px bold
WCAG 2.x ratio
4.54:1
AA
(L1 + 0.05) / (L2 + 0.05). Symmetric: swapping text and background gives the same number. AA needs 4.5:1 for body, 3:1 for large text; AAA 7:1.
APCA Lc
72 Lc
large or bold · min body size 18px
Perceptual, polarity-aware: swapped, this pair scores 77 Lc. Negative means light text on dark. Body text wants 75+, 90 preferred; 60 for large or bold; 45 for headings.
The famous edge case: exactly 4.54:1, the minimum grey WCAG 2 allows for body text.
Where they disagree: grey text across the whole range
Grey text on white
Top: WCAG ratio (bold when ≥ 4.5). Bottom: APCA Lc (bold when ≥ 75). Read where the two thresholds fall.
Grey text on black
Top: WCAG ratio (bold when ≥ 4.5). Bottom: APCA Lc (bold when ≥ 75). Read where the two thresholds fall.