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
- Open Chrome DevTools, inspect a text element and click the colour swatch: it shows the contrast ratio with a pass/fail tick.
- Run Lighthouse > Accessibility; it lists every element with insufficient contrast.
- Check hover/focus states and text over hero images too (add a dark overlay behind text on photos).
Common fixes
- Darken body text:
#777on white is ~4.48:1 (fails);#595959is ~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)