WCAG ratio quick reference
Start with the colors actually rendered in the component. The required ratio depends on the text size, the foreground and background, and the state a visitor sees.
| What to review | WCAG AA | WCAG AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Essential non-text UI or graphical object | 3:1 | — |
Large text has a specific WCAG definition; do not treat merely bold or visually prominent copy as large text without checking the requirement. A contrast ratio is a focused color-pair check, not a complete accessibility audit.
Five-minute component-state review
- Check the foreground and background of the default state.
- Repeat the check for hover, focus, active, disabled, and error states.
- Check text placed on tinted surfaces, gradients, images, and dark-mode backgrounds.
- Confirm that focus indication and error meaning do not rely on color alone.
- Review the final result in the real font, size, opacity, and device context.
What this page is for
Use this as a shareable starting point for a design review, handoff, pull request, or content QA pass. Then test the exact pair in the checker and use the guides below for the relevant edge case.
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.
Authoritative source
For formal interpretation, consult the W3C WCAG contrast minimum guidance and the W3C non-text contrast guidance.