Text elements must have sufficient color contrast against the background.

Text that does not have enough contrast against its background is hard to read. This affects people with low vision, color vision deficiencies, and anyone reading a screen in bright light or on a low quality display. When foreground and background colors are too similar, characters blur together, and readers must strain to distinguish letters.

WCAG success criterion 1.4.3 (Contrast — Minimum) at Level AA sets specific thresholds. Normal-sized text must have a contrast ratio of at least 4.5:1 between the text color and the background color. Large text, defined as at least 24px (or at least 18.66px if bold), needs a contrast ratio of at least 3:1. These ratios are calculated using the relative luminance of the two colors.

A few categories of text are exempt from this requirement: text in inactive (disabled) UI components, purely decorative text, text that is not visible, and logos or brand names. However, the rule still applies to the vast majority of text content on a page.

How contrast is calculated

Contrast ratios compare the relative luminance of two colors on a scale from 1:1 (identical colors) to 21:1 (black on white or white on black). The formula is defined in the WCAG guidelines and accounts for the way human vision perceives different wavelengths of light. You do not need to calculate this by hand. Browser DevTools, the WebAIM Contrast Checker, and tools like the Colour Contrast Analyser can all compute the ratio for any two colors.

When the background is not a solid color (for example, a gradient or an image behind the text), the contrast must be measured against the area of the background where the text actually sits. If a background image varies, consider adding a semi-transparent overlay or a solid fallback color behind the text to guarantee the minimum ratio.

Who is affected

People with low vision often cannot increase contrast through their own settings and depend on authors to choose readable color combinations. People with color vision deficiencies (such as deuteranopia or protanopia) may perceive even less difference between foreground and background than the calculated ratio suggests, making the 4.5:1 minimum a practical baseline rather than a generous threshold. Older adults, whose contrast sensitivity declines with age, also benefit directly from sufficient contrast.

How to fix it

1. Identify the computed foreground and background colors of the flagged text. Browser DevTools can show these in the element inspector.
2. Check the contrast ratio with a contrast checker tool.
3. Adjust either the text color or the background color (or both) until the ratio meets or exceeds 4.5:1 for normal text or 3:1 for large text.
4. If the text overlaps a background image, add a solid or semi-transparent color layer between the image and the text so the minimum ratio is maintained regardless of the image content.
5. Verify the fix in multiple browsers. Different rendering engines may anti-alias text differently, and CSS features like opacity or mix-blend-mode can alter the effective colors.

Darkening the text color is usually the simplest change when the background is light. On dark backgrounds, lightening the text color works the same way.

Examples

Insufficient contrast

This light gray text on a white background has a contrast ratio of about 2.3:1, well below the 4.5:1 minimum.

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

Sufficient contrast (fixed)

Changing the text to a darker gray brings the ratio above 4.5:1.

<p style="color: #595959; background-color: #ffffff;">
  This text is easy to read.
</p>

Large text with insufficient contrast

Even though large text only requires a 3:1 ratio, this combination still falls short at about 2.1:1.

<h1 style="font-size: 24px; color: #b5b5b5; background-color: #ffffff;">
  Low contrast heading
</h1>

Large text with sufficient contrast (fixed)

A darker heading color brings the ratio above 3:1.

<h1 style="font-size: 24px; color: #767676; background-color: #ffffff;">
  Readable heading
</h1>

Text over a background image (fixed with overlay)

When text sits on an image, a semi-transparent background behind the text ensures a minimum contrast regardless of the image content.

<div style="position: relative; background-image: url('photo.jpg');">
  <p style="background-color: rgba(0, 0, 0, 0.7); color: #ffffff; padding: 8px;">
    Readable text over an image.
  </p>
</div>

Disabled text is exempt

Text inside a disabled control is not required to meet the contrast minimum. The rule does not apply here.

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

Learn more:

W3C Reference

Understanding Success Criterion 1.4.3: Contrast (Minimum)

→

W3C Reference

Understanding Success Criterion 1.4.6: Contrast (Enhanced)

→

W3C Reference

Technique G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text and background

→