WCAG Color Contrast Cheat Sheet
WCAG measures contrast as a ratio between text and background luminance, from 1:1 (no contrast) to 21:1 (black on white). Higher = more readable.
Contrast minimums
AA, normal text | 4.5:1 minimum |
AA, large text | 3:1 minimum |
AA. UI components & graphical objects | 3:1 minimum |
AAA, normal text | 7:1 minimum (strict) |
AAA, large text | 4.5:1 minimum |
What counts as 'large text'
≥ 24px regular weight | Counts as large. |
≥ 18.66px (14pt) bold | Counts as large. |
Anything smaller | Treated as normal text, needs the higher ratio. |
What WCAG does NOT require contrast for
Decorative text | Logos, brand names in marketing, exempt. |
Disabled UI controls | Exempt, but still aim high for usability. |
Incidental text | Text inside an image used decoratively. |
Quick mental checks
Pure black on pure white | 21:1, maximum possible. |
#777 on white | ~4.5:1, passes AA for normal text by a hair. |
#999 on white | ~2.8:1, fails AA for any size. |
White on a brand color | Almost always needs a darker brand value than designers expect. |