Skip to main content
All website issues
Ease of Use

Some text is hard to read due to low color contrast

What this means for your business

Some text is hard to read because it doesn't stand out enough from the background. This affects visitors with visual impairments, people using their phone in sunlight, and anyone on a lower-quality screen.

How to fix it
Medium
30–90 minutes

  1. 1Identify which text has insufficient contrast: the scan will list the specific elements. You need a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).
  2. 2Check your contrast ratios using WebAIM's free contrast checker at webaim.org/resources/contrastchecker — enter your foreground and background colours.
  3. 3Darken light text colours or lighten dark backgrounds until you meet the minimum ratio. Small colour shifts often make a big difference in contrast without changing your brand feel.
  4. 4Update your CSS with the corrected colour values. If you use a design system or CSS variables, update the variable values so the change applies everywhere.
  5. 5Pay special attention to placeholder text in form fields, text over images, and text on coloured button backgrounds — these are the most commonly failing elements.
  6. 6After fixing, re-run the WAVE extension to confirm all contrast issues are resolved.

On WordPress

Most themes have Customizer options for text and link colours. Go to Appearance → Customize → Colors and adjust colours there. For fine-grained control, add CSS in Appearance → Customize → Additional CSS.

On Shopify

Go to Online Store → Themes → Customize → find colour settings in the theme editor. Adjust foreground/background colour combinations that fail the contrast check. For deeper changes, edit the theme CSS.

Does your site have this problem?

SiteSprout scans your site, tells you which issues you actually have in plain English, and keeps watch so nothing breaks silently.

Scan your site free