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

1Verify the contrast ratio (a browser tool or an online contrast checker).
2For body text aim for ≥ 4.5:1, for large text ≥ 3:1.
3Avoid light gray text (#ccc, #ddd) on a white background.
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.