Start with the exact component
Contrast requirements depend on the actual foreground, background, text size, and interface state. Check the live color pair first, then use the relevant guide to understand the threshold and edge cases.
Core WCAG thresholds
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
These figures are useful starting points, but accessibility also requires clear labels, visible focus, readable typography, and testing in context.
Tools and guides
WCAG Contrast Checker
Check a foreground and background pair against AA and AAA thresholds.
WCAG Contrast Ratio Guide
Understand normal text, large text, AA, and AAA thresholds.
WCAG AA vs AAA
Choose a practical contrast target for a product.
4.5:1 Contrast Ratio
The AA baseline for normal text.
7:1 Contrast Ratio
The AAA target for normal text.
Button Contrast Checklist
Review labels, boundaries, focus, and states.
Dark Mode Contrast Checklist
Review dark-theme text, surfaces, and states.
Color Contrast Accessibility Checklist
Use a final pre-release contrast review.
Source
For formal interpretation, consult the W3C WCAG contrast minimum guidance.