1.4.6 Contrast (Enhanced)

Level: AAA | Principle: Perceivable | Since: WCAG 2.0 | Automation: Manual

What This Means

This is the stricter version of the Level AA contrast requirement (1.4.3). Enhanced contrast requires a 7:1 ratio for normal text and 4.5:1 for large text. Large text is defined as 18pt (24px) or larger, or 14pt (18.5px) bold or larger.

The higher contrast ratio makes text significantly easier to read for people with moderately low vision (approximately 20/80 acuity). At this level, users with contrast sensitivity loss who do not use assistive technology can still read the content comfortably.

These ratios provide roughly the same readability at 7:1 that a person with 20/20 vision has at 4.5:1 contrast — compensating for the contrast sensitivity loss associated with low vision.

Who This Affects

  1. Users with low vision (20/80 or worse) — higher contrast is essential for reading
  2. Older adults — contrast sensitivity declines significantly with age
  3. Users viewing screens in bright environments — sunlight washes out low contrast content
  4. Users with color vision deficiency — higher contrast compensates for reduced color perception

Common Pitfalls

1. Using medium gray text that passes AA but fails AAA

/* Bad: #767676 on #fff = 4.54:1 (passes AA, fails AAA) */
body { color: #767676; background: #ffffff; }

/* Good: #595959 on #fff = 7.0:1 (passes AAA) */
body { color: #595959; background: #ffffff; }

2. Subtle heading colors

/* Bad: #6B7280 on #fff = 4.63:1 (fails AAA for normal text) */
h2 { color: #6B7280; }

/* Good: #374151 on #fff = 10.69:1 (passes AAA) */
h2 { color: #374151; }

3. Light-colored links

/* Bad: #3B82F6 on #fff = 3.24:1 (fails even AA) */
a { color: #3B82F6; }

/* Good: #1D4ED8 on #fff = 7.21:1 (passes AAA) */
a { color: #1D4ED8; }

4. Dark mode with insufficient contrast

/* Bad: #9CA3AF on #111827 = 5.58:1 (fails AAA) */
.dark body { color: #9CA3AF; background: #111827; }

/* Good: #D1D5DB on #111827 = 10.24:1 (passes AAA) */
.dark body { color: #D1D5DB; background: #111827; }

How to Test

  1. Open DevTools (F12), inspect a text element, and read the contrast ratio from the color picker tooltip.
  2. Check that normal text (under 18pt / 24px) has at least a 7:1 contrast ratio against its background.
  3. Check that large text (18pt+ / 24px+, or 14pt+ / 18.5px+ bold) has at least a 4.5:1 contrast ratio.
  4. Test all text elements: body text, headings, links, form labels, placeholder text, and text in both light and dark modes.
  5. For text over images or gradients, sample the lowest-contrast area and verify it still meets 7:1 (or 4.5:1 for large text).
  6. Pass: All text meets the enhanced contrast ratio (7:1 for normal text, 4.5:1 for large text).
  7. Fail: Any text falls below the enhanced contrast thresholds.

How to Fix

  1. Audit all text colors against their backgrounds using a tool like the WebAIM Contrast Checker
  2. Replace any text color that does not meet 7:1 with a darker (or lighter on dark backgrounds) alternative
  3. Use the table below as a quick reference for common backgrounds

| Background | Minimum text color (7:1) | Minimum text color (4.5:1 large) | |------------|--------------------------|----------------------------------| | White #fff | #595959 or darker | #767676 or darker | | Light gray #f5f5f5 | #545454 or darker | #737373 or darker | | Black #000 | #a6a6a6 or lighter | #767676 or lighter | | Dark gray #111827 | #b0b5bd or lighter | #8b929c or lighter |

Resources

  1. WCAG Understanding 1.4.6
  2. How to Meet 1.4.6