Text does not meet enhanced AAA contrast requirements

What is this issue?

The contrast ratio between a block of normal-size text and its background is below 7:1, the Level AAA threshold defined by WCAG 1.4.6. Large text (18.66px bold or 24px regular and up) has a lower AAA threshold of 4.5:1, matching the same “bigger glyphs stay legible at lower contrast” logic used at AA.

This is a distinct, stricter check from Text does not have enough colour contrast, which measures the same underlying contrast ratio (a number from 1:1 to 21:1 describing how much brighter one color is than another) but fails at the lower 4.5:1 AA bar. A page can pass the AA check and still fail this one.

Why does this matter?

AAA contrast exists for readers whose vision needs more than the AA baseline provides: significant low vision, some forms of color blindness combined with reduced acuity, or age-related vision loss beyond what 4.5:1 comfortably serves. For this group, text sitting at 5:1 or 6:1 is measurably easier to read than text at the AA floor, but still requires more visual effort than text at 7:1 or above.

WCAG itself does not recommend AAA conformance as a blanket site-wide policy, because some content genuinely can’t reach it without breaking a brand palette or a data visualization’s color coding. That makes this check a targeted improvement, not a compliance gate: worth applying deliberately to primary reading content, and less useful forced onto every decorative or secondary element on a page.

Who is affected?

• Low vision users: readers with more significant vision loss than the AA baseline anticipates need the strongest practical brightness difference between text and background to distinguish letterforms reliably, especially in body copy meant for sustained reading.

What users experience

Harold has age-related macular degeneration and reads news articles using his browser’s built-in reader mode whenever a site supports it. On a site that doesn’t, an article’s body text sits at 5.2:1 against its background, comfortably above the 4.5:1 AA minimum but still faint enough that he has to lean toward the screen and re-read several sentences to keep his place. He gives up partway through a long article and searches for the same story on a different outlet whose text renders darker by default.

How do I fix it?

Darken the text color, lighten the background, or both, until a contrast checker confirms the ratio meets 7:1 for normal text or 4.5:1 for large text. The mechanism is identical to the AA check, since contrast ratio is purely a function of the two colors’ luminance; the only difference is the higher bar you’re measuring against.

Treat this as a deliberate, scoped upgrade rather than a site-wide rewrite: apply the AAA target first to primary reading content (article bodies, form instructions, anything meant for sustained reading) where the benefit to low-vision readers is highest. Decorative text, secondary metadata, and brand-driven UI chrome are reasonable places to stay at the AA baseline if reaching 7:1 would mean abandoning a brand color entirely.

Code Examples

/* Ratio: ~4.8:1 - passes AA, fails the 7:1 AAA minimum */
.article-body {
  color: #6b6b6b;
  background: #ffffff;
}

/* Ratio: ~9.3:1 - passes both AA and AAA */
.article-body {
  color: #3d3d3d;
  background: #ffffff;
}

Both versions read as reasonable body-text grey to someone with typical vision. #6b6b6b clears the 4.5:1 AA minimum comfortably but stalls out around 4.8:1, well short of AAA. #3d3d3d pushes past 9:1, noticeably closer to black on screen but still not pure #000000, which is the kind of adjustment that satisfies AAA without reading as jarring.

Common Mistakes

Mistake: “We already pass AA, so we’re basically fine for AAA too.” A ratio just above the 4.5:1 AA floor, such as 4.8:1 or 5:1, is still far short of 7:1. Passing AA tells you nothing about how close a color pair is to AAA; check the actual ratio rather than assuming.

Mistake: “Every page on the site needs to hit 7:1 or we’ve failed.” WCAG explicitly advises against AAA as a blanket conformance target, since some content, such as data visualizations with fixed color coding or brand-driven marketing pages, can’t realistically hit 7:1 everywhere. Apply AAA deliberately to primary reading content instead of treating it as an all-or-nothing site-wide requirement.

Mistake: “AAA and AA use the same threshold, just for different text sizes.” Both levels split thresholds by text size, but the values themselves differ: AA is 4.5:1 normal / 3:1 large, AAA is 7:1 normal / 4.5:1 large. AAA’s large-text threshold, 4.5:1, happens to equal AA’s normal-text threshold, a coincidence worth double-checking rather than assuming a shortcut.

How RedFlag Detects This

Automated: axe-core rule, runs on every scan. RedFlag calls axe-core’s color-contrast-enhanced rule as part of every scan. It runs the identical luminance-and-ratio calculation as the standard color-contrast rule, computing relative luminance from resolved foreground and background colors and checking font size and weight to determine whether text qualifies as “large,” then compares the result against the 7:1 or 4.5:1 AAA threshold instead of the AA one.

False negative: the same background-resolution limits apply as the AA check: text sitting on a gradient, a background image, or stacked semi-transparent layers can’t have its true background color computed reliably, so those cases surface as discarded “incomplete” results rather than flagged violations. False positive: rare, but possible when the true rendered background comes from a layer, such as a ::before pseudo-element tint, that the computed-style lookup doesn’t account for. Manual step: manually verify contrast for any AAA-target text sitting over an image, gradient, or layered background, the same class of case the automated AA check also can’t evaluate.

Manual Testing

1. Open the page in Chrome or Firefox and open DevTools’ Elements panel.
2. Click the color swatch next to a text element’s color value; DevTools shows the computed contrast ratio against its background.
3. Confirm the ratio meets 7:1 for normal text or 4.5:1 for large text (18.66px bold / 24px regular and up); DevTools’ color picker shows both AA and AAA pass/fail indicators side by side.
4. For text over an image or gradient, sample the darkest and lightest points behind the text with the WebAIM contrast checker’s eyedropper, since DevTools can’t resolve a non-solid background automatically.

Related WCAG Success Criteria

1.4.6 Contrast (Enhanced): Text and images of text must have a contrast ratio of at least 7:1 against their background, or 4.5:1 for large text, at Level AAA. This rule is a direct, mechanical check of that stricter ratio.

1.4.3 Contrast (Minimum): The Level AA sibling requiring only 4.5:1 (3:1 for large text). Every page failing this rule’s 7:1 AAA check should also be checked against 1.4.3, since a page can pass one and fail the other independently.

Related Issues

Text does not have enough colour contrast is this rule’s AA-level parent: the same measurement, the lower bar most organizations actually target, and the check worth fixing first if a page fails both.

UI component has insufficient contrast covers the same brightness-difference concept applied to borders, icons, and other non-text interface elements, which this text-only rule doesn’t evaluate.

Text contrast fails after a hover, focus, or state change covers contrast failures this static, scan-time check can’t catch: a color pair that passes AAA at rest but drops below even the AA minimum on hover.

Link is not distinguishable from surrounding text is the color-only companion issue: a link relying purely on color difference from body text can pass raw contrast math at any level and still be indistinguishable to a color-blind reader.

References

• W3C Understanding 1.4.6: Contrast (Enhanced)
• W3C Technique G17: Ensuring that a contrast ratio of at least 7:1 exists
• WebAIM Contrast Checker