1.4.6 Contrast (Enhanced)
What it requires
The visual presentation of text and images of text must have a contrast ratio of at least 7:1 against its background. Large-scale text — at least 18 point, or 14 point bold — needs a ratio of at least 4.5:1. This is the enhanced (AAA) counterpart to 1.4.3 Contrast (Minimum), which only asks for 4.5:1 and 3:1.
The same exceptions apply: text that is part of an inactive (disabled) control, pure decoration, text not visible to anyone, or text that is part of a logotype or brand name has no contrast requirement.
People with low vision who do not use contrast-enhancing assistive technology, and people with colour-vision deficiencies that reduce perceived luminance contrast. The enhanced ratio also helps older users with age-related vision loss and anyone reading in poor lighting, on dim or glare-prone screens, or in bright sunlight. When text falls below 7:1, these users may find body copy slow, tiring, or impossible to read.
How to detect it
| Check | How | Catches |
|---|---|---|
| Measure ratios | Sample foreground and background with a contrast checker or DevTools colour picker. | Body text below 7:1; large text below 4.5:1. |
| States & layers | Test hover, focus, visited, and text over images or gradients. | Passing default text that fails in another state or over busy backgrounds. |
| Automated scan | Run axe or similar — most tools default to the AA 4.5:1 threshold. | Flat colour failures; will not reliably test the AAA 7:1 level or text on images. |
How to fix it
- Identify each text/background pair and measure its current contrast ratio.
- Darken text or lighten the background (or vice versa) until body text reaches 7:1 and large text 4.5:1.
- Define accessible colour tokens so the ratio holds across themes and components.
- For text over images, add a solid scrim or overlay behind the text rather than relying on the image.
- Re-measure every interactive state and re-test.
<p style="color: #1a1a1a; background: #ffffff">
Body text at #1a1a1a on white is about 17.4:1 — well above 7:1.
</p>Copy-paste tests
Automated coverage
The axe-core rule color-contrast-enhanced flags failures of this criterion. Run it via the axe DevTools browser extension or axe-core in CI. Automated tools only catch some failures.
Run this in the browser console
// Read-only: surfaces small/normal-weight text for manual 7:1 contrast review.
const suspects = [...document.querySelectorAll('p, span, li, a, label, td')]
.filter(el => el.textContent.trim().length > 0)
.filter(el => {
const s = getComputedStyle(el);
const px = parseFloat(s.fontSize);
const bold = parseInt(s.fontWeight, 10) >= 700;
// "Large text" (24px, or 18.66px bold) only needs 4.5:1, so review the rest.
return px < 24 && !(bold && px >= 18.66);
})
.map(el => ({ el, color: getComputedStyle(el).color, size: getComputedStyle(el).fontSize }));
console.table(suspects);
suspects.forEach(s => (s.el.style.outline = '2px solid magenta'));What to check manually: measure each flagged element's actual foreground/background ratio against 7:1 (4.5:1 for large text) with a contrast checker, and confirm text over gradients or images stays above 7:1 across the whole background.