Text elements must have enhanced color contrast against the background (WCAG AAA).

Text that does not meet enhanced contrast ratios can be difficult or impossible to read for people with moderately low vision, aging eyes, or anyone viewing a screen in bright light or on a low quality display. WCAG Success Criterion 1.4.6 (Level AAA) sets higher contrast thresholds than the minimum AA requirement: a contrast ratio of at least 7:1 for normal-sized text and 4.5:1 for large text. Large text is defined as text that is at least 24px (or at least 18.66px if bold).

These enhanced thresholds exist because the AA minimums (4.5:1 and 3:1) are sometimes not enough for users with contrast sensitivity loss, which affects a significant number of people as they age. Meeting the AAA contrast requirement means that text remains legible under a wider range of conditions and for a broader population of readers.

Who is affected

Users with low vision who do not use screen readers but rely on the visual rendering of text are the primary group affected by poor contrast. This includes people with conditions like cataracts, glaucoma, or diabetic retinopathy. Users with color vision deficiencies can also find low contrast text harder to parse. Beyond permanent conditions, situational factors like screen glare, dim displays, or aging monitors reduce effective contrast for all users.

How the rule works

This rule checks every visible text character in the document and compares the foreground color against the background color. If the computed contrast ratio falls below 7:1 for normal text or below 4.5:1 for large text, the rule reports a failure.

A few categories of text are excluded from this check:

• Text inside a disabled widget or inside the accessible name of a disabled widget.
• Text that is purely decorative.
• Text that does not express anything in human language.
• Logos and brand names (though these are typically rendered as images, so this exception rarely applies to text nodes in practice).

Note that passing this rule does not guarantee the success criterion is fully met. When foreground and background colors vary across a character (due to gradients or background images), some pixels may pass while others do not. The rule checks the highest possible contrast, so a passing result means at least some pixel combination meets the threshold, but legibility depends on the overall visual effect.

How to fix it

Increase the contrast between the text color and its background. There are two directions to go: darken the text, lighten the background, or both. You can also lighten the text and darken the background if the design uses light-on-dark styling.

Use a contrast checking tool to verify your color pairs. Browser developer tools (Chrome, Firefox, Edge) include built-in contrast ratio indicators in their color pickers. Stand alone tools like the WebAIM Contrast Checker or the Colour Contrast Analyser from TPGi work well too.

When adjusting colors, keep these thresholds in mind:

• Normal text (below 24px, or below 18.66px bold): contrast ratio of at least 7:1
• Large text (24px and above, or 18.66px and above if bold): contrast ratio of at least 4.5:1

If you cannot change the text or background color due to brand constraints, consider increasing the font size to qualify as large text, which has a lower contrast threshold. However, this is only practical when the design allows it.

Examples

Failing example: normal text with insufficient contrast

This gray text on a white background has a contrast ratio of approximately 4.48:1, which meets the AA minimum but fails the AAA enhanced requirement of 7:1.

<p style="color: #767676; background-color: #ffffff;">
  This text does not meet enhanced contrast.
</p>

Passing example: normal text with enhanced contrast

Darkening the text color to #595959 or darker brings the contrast ratio above 7:1 against a white background.

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

Failing example: large text with insufficient contrast

Even though large text has a lower threshold of 4.5:1, this combination at approximately 3.9:1 still fails.

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

Passing example: large text with sufficient contrast

Changing the heading color to #737373 gives a contrast ratio of approximately 4.6:1, which meets the 4.5:1 threshold for large text.

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

Passing example: light text on a dark background

Enhanced contrast works in both directions. Light text on a sufficiently dark background can meet the 7:1 ratio.

<p style="color: #e0e0e0; background-color: #333333;">
  Light on dark with enhanced contrast.
</p>

Excluded: disabled text

Text inside a disabled control is exempt from this rule because it is considered incidental under WCAG 1.4.6.

<button disabled style="color: #999999; background-color: #ffffff;">
  Submit
</button>

Learn more:

W3C Reference

Understanding Success Criterion 1.4.6: Contrast (Enhanced)

→

W3C Reference

Technique G17: Ensuring that a contrast ratio of at least 7:1 exists

→

W3C Reference

Technique G148: Not specifying background color, not specifying text color

→