How to fix colour contrast
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: WCAG color contrast: the ratios, and how to fix low-contrast text →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
Colour contrast is the difference in brightness between text and its background, expressed as a ratio from 1:1 (no difference) to 21:1 (black on white). WCAG 2.2 success criterion 1.4.3 requires at least 4.5:1 for normal text and 3:1 for large text, which means 24 px regular or about 18.7 px bold and above.
Low contrast makes text hard to read on a phone in sunlight, on cheap screens and for people with low vision or colour blindness, which affects about 1 in 12 men. It is one of the most common accessibility failures on the web. getReport lists each text element below the required ratio. A page is OK when all text meets 4.5:1, or 3:1 for large text; placeholder text that people need to read counts too.
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.
- 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).
- Check grey helper text, placeholder text and text over images first; they fail most often.
Questions people ask
How do I check colour contrast?
Run a getReport check to find every failing text element on a page. To test a single pair of colours, use a contrast checker such as WebAIM's: enter the text and background colour codes and it shows the ratio and whether it passes AA and AAA. Chrome DevTools also shows the ratio when you inspect text and open its colour picker.
What contrast ratio does WCAG require?
At level AA, 4.5:1 for normal text and 3:1 for large text (24 px, or about 18.7 px bold). At AAA, 7:1 and 4.5:1. Separately, criterion 1.4.11 asks for 3:1 for the parts of buttons, form fields, icons and charts that people need to see. Logos, disabled controls and purely decorative text are exempt.
What are examples of bad colour contrast?
Light grey text on white, such as #999999 on #FFFFFF at about 2.8:1, is the most common. Others are white text on a light photo without a dark overlay, pastel buttons with white labels, red text on green and pale grey placeholder text. Each can look stylish on a bright monitor and become unreadable on a phone outdoors.