WCAG 1.4.6: Contrast (Enhanced)
Level AA contrast compensates for moderately low vision. This AAA criterion raises the bar for people with more significant vision loss: text must reach a 7:1 contrast ratio, or 4.5:1 when it is large. For most designs it comes down to one change — stop using mid-grey for body text.
The success criterion, in full
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: Large Text — large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1; Incidental — text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement; Logotypes — text that is part of a logo or brand name has no contrast requirement.
The thresholds: AAA vs AA at a glance
| Text category | Level AA (1.4.3) | Level AAA (1.4.6) |
|---|---|---|
| Normal text (under 24px / under 18.66px bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt/24px, or ≥ 14pt/18.66px bold) | 3:1 | 4.5:1 |
| Incidental text and logotypes | No requirement | No requirement |
The contrast ratio formula is the same one used at AA — based on the relative luminance of the two colors, ranging from 1:1 (identical) to 21:1 (black on white). The AAA large-text threshold, 4.5:1, is deliberately the same number as the AA normal-text threshold: enlarging text buys you the same legibility that extra contrast would.
Who this helps
People with low vision (~20/80)
The 7:1 ratio was chosen to compensate for the contrast sensitivity lost at roughly 20/80 acuity — users who typically do not run magnification software and rely on the page as rendered.
Older users
Contrast sensitivity declines steadily with age. Enhanced contrast keeps body text readable for elderly readers without forcing zoom.
People with color vision deficiencies
The luminance-based ratio ignores hue, so text that reaches 7:1 stays readable regardless of which colors a user can distinguish.
Everyone in bad conditions
Sunlight glare, cheap panels, night-shifted screens, and low-brightness battery modes all eat contrast. A 7:1 baseline keeps text legible when conditions subtract from it.
Real color pairs: pass and fail
✓ Passes 7:1
#1e293bon#ffffff— about 15.0:1#374151on#ffffff— about 10.3:1#e2e8f0on#0f172a— about 14.3:1#1d4ed8on#ffffff— about 7.3:1 (a rare saturated blue that clears AAA)
✗ Fails 7:1 (normal-size text)
#6b7280on#ffffff— about 4.8:1 (passes AA, fails AAA)#2563ebon#ffffff— about 5.2:1 (link blue: AA yes, AAA no)#dc2626on#ffffff— about 4.8:1#94a3b8on#0f172a— about 6.5:1, just under the line
CSS patterns for AAA contrast
1. Encode the thresholds in your design tokens
The reliable route to AAA is a palette whose text tokens are measured once and reused everywhere — not per-page color choices.
:root {
--bg: #ffffff;
--text-body: #1f2937; /* 14.7:1 on --bg → AAA normal text */
--text-secondary: #374151; /* 10.3:1 → AAA, even for fine print */
--text-large: #4b5563; /* 7.6:1 — fine anywhere, required ≥4.5:1
only if ≥24px or ≥18.66px bold */
--link: #1d4ed8; /* 7.3:1 → AAA for inline links */
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f172a;
--text-body: #e2e8f0; /* 14.3:1 on --bg */
--text-secondary: #cbd5e1; /* 12.0:1 */
--link: #93c5fd; /* 9.0:1 */
}
}2. Offer a high-contrast theme as a mechanism
The Understanding document accepts providing a mechanism to switch to an enhanced-contrast presentation. Honoring the OS-level preference costs a few lines.
/* Respect the user's OS contrast preference */
@media (prefers-contrast: more) {
:root {
--text-body: #000000;
--text-secondary: #111827;
--bg: #ffffff;
--link: #1e40af;
}
}
/* Or a user-selectable theme */
[data-theme="high-contrast"] {
--text-body: #000000;
--bg: #ffffff;
--link: #0000ee;
}3. Watch text over images and gradients
The ratio must hold against the actual pixels behind each letter. A scrim guarantees a measurable background.
.hero {
position: relative;
background: url("/hero.jpg") center / cover;
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background: rgb(15 23 42 / 0.82); /* dark scrim */
}
.hero h1 {
position: relative; /* above the scrim */
color: #f8fafc; /* measure against scrim ≈ 13:1 */
}How to test for 1.4.6
- 1
Run an automated scan at the AAA level
axe DevTools, WAVE, and Lighthouse can all evaluate contrast; configure or filter for the AAA thresholds (7:1 / 4.5:1). This catches most solid-color text instantly.
- 2
Spot-check with an eyedropper tool
Use a contrast checker (e.g. our color contrast tool, or WebAIM's) on representative pairs: body text, secondary text, links, buttons, text in cards and banners. Record the ratios against both thresholds.
- 3
Classify text sizes correctly
For every pair below 7:1, check whether the text truly qualifies as large: at least 24 CSS pixels, or at least 18.66 CSS pixels and bold. If yes, it needs 4.5:1; if not, it fails.
- 4
Check states and overlays
Hover, focus, visited, disabled-looking-but-active, dark mode, and text over images or gradients — contrast must hold in every rendered state, measured against the actual background behind the glyphs.
- 5
Apply the exceptions deliberately
Exclude genuine logotypes, truly inactive controls, and decorative text — and nothing else. 'Our brand grey' on a button label is not a logotype exception.
Measure any pair instantly with the Color Contrast Checker, which reports both the AA and AAA verdicts for normal and large text.
Common failures
- Mid-grey body text (#6b7280-style tokens) that passes AA at 4.5–5:1 but falls well short of 7:1.
- Brand-colored links and buttons in saturated blues, reds, or oranges — most sit between 3:1 and 5.5:1 on white.
- Counting 16px bold labels as 'large text' — bold text must be at least 18.66 CSS pixels to use the 4.5:1 band.
- Placeholder text, captions, and timestamps styled extra-light precisely because they are 'less important'.
- Text over hero images with no scrim, where parts of some letters sit on light regions of the photo.
- Dark-mode secondary text dimmed for aesthetics until it slides under 7:1 against the dark background.
Frequently asked questions
What does WCAG 1.4.6 Contrast (Enhanced) require?
It requires the visual presentation of text and images of text to have a contrast ratio of at least 7:1, except that large-scale text (and images of large-scale text) needs at least 4.5:1. Three categories are exempt: incidental text (inactive controls, pure decoration, text invisible to everyone, or text inside a picture with significant other visual content) and logotypes — text in a logo or brand name has no contrast requirement. It is the Level AAA counterpart of 1.4.3 Contrast (Minimum), introduced in WCAG 2.0.
What counts as large text for the 4.5:1 threshold?
Large-scale text is at least 18 point (24 CSS pixels) at normal weight, or at least 14 point (about 18.66 CSS pixels) when bold. At those sizes the letterforms are easier to resolve, so the ratio relaxes to 4.5:1 — the same number that normal text needs at Level AA. Note these are effective rendered sizes: a 24px heading qualifies, a 16px bold label does not.
How is 1.4.6 different from 1.4.3 Contrast (Minimum)?
The structure is identical; only the numbers change. Level AA (1.4.3) requires 4.5:1 for normal text and 3:1 for large text. Level AAA (1.4.6) raises both bands: 7:1 for normal text and 4.5:1 for large text. The exceptions (incidental text and logotypes) are the same. One more difference worth knowing: the AA requirement for non-text elements like UI component boundaries comes from 1.4.11 (3:1) and does not change at AAA — 1.4.6 covers text only.
Why 7:1 — where does the number come from?
The 4.5:1 AA level was calibrated to compensate for the contrast sensitivity typically lost by users with 20/40 vision. The 7:1 AAA level extends that compensation to users with roughly 20/80 acuity — people with more significant low vision who do not use assistive technology such as screen magnifiers. For them, text that passes AA can still be genuinely hard to read; 7:1 restores about the same effective legibility.
Do black-on-white and common dark themes pass 7:1?
Pure black on white is 21:1, and near-black pairs like #1e293b on #ffffff (about 15:1) pass comfortably. Where designs fail AAA is mid-grey body text: the popular #6b7280 on white is roughly 4.8:1 — fine for AA, well short of 7:1. On dark themes, light-grey text such as #cbd5e1 on #0f172a passes (about 12:1), but dimmed secondary text often drops below 7:1. Always measure; intuition is unreliable near the threshold.
Should I aim for AAA contrast everywhere?
For body text, it is one of the cheapest AAA upgrades available — usually just darkening a few grey tokens. W3C does not recommend requiring AAA wholesale, and brand constraints may keep some accent-colored text at AA. A pragmatic policy many teams adopt: 7:1 for body and long-form reading text, at least 4.5:1 everywhere else, and an optional high-contrast theme (a mechanism to achieve enhanced contrast also satisfies the intent, per the Understanding document's sufficient techniques).
Related Success Criteria
Color is not used as the only visual means of conveying information.
Audio that plays automatically can be paused, stopped, or controlled.
Text has a contrast ratio of at least 4.5:1 (3:1 for large text).
Text can be resized up to 200% without loss of content or functionality.
Text is used instead of images of text, except for customizable or essential images.