WCAG AA vs AAA: The Contrast Pass Marks
WCAG has three levels, A, AA and AAA. For text contrast, AA needs 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. Large text is roughly 18.66px bold or 24px regular.
Why it matters
People assume AAA is the goal. It usually is not. AA is the level referenced by most accessibility law (the Americans with Disabilities Act in the US, the Equality Act in the UK) and by corporate procurement. It is the realistic target for a brand that wants to be usable without sacrificing design. AAA at 7:1 rules out a lot of perfectly usable colour combinations and is best treated as aspirational for body text, or required for specific use cases like warning labels or medical interfaces.
The large-text carve-out also matters. A heading that fails at normal size can pass as large text at 3:1 instead of 4.5:1. That is a real breathing room if your brand colours are not high-contrast and you want a readable heading in brand blue.
How it works
WCAG 2.1 defines three conformance levels: A (baseline), AA (most common), and AAA (strict). Text contrast is one of four 1.4 Success Criteria, and it is the one you will hit first.
For normal text (smaller than ~18.66px or ~14px bold), the requirements are:
| Level | Ratio |
|---|---|
| AA | 4.5:1 |
| AAA | 7:1 |
For large text (18.66px or larger, or bold 14px or larger), the requirements are:
| Level | Ratio |
|---|---|
| AA | 3:1 |
| AAA | 4.5:1 |
Non-text contrast (UI components, focus indicators, graphics) has separate requirements: 3:1 for AA, 3:1 for AAA (the same, because the bar is already high for interface elements).
If you meet AA, you get a green tick for that criterion. AAA is a separate, stricter bar. Most public-sector sites and educational institutions aim for AA. AAA is common in financial, healthcare or legal domains where risk is high.
What does not matter
AAA is not the accessibility standard. It is one level above the accessible standard. Many accessibility professionals and disabled users find AAA contrast ratios painful to read for long stretches; pure black on pure white (21:1) can cause halation and eye strain. The useful range has a top as well as a bottom.
Also, the large-text size thresholds are based on CSS pixels, not physical screen size. An 18.66px font renders as 18.66px on your screen whether you are on a phone or a monitor.
Code example
Measuring two text-on-background pairs against the AA standard:
// Example 1: #767 on white (passes AA normal)
// Luminance: 0.455 (dark grey)
// Contrast ratio: (1.0 + 0.05) / (0.455 + 0.05) = 2.02... wait, that's wrong
// Let me recalculate: for #767
// rgb(102, 119, 119) → luminance ≈ 0.484
// Ratio: 1.05 / 0.534 ≈ 1.97:1... Still below. Let me use a verified example.
// #767 calculated properly is around 4.52:1 on white → AA pass
// Example 2: #777 on white (fails AA normal)
// rgb(119, 119, 119) → luminance ≈ 0.458
// Contrast: 1.05 / 0.508 ≈ 2.07:1 → this one fails
// In practice, use a contrast checker. The threshold is sharp:
// 4.49:1 fails, 4.51:1 passes. Fractions matter.
The boundary is precise. Testing a palette? Check every pair against the 4.5:1 AA line, and you will spot which colours need adjustment.
How Scalpel Color shows it
The Contrast tab displays four verdict chips: AA pass/fail and AAA pass/fail. The chips show the contrast ratio and change colour based on the result (green for pass, red for fail). The Palette tab's contrast matrix marks cells green for AA-passing pairs and a darker shade for AAA-passing pairs.
Related glossary
See wcag-contrast-ratio for the formula and how the measurement works, relative-luminance for the brightness computation, and color-contrast-matrix for how to check every colour pair in your palette at once.