DEV Community

Rahil Khan
Rahil Khan

Posted on

Quick accessibility win: check your text contrast (WCAG 4.5:1)

Low-contrast text (light grey on white, white on pastel buttons) is one of the most common accessibility failures on small-business sites, and it hurts everyone reading on a phone in sunlight.

The rule: WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (24px+, or 18.66px bold) and UI elements like button borders and form field outlines.

How to check in 2 minutes

  1. Open Chrome DevTools, inspect a text element and click the colour swatch: it shows the contrast ratio with a pass/fail tick.
  2. Run Lighthouse > Accessibility; it lists every element with insufficient contrast.
  3. Check hover/focus states and text over hero images too (add a dark overlay behind text on photos).

Common fixes

  • Darken body text: #777 on white is ~4.48:1 (fails); #595959 is ~7:1.
  • Don't rely on colour alone for errors in forms; add an icon or message.
  • Keep placeholder text readable, or better, use real labels.

Better contrast = more readable pages, fewer bounces and a more inclusive site.

— NEXCOD, web design & development · https://nexcod.vercel.app · WhatsApp +1 289 902 5119

Top comments (0)