WCAG contrast guide: AA and AAA rules for UI design
A practical accessibility guide for checking body text, component states, and contrast mistakes before launch.
Quick answer
For most UI work, the number to remember is 4.5:1 for normal text. Large text and UI components can often pass at 3:1, but body copy, captions, and links are where teams usually fail.
WCAG contrast thresholds
| Level | Normal text | Large text | UI components and graphics |
|---|---|---|---|
| AA | 4.5:1 | 3:1 | 3:1 |
| AAA | 7:1 | 4.5:1 | No separate AAA target |
What counts as large text
WCAG gives large text a lower threshold because larger letterforms are easier to read.
- 18pt and up qualifies as large text.
- 14pt bold and up also qualifies.
- Everything else should be treated like normal text and checked against 4.5:1.
If you are unsure, assume the text is normal size and hold it to the stricter target.
Where teams usually miss contrast
- Muted paragraph text on soft gray or tinted surfaces.
- Placeholder text that looks elegant in mockups but disappears in production.
- Secondary buttons, tabs, and disabled states.
- Links that rely on color alone and lose clarity on hover or visited states.
A fast review checklist
- Check body text first. It is the most common failure point.
- Review interactive states, not just default states.
- Test both light and dark surfaces if your product supports themes.
- Confirm that icons and focus indicators still separate clearly from the background.
Contrast is not the whole accessibility story
Passing contrast does not automatically make a UI accessible. You still need:
- Clear labels
- Visible focus states
- Sufficient hit targets
- Meaning that does not rely on color alone
Contrast is the foundation, not the finish line.
A practical HexTools workflow
Run candidate pairs through the Contrast Checker first, then move approved values into the CSS Variables Generator or the Tailwind Color Export so the pass/fail decision survives implementation.