Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
UX / UI High impact Easy 20–40 min

Text contrast against the background

Text must have sufficient contrast (WCAG AA 4.5:1).

What it is

Contrast is the lightness difference between text and background. Light gray text on a white background has low contrast and is hard to read. WCAG AA requires a ratio of at least 4.5:1 for body text.

Why it matters

Low contrast excludes users with weaker vision and worsens readability for everyone, especially on mobile in sunlight. It's a common accessibility flaw and Google reports it in audits.

How to do it

  1. 1Verify the contrast ratio (a browser tool or an online contrast checker).
  2. 2For body text aim for ≥ 4.5:1, for large text ≥ 3:1.
  3. 3Avoid light gray text (#ccc, #ddd) on a white background.
  4. 4Don't dim text with too low an opacity.

Example

Wrong
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — unreadable */
Correct
.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Conclusion

Sufficient contrast is fundamental to readability and accessibility. Our static heuristic flags obviously light colors, but verify the exact ratio in the browser. Darker text on a light background (and vice versa) is a safe choice.

Related topics