WCAG 1.4.6: Contrast (Enhanced)

The thresholds: AAA vs AA at a glance

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

Real color pairs: pass and fail

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. 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. 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. 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. 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. 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