WCAG 1.4.6 — Contrast (Enhanced)
At Level AAA, the contrast bar nearly doubles. Body text needs 7:1 against its background. The "Lorem Ipsum on light grey" pattern that just clears AA at 4.5:1 doesn't survive here.
What this requires
Text and images of text must have a contrast ratio of at least 7:1 against their background. The threshold for large text (18pt or 14pt bold, roughly 24px / 19px bold) drops to 4.5:1. Incidental text, inactive UI components, decoration, and logotypes are exempt.
The 7:1 target is calibrated against the needs of users with moderately severe vision loss (roughly 20/80) — a population large enough that the AAA target is the right default for content-heavy sites, even when only AA compliance is claimed.
How AI coding tools fail this
When asked for "muted secondary text" or "subtle helper copy", AI tools reach for greys that often satisfy 4.5:1 against white but fail 7:1. The most common default — light-grey body text on white — clears AA and breaks AAA.
The second pattern: brand colours used unchecked. A brand palette
that defines an accent like #3b82f6 (Tailwind blue-500) works fine
as a button background with white text, but when the same colour is
used as inline link text against a white background it lands at 4.6:1
— a hair over AA and well under AAA.
The third: text on top of imagery and gradients. AI tools usually ship the image without a contrast guard (a darkening overlay, a shifted gradient stop) and let the text fend for itself. Sometimes it works; often the ratio dips below 7:1 in the centre of the image.
Edge cases
- Large text (≥18pt or ≥14pt bold) needs only 4.5:1 at AAA.
- Disabled controls are exempt. They are "inactive UI components" by the criterion's wording. Don't manufacture extra contrast for them.
- Logotypes are exempt.
- Decorative text (a watermark, a stylised background quote) is exempt as long as it carries no meaning.
- Text over images must clear the ratio at every point the text overlaps the image. A gradient overlay or a flat background behind the text is the safest pattern.
- Tools like the Stark Figma plugin or the Polypane browser check both AA and AAA. Build the check into the design tool, not the QA queue.
How Jeikin handles this
axe-core checks contrast against AA by default. For projects targeting AAA, Jeikin's design-rule layer runs the same check at the 7:1 / 4.5:1 thresholds and flags every text/background pair that falls short. The dashboard maps each finding to the component and the token responsible, so the fix lands in the design system rather than the markup.