WCAG 1.4.6 Contrast Enhanced: Achieve 7:1 Ratio for Maximum Readability

Last updated: 2026-03-25

Level AAA Perceivable WCAG 1.4.6

What This Criterion Requires

WCAG 1.4.6 Contrast (Enhanced) is a Level AAA criterion that requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text (18pt or 14pt bold and above). This is a stricter version of the Level AA criterion 1.4.3, which requires only 4.5:1 for normal text and 3:1 for large text. Meeting this enhanced standard provides significantly better readability for users with moderately low vision who do not use contrast-enhancing assistive technology. While AAA compliance is not typically required by regulations like the EAA or ADA, achieving enhanced contrast is a best practice that benefits all users, especially those reading on mobile devices in bright sunlight, older adults with age-related vision changes, and users experiencing screen glare. Many accessibility-focused organizations and government agencies voluntarily target this criterion because the improvement in readability is substantial. The same exceptions apply as with 1.4.3: logotypes, incidental text in photographs, and inactive UI components are exempt.

Why It Matters

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more have low vision conditions that make low-contrast text difficult or impossible to read. The AA minimum contrast ratio of 4.5:1 was established as a threshold that provides reasonable contrast for most users with 20/40 vision, but many people have vision that falls below this level without qualifying for specialized assistive technology. A 7:1 contrast ratio covers users with vision loss equivalent to approximately 20/80, which represents a much larger portion of the population, including many older adults. Enhanced contrast also improves readability in challenging environmental conditions such as mobile screens in direct sunlight, low-quality monitors, or screens with accumulated dust and scratches. Organizations that target this criterion often report improved engagement metrics, lower bounce rates, and better user satisfaction scores across all user groups, not just those with visual impairments.

Common Failures and How to Fix Them

Body text using medium gray on white background

The most common failure is body text styled in a medium gray that passes the 4.5:1 AA requirement but fails the 7:1 AAA threshold. Colors like #767676 (4.54:1) technically pass AA but fall well short of enhanced contrast.

Inaccessible 
body {
  color: #767676; /* 4.54:1 ratio - passes AA only */
  background-color: #ffffff;
}
Accessible 
body {
  color: #595959; /* 7.0:1 ratio - passes AAA */
  background-color: #ffffff;
}

Light-colored links that blend with surrounding text

Links styled with a light blue color that meets AA but not AAA requirements. This makes links harder to read for users with low vision, compounding the difficulty of distinguishing them from body text.

Inaccessible 
a {
  color: #0070c0; /* ~4.7:1 ratio - AA only */
}
Accessible 
a {
  color: #004d99; /* ~7.9:1 ratio - meets AAA */
}

Placeholder text with insufficient contrast

Form field placeholder text using very light gray that fails both AA and AAA requirements. While placeholder text should not be the sole label, it should still be readable when present.

Inaccessible 
input::placeholder {
  color: #c0c0c0; /* ~1.6:1 ratio */
}
Accessible 
input::placeholder {
  color: #595959; /* 7.0:1 ratio - meets AAA */
}

How to Test

  1. Use the WebAIM Contrast Checker or a browser extension like axe DevTools to measure contrast ratios against the 7:1 threshold for normal text and 4.5:1 for large text.
  2. Inspect your CSS stylesheets for text color and background color combinations, paying special attention to body text, links, captions, and secondary text elements.
  3. Test your pages on a mobile device in bright outdoor conditions to identify text that becomes difficult to read despite passing minimum AA requirements.
  4. Use browser DevTools' computed styles panel to check the resolved colors for elements that inherit colors from parent elements or use CSS custom properties.

CMS-Specific Guidance

This criterion commonly causes issues on these platforms:

Further Reading

Related WCAG Criteria