WCAG 2.2 Thresholds
WCAG (Web Content Accessibility Guidelines) 2.2 defines minimum contrast ratio requirements for text and user interface components. Vesper Colors tests your pair against all four relevant thresholds and shows a clear pass or fail for each.
The four thresholds
| Check | Minimum ratio | Applies to |
|---|---|---|
| AA Normal | 4.5:1 | Body text and UI copy at normal size |
| AAA Normal | 7:1 | Body text at the enhanced level |
| AA Large | 3:1 | Large text, UI components, and graphical elements |
| AAA Large | 4.5:1 | Large text at the enhanced level |
What counts as large text
WCAG defines large text as:
- 18pt (24px) or larger in regular weight
- 14pt (approximately 18.67px) or larger in bold weight
Anything below these sizes is classified as normal text. Most body copy, labels, form fields, and navigation items fall into the normal text category and require the higher 4.5:1 (AA) or 7:1 (AAA) ratio.
AA vs AAA
WCAG 2.2 has two conformance levels for contrast: AA and AAA.
AA is the legally required standard in most jurisdictions, including the ADA in the United States, EN 301 549 in the European Union, and equivalent standards in many other countries. Meeting AA is the baseline for accessible design.
AAA is the enhanced standard. It requires higher contrast and is recommended for body copy and primary reading content where the best possible readability is the goal. It is not always achievable across all design scenarios, but should be targeted where possible.
UI components and the 3:1 rule
The AA Large threshold of 3:1 also applies to non-text UI components: button borders, form field borders, focus indicators, icons that convey meaning, and other graphical elements. This is often referred to as WCAG 1.4.11 (Non-text Contrast).
When checking a color pair for use in UI chrome (borders, icons, interactive controls), the relevant pass/fail is AA Large.
How contrast ratio is calculated
The contrast ratio is calculated from the relative luminance of the two colors using the WCAG formula:
Contrast ratio = (L1 + 0.05) / (L2 + 0.05)Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is a measure of perceived brightness, not just the RGB value, and accounts for the non-linear way human vision perceives light.
The maximum possible contrast ratio is 21:1 (black on white). The minimum is 1:1 (identical colors).
What WCAG does not cover
WCAG contrast requirements do not apply to:
- Decorative text or images that convey no information
- Text that is part of a logo or brand name
- Text in images that is purely decorative
- Disabled UI components (greyed-out states)
For everything else that a user needs to read or interact with, the thresholds above apply.