How-to · Accessibility
WCAG AA vs AAA contrast: the ratios your colors actually need
The short answer
AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text; AAA raises that to 7:1 and 4.5:1. Most products and regulations target AA. Contrast Checker grades any pair against both levels at once, locally in Chrome.
- 1
Decide the level you need: AA for most products and every major regulation, AAA for reading-heavy or low-vision-focused interfaces.
- 2
Open the Contrast Checker popup and enter or sample your text and background colors.
- 3
Read the verdicts: normal text needs 4.5:1 (AA) or 7:1 (AAA); large text needs 3:1 or 4.5:1.
- 4
Check input borders, icons and focus states against the 3:1 non-text rule — it's AA-only.
- 5
Scan the full page from the side panel to catch combinations you didn't think to test.
WCAG defines two conformance levels for color contrast, and the difference is just numbers: AA asks for 4.5:1 on normal text, AAA asks for 7:1. Here is exactly what each level requires, where the "large text" boundary sits, and how to test your own colors against both at the same time.
What AA requires
Level AA (success criterion 1.4.3) requires a contrast ratio of at least 4.5:1 between text and its background. Large text only needs 3:1. AA also covers more than text: criterion 1.4.11 requires 3:1 for the parts of UI components you need to perceive — input borders, focus indicators, icons that carry meaning.
What AAA requires
Level AAA (1.4.6) raises the text thresholds to 7:1 for normal text and 4.5:1 for large text. There is no AAA criterion for non-text contrast — controls and icons are only ever held to the 3:1 AA rule. AAA is genuinely hard to sustain across a full interface: 7:1 rules out most mid-tone brand palettes for body text, which is why the W3C itself says AAA conformance for entire sites is often not achievable.
Where "large text" starts
Large text means at least 18pt (24px) at regular weight, or 14pt (about 18.7px) at bold. A 24px heading passes AA at 3:1; the 16px paragraph under it needs 4.5:1. The same gray can legitimately pass on one line and fail on the next — that's the rule working as designed, not an inconsistency.
Which level should you target?
Target AA unless you have a specific mandate. The regulations that make accessibility enforceable — EN 301 549 in the EU, Section 508 in the US, most procurement rules — reference WCAG Level AA, not AAA. AAA is worth the constraint for reading-heavy interfaces or products aimed at low-vision users; treat it there as a design goal for body text rather than a blanket requirement for every label and button.
Test a pair against both levels at once
Contrast Checker shows the ratio for any two colors and grades it against AA and AAA, for normal and large text, in one view — pick the colors in the popup or sample them from the live page. To find problems instead of confirming them, open the side panel and scan the whole page.
Everything is computed locally, the extension only reads a tab when you invoke it there (activeTab), and backgrounds it can't resolve — gradients, photos, blended layers — are reported as unmeasurable rather than given a fake ratio.