How to Check Text Color Contrast for WCAG

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.

For product UI, build a small contrast checklist: body text, muted text, links, button labels, icon-only buttons, form borders, focus rings, selected states and dark mode variants. These are the places where “looks fine” often hides a failing ratio.

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.

If a brand color fails, do not abandon the hue immediately. First try a darker or lighter shade, then test whether a nearby accessible color keeps the intended identity.

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.