Knowledgebase

Colour Contrast and Readability Print

  • websitecontentdesign, website, troubleshooting, guide, howto, solution, zillionkinghost, hosting
  • 0

The most common accessibility failure.

THE PROBLEM

Light grey text on white backgrounds is widespread in modern design and genuinely difficult to read, particularly for older visitors, on phones, and outdoors.

THE STANDARD

Body text should have a contrast ratio of at least 4.5 to 1 against its background. Large text can be 3 to 1.

Online contrast checkers tell you the ratio of any two colours.

WHAT USUALLY FAILS

Grey body text Text over photographs without a darkening overlay Light coloured buttons with white text Placeholder text in form fields Footer text, frequently the lightest on the site

FIXING IT

Darken the text, or lighten the background. Usually darkening the text is the answer.

For text over images, add a dark overlay or a solid panel behind the text.

WHY IT MATTERS COMMERCIALLY

A visitor who cannot comfortably read your text does not read it. This is not only an accessibility question.

TESTING

Look at your site on a phone, outdoors, in daylight. That is the real test, and it is harsher than any screen.


Was this answer helpful?
Back

Are you happy with your experience? Leave us a review on Trustpilot.


Trustpilot