Skip to main content
Perceivable WCAG 1.4.6

1.4.6 Contrast (Enhanced)

Text and images of text have a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Level AAA Serious WCAG 2.0 (new) WCAG 2.1 WCAG 2.2
color-contrast-enhanced

What This Rule Means

WCAG 1.4.6 is the AAA-level enhancement of the minimum contrast criterion (1.4.3). It raises the bar: normal text must achieve a contrast ratio of at least 7:1 against its background, and large text must achieve at least 4.5:1. These higher ratios provide significantly better readability for users with moderately low vision (approximately 20/80 visual acuity) without requiring contrast-enhancing assistive technology.

The same exceptions apply as with 1.4.3: incidental text, logotypes, and inactive component text are exempt. The definition of large text remains the same — 18pt (24px) regular or 14pt (18.66px) bold and above.

Why It Matters

The 7:1 ratio provides substantially better readability in challenging conditions. While 4.5:1 is the minimum acceptable threshold, 7:1 accommodates users with more significant vision loss, older adults with naturally declining contrast sensitivity, and environments with poor viewing conditions. For organizations serving healthcare, government, or elderly populations, aiming for AAA contrast is a meaningful improvement.

Achieving 7:1 does not require dramatic visual changes. Dark text on a white or near-white background easily meets this threshold. The main design challenge arises with colored text, light grays, and mid-tone backgrounds.

Related axe-core Rules

  • color-contrast-enhanced — Checks that text meets the enhanced 7:1 contrast ratio for normal text and 4.5:1 for large text. This rule is typically run as a "best practice" or AAA-level check.

How to Test

  1. Use the same tools as for 1.4.3 but set the target to 7:1 for normal text and 4.5:1 for large text.
  2. In axe DevTools, enable the AAA rules or run the color-contrast-enhanced rule specifically.
  3. Use the WebAIM Contrast Checker and check the "WCAG AAA" row in the results.
  4. Pay special attention to secondary text, captions, and metadata which tend to use lighter colors.

How to Fix

Tighten your color palette to meet the higher threshold:

:root {
  /* AAA-compliant text colors on white (#fff) */
  --text-primary: #111122;    /* 17.7:1 */
  --text-secondary: #333355;  /* 10.1:1 */
  --text-muted: #4d4d6a;      /* 7.02:1 — just meets 7:1 */

  /* For large text (24px+), these pass 4.5:1 */
  --text-large-accent: #5c5c80; /* 5.1:1 */
}

/* Avoid mid-range grays that fail at 7:1 */
/* #767676 = 4.54:1 on white — passes AA but fails AAA */
/* #595959 = 7.0:1 on white — passes AAA */
.body-text {
  color: #333355;
}

Common Mistakes

  • Assuming that passing 4.5:1 (AA) is sufficient for all audiences when the user base includes elderly or low-vision populations.
  • Using popular "accessible gray" values like #767676 that pass AA but fail AAA.
  • Overlooking the enhanced requirement when designing dark mode — pale text on dark backgrounds must also meet 7:1.
  • Not testing secondary UI text (timestamps, bylines, metadata) which often uses lighter colors.
  • Applying the 7:1 ratio requirement to logotypes and branding elements that are actually exempt.

Resources