Elements must meet enhanced color contrast ratio thresholds

Color contrast is one of the most impactful accessibility considerations on the web. The enhanced contrast requirements go beyond the minimum AA thresholds (4.5:1 and 3:1) to provide an even higher level of readability. These stricter ratios benefit a broad range of users, including people with low vision, color blindness, and age-related vision decline. Nearly three times as many people experience low vision compared to total blindness, and roughly 8% of men and 0.4% of women in the United States have some form of color vision deficiency. For these users, text that is too close in brightness to its background becomes difficult or impossible to read.

People with low contrast sensitivity perceive everything at roughly the same brightness, making it hard to distinguish outlines, edges, and details. Enhancing the contrast ratio between text and its background ensures that content remains legible across a wide range of visual abilities and environmental conditions, such as bright sunlight on a mobile screen.

This rule relates to WCAG Success Criterion 1.4.6: Contrast (Enhanced) at the AAA level. While AAA conformance is not typically required for legal compliance, meeting these thresholds represents a best practice that significantly improves readability for all users.

How the Rule Works

The color-contrast-enhanced rule from axe-core examines each text element on the page and calculates the contrast ratio between the computed foreground text color and the computed background color. It then checks whether the ratio meets the enhanced AAA thresholds:

• Small text: at least 7:1
• Large text: at least 4.5:1 (large text is defined as 18pt / 24px regular weight, or 14pt / 19px bold)

The rule accounts for background color transparency and opacity. However, certain scenarios are harder to evaluate automatically and may be flagged as needing manual review:

• Foreground and background colors that are identical (1:1 ratio)
• CSS background gradients
• Background colors applied via CSS pseudo-elements (e.g., ::before, ::after)
• Background colors created using CSS borders
• Overlap by another positioned element in the foreground
• Elements moved off-screen via CSS

The rule does not check text elements that have a background-image, are visually hidden by other elements, or are images of text. It also ignores child elements of disabled controls to avoid false positives.

How to Fix the Problem

1. Identify the failing element and note the current foreground and background colors.
2. Adjust the text color, background color, or both until the contrast ratio meets at least 7:1 for small text or 4.5:1 for large text.
3. Use a contrast checking tool such as the axe DevTools browser extension, the WebAIM Contrast Checker, or the built-in contrast picker in Chrome DevTools to verify the new colors.
4. Test across states — make sure hover, focus, active, and visited states also meet the required ratios.
5. Check transparent and semi-transparent colors carefully, as the effective contrast depends on what is rendered behind the element.

Examples

Failing: Insufficient contrast for small text

This light gray text on a white background has a contrast ratio of approximately 2.8:1, which fails both the AA minimum and the AAA enhanced threshold.

<p style="color: #999999; background-color: #ffffff;">
  This text is hard to read for many users.
</p>

Fixed: Enhanced contrast for small text

Darkening the text color to #595959 achieves a contrast ratio of approximately 7:1 against the white background, meeting the AAA enhanced requirement.

<p style="color: #595959; background-color: #ffffff;">
  This text meets the enhanced contrast requirement.
</p>

Failing: Large text that does not meet the 4.5:1 threshold

Even though large text has a lower threshold, this combination still falls short at roughly 3:1.

<h1 style="font-size: 24px; color: #888888; background-color: #ffffff;">
  Large heading with poor contrast
</h1>

Fixed: Large text meeting the enhanced 4.5:1 threshold

Changing the heading color to #767676 or darker brings the ratio to at least 4.5:1.

<h1 style="font-size: 24px; color: #636363; background-color: #ffffff;">
  Large heading with enhanced contrast
</h1>

Failing: Semi-transparent text reducing effective contrast

Using rgba with reduced opacity lowers the effective contrast ratio below the required threshold.

<p style="color: rgba(0, 0, 0, 0.4); background-color: #ffffff;">
  Semi-transparent text that lacks sufficient contrast.
</p>

Fixed: Increasing opacity to restore contrast

Raising the alpha value ensures the rendered color has enough contrast against the background.

<p style="color: rgba(0, 0, 0, 0.82); background-color: #ffffff;">
  This semi-transparent text now meets enhanced contrast.
</p>

Learn more:

Deque Reference

Deque University - How To Fix

→