Colour Contrast and Readability on Your Website

Designers love subtle, low-contrast colour schemes, but pale grey text on a white background is one of the most common — and costly — website mistakes. Many visitors simply cannot read it.

Good contrast is not just about accessibility rules. It keeps people on the page, helps them act and makes your site feel professional. Here is how to get it right.

Why contrast matters

A large and growing share of your audience has less-than-perfect eyesight, reads on a phone in bright sunlight, or is simply skimming quickly. Low contrast loses all of them.

When text is hard to read, people leave. High contrast keeps them reading, which is the first step towards them taking any action at all.

The basic rule of thumb

Body text should be dark on a light background, or light on a dark background — with a strong, clear difference between the two. Avoid grey-on-grey and light text on busy photos.

There are accessibility standards that set minimum contrast ratios, and free tools that check any colour pair against them. If your text fails the test, darken it.

Buttons and links

Your buttons and links must stand out clearly from surrounding text and background. If a customer cannot instantly spot how to act, your contrast is working against you.

Make sure links look different from ordinary text, and that buttons have enough contrast to be obvious at a glance, even on a small screen.

Keep your brand without sacrificing readability

You can still use your brand colours — just use them thoughtfully. Reserve softer brand tones for accents and backgrounds, and use strong, readable colours for the text people actually need to read.

When in doubt, prioritise legibility. A beautiful site that nobody can read is not really beautiful at all.