Skip to content

How to fix colour contrast

Accessibility1 min readFixes check contrast-summary

Text needs at least 4.5:1 contrast against its background (3:1 for large text). Light grey on white fails for many readers.

Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →

Check your own site

Runs this check and the other 186, free, in about 45 seconds.

What a passing site looks like

  • Text has enough colour contrastwarning · −1.5 ptseffort S

Text colour contrast

Why it matters. Low-contrast text is hard to read on a phone in daylight and for the 1 in 12 men with reduced colour vision. WCAG asks for a 4.5:1 ratio for normal text and 3:1 for large text.

How to fix it.
  1. Darken the text colour or lighten the background until the ratio reaches 4.5:1 (3:1 for text over 24 px, or bold text over 18.7 px).
  2. Check grey helper text, placeholder text and text over images first; they fail most often.

Filed under Accessibility. Copy is generated from the same catalogue that scores every report, so what you read here is what the report says.