Readability and contrast: is your website easy to read?
Light grey text, small fonts and text over photos make a website look less professional and harder to read. The contrast rules from WCAG, explained with examples.
Updated October 1, 2026
Text that is hard to read makes a website feel unprofessional, even when visitors can't say why. Light grey on white, thin fonts, small sizes and headlines on busy photos all ask visitors to work harder. Many won't. This guide covers the rules for readable text and how to check your own site.
The contrast rule
The Web Content Accessibility Guidelines (WCAG) set a minimum contrast between text and its background, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). Success criterion 1.4.3 asks for (W3C):
- At least 4.5:1 for normal text
- At least 3:1 for large text: at least 18 point, or 14 point bold. In CSS pixels, that is roughly 24px, or 18.5px bold.
Logos and purely decorative text have no requirement.
To give an idea: on a white background, the light grey #999999 scores about 2.8:1 and fails. #767676 is about the lightest grey that passes for normal text, at 4.5:1. Many browser developer tools and free online checkers show the ratio when you pick two colours.
Who has to follow it
The WCAG rules are written for accessibility, but readable text helps every visitor: on a phone in sunlight, on a cheap screen, or with tired eyes.
In some cases the rules are also a legal requirement. Since 28 June 2025, the European Accessibility Act requires many consumer services, including online shops, to be accessible. Micro-businesses offering services, with fewer than 10 employees and no more than €2 million in annual turnover, are exempt. Check the rules in your country, for example on business.gov.nl for the Netherlands.
Beyond contrast
- Font size. Body text that is comfortable on a laptop can be tiny on a phone. Check your first screen on mobile.
- Text on photos. A headline over an image may pass the contrast check in one spot and fail in another. A dark overlay or a solid background behind the text fixes this.
- Thin fonts. Light font weights lose contrast, especially at small sizes.
- Line length. Very long lines on wide screens are tiring to read. Limit the width of text blocks.
- Too many styles. Several fonts, colours and sizes on one screen make a page look messy. Two or three fonts at most.
How it affects the first impression
Visitors don't measure contrast, but they notice when reading takes effort. It shows up as a lower score on Does it look professional?, and if the headline itself is hard to read, on Do I understand what this is?. On StayOrBounce, reviewers see your site on both a laptop and a phone screen, so problems that only appear on mobile show up too.