Accessibility
How to Check Text Color Contrast for WCAG
Measure foreground and background contrast, understand AA and AAA thresholds, and fix failing text without guessing.
Published Β·Updated
Readable contrast depends on a foreground/background pair, not on either color alone. WCAG contrast compares their relative luminance and reports a ratio from 1:1 to 21:1.
Know the thresholds
- WCAG AA: 4.5:1 for normal text and 3:1 for large text.
- WCAG AAA: 7:1 for normal text and 4.5:1 for large text.
- Large text means at least 24px regular, or about 18.66px when bold.
Paste the actual pair into the color contrast checker. Test every meaningful state: default, hover, disabled, selected, visited and focus. Transparent colors must be composited over the final background before measuring.
Fix a failing pair
Start by changing lightness while preserving the intended hue. Darken foreground text on a light surface, or lighten it on a dark surface. The checker can suggest a nearby AA foreground, but a designer should still confirm hierarchy and brand fit.
Pure black on white reaches the maximum ratio, yet maximum contrast is not mandatory for every paragraph. Near-black text can be comfortable while easily passing AA.
Do not use contrast as the only accessibility check. Links need a non-color cue, focus indicators must be visible, and status should include text or icons. Zoom and mobile testing also reveal layout failures that a numerical ratio cannot.
Apply these measurements when setting HTML and CSS text colors.