Colour contrast on websites: why grey text loses readers

Key takeaways

Low colour contrast is the most common accessibility failure on the web: WebAIM found it on 83.9% of the top million home pages in 2026. WCAG requires at least 4.5:1 between normal text and its background and 3:1 for large text. Grey body text, text over photos and pale buttons are the usual culprits, and most are fixed with a darker colour.

• 83.9% of top home pages have low-contrast text (WebAIM, 2026).
• Normal text needs 4.5:1 contrast; large text needs 3:1.
• Buttons and form borders need 3:1 against what is around them.
• Check with a free contrast checker in about 10 minutes.

What is colour contrast?

Colour contrast is the difference in brightness between text or a control and the background behind it, expressed as a ratio from 1:1 (no difference) to 21:1 (black on white). The higher the ratio, the easier text is to read, especially for people with low vision, older visitors and anyone on a phone in daylight.

• The most common business website design mistakes
• Website accessibility for UK businesses

What contrast ratio does WCAG require?

WCAG 2.2 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 point, or 14 point bold. User interface components, such as button edges and form field borders, and meaningful graphics need at least 3:1. Logos and purely decorative text are exempt.

Why is low contrast so common?

Low contrast is common because it looks elegant on a designer's bright, high-quality monitor. Light grey text, thin fonts and text laid over photos feel calm and modern in a mock-up. On a mid-range phone in sunlight, or for a visitor in their sixties, the same text is hard work. WebAIM counted an average of 34 low-contrast text instances per home page in 2026.

• Web design trends to avoid on a business website

Where do contrast problems usually hide?

Contrast failures cluster in a few places. Check these first, because one fix in the site's styles often corrects every page at once.

• Grey body text and small grey captions or dates.
• White text on photos, video or gradient backgrounds.
• Placeholder text inside form fields.
• White text on light brand colours such as yellow, orange or mint.
• Footer text and links on dark backgrounds.
• Disabled-looking ghost buttons with thin outlines.

• Button design: why visitors miss your website buttons

How do you check contrast on your site?

Use a free contrast checker: pick the text colour and background colour and it shows the ratio and whether it passes. Browser developer tools in Chrome and Edge show the ratio when you inspect text. Automated tools such as WAVE flag failures across a page. Check the homepage, a service page and the contact form.

How do you fix contrast without losing your brand?

Keep the brand colour but change where it is used. Use darker shades of the brand colour for text and buttons, and lighter tints for backgrounds. For text over photos, add a solid or semi-opaque panel behind the text, or move the text beside the image. Change body text from mid-grey to near-black.

• Choosing a website colour scheme: mistakes to avoid

Is contrast a legal requirement in the UK?

For private businesses, there is no law that names a contrast ratio, but the Equality Act 2010 requires reasonable adjustments for disabled people, including on websites. Public sector bodies must meet WCAG 2.2 AA. For a business, meeting WCAG contrast is a cheap, clear way to show reasonable steps.

What does this look like in practice?

A pattern we see: a site's body text is a fashionable mid-grey and its buttons are white text on a pale brand colour. Darkening the text and the button shade is a small change in the stylesheet, and it improves every page at once.

• See client work
• Website Design & Development for UK businesses
• Website typography mistakes that make pages hard to read

Contrast checklist

• Check body text against 4.5:1.
• Check large headings against 3:1.
• Check button and input borders against 3:1.
• Put a panel behind any text over images.
• Check placeholder and footer text.
• Fix colours in the global styles, not page by page.

Next step

Check your body text and main button with a contrast checker today.