Start scanning free

( Perceivable / WCAG 1.4.3 )

Text does not have enough colour contrast

This check maps to Contrast (Minimum). Use the guidance below to confirm the issue, understand who it affects and ship a fix.

Serious Level AA WCAG 1.4.3 — Contrast (Minimum)

What’s wrong

The contrast ratio between the text colour and its background is below the required minimum.

Why it matters

People with low vision, colour blindness, or who are reading in bright sunlight rely on sufficient contrast to read text. The requirement is a 4.5:1 ratio for normal text and 3:1 for large text (18px bold or 24px regular). Light grey text on white is one of the most common failures and affects far more users than most teams realise.

How to fix it

Adjust the foreground or background colour until the contrast ratio meets the minimum. Use a contrast checker to verify before committing.

Before 
/* Ratio: ~2.3:1 — fails */
.helper-text {
  color: #999999;
  background: #ffffff;
}
After 
/* Ratio: ~7:1 — passes AA and AAA */
.helper-text {
  color: #595959;
  background: #ffffff;
}

Large text (24px+ regular, or 18.67px+ bold) only needs a 3:1 ratio. Decorative text, logos, and text in inactive UI components are exempt.

Use the WebAIM contrast checker or the browser DevTools colour picker to test ratios before you ship.

Learn more