WCAG AAA — Glossary

WCAG AAA is the highest of three conformance levels in the Web Content Accessibility Guidelines, which the W3C publishes. WCAG stands for Web Content Accessibility Guidelines. For color, AAA means a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text, set by success criterion 1.4.6 Contrast (Enhanced).

How it works

A page meets Level AAA when it satisfies every Level A, AA and AAA success criterion, or when a conforming AAA alternate version is provided. The W3C adds a caution to the conformance section: it is not recommended to require AAA as a general policy for entire sites, because some content cannot satisfy every AAA criterion. In practice teams apply AAA criteria selectively, for example to body text or to a high-contrast theme.

The contrast ratio uses the same formula as AA, (L1 + 0.05) / (L2 + 0.05) on relative luminance, with a maximum of 21:1. Only the thresholds move.

1.4.6 Contrast (Enhanced): 7:1 for text and images of text, 4.5:1 for large-scale text. Inactive components, pure decoration and logotypes have no requirement.
2.5.5 Target Size (Enhanced): pointer targets at least 44 by 44 CSS pixels, with exceptions for an equivalent control, inline links, user agent controls and essential presentation.

Large-scale text is at least 18 point or 14 point bold, the same as at AA. Because 4.5:1 is the AAA large-text bar, any text that passes AA at normal size is only halfway to AAA.

const lin = v => { v /= 255; return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4; };
const lum = h => { const n = parseInt(h.slice(1), 16);
  return 0.2126 * lin(n >> 16 & 255) + 0.7152 * lin(n >> 8 & 255) + 0.0722 * lin(n & 255); };
const ratio = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p); return (x + 0.05) / (y + 0.05); };
for (const fg of ['#767676', '#1d4ed8', '#595959']) {
  const r = ratio(fg, '#ffffff');
  console.log(fg, 'on white', r.toFixed(2) + ':1', 'AA text', r >= 4.5 ? 'pass' : 'fail', 'AAA text', r >= 7 ? 'pass' : 'fail', 'AAA large', r >= 4.5 ? 'pass' : 'fail');
}

#767676 on white 4.54:1 AA text pass AAA text fail AAA large pass
#1d4ed8 on white 6.70:1 AA text pass AAA text fail AAA large pass
#595959 on white 7.00:1 AA text pass AAA text pass AAA large pass

What is the WCAG AAA contrast ratio?

The AAA contrast ratio is 7:1 for normal text and 4.5:1 for large text. #595959 on white computes to 7.0047:1, which makes it the lightest neutral gray that passes. As with AA, the W3C says computed values must not be rounded, so 6.999:1 fails.

Do you need AAA for legal compliance?

Usually not. The W3C advises against requiring AAA site-wide, and most accessibility rules reference Level AA, so check the specific regulation you are bound by. Treat AAA contrast as an option for reading-heavy pages or users who need stronger contrast.

Common pitfalls

Treating 6.7:1 as close enough: #1d4ed8 on white computes to 6.70:1 and fails 1.4.6. The threshold is exact.
Claiming AAA for a whole site: the criteria include items some content cannot meet, so claim AAA only for pages you have checked fully.
Assuming large text relaxes everything: large text drops the bar to 4.5:1, which is still stricter than the 3:1 AA allows.
Ignoring target size: the 44 by 44 pixel rule in 2.5.5 is AAA, while the 2.2 AA rule is only 24 by 24.
Applying the ratio to logos: logotypes are exempt, so do not recolor a brand mark to chase 7:1.

Related terms

WCAG AA — the level most rules require, with 4.5:1 text contrast
Color blindness — a common reason stronger contrast helps
RGB — the channel values the luminance formula reads
Hex color — the notation most contrast checks start from
sRGB — the color space the formula assumes