This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung →
Accessibility
What colour contrast is required for text on websites?
Normal text needs a contrast ratio of at least 4.5:1 against the background; large text — roughly 24 pixels or larger, or bold from roughly 18.7 pixels — needs at least 3:1. These thresholds come from the international WCAG standard. They ensure that people with declining eyesight can also read your texts — and so can every visitor checking their phone in sunlight.
The contrast ratio, explained in plain language
The contrast ratio describes how strongly text colour and background colour differ in brightness. Black on white reaches the maximum value of 21:1 and reads effortlessly. The fashionable light grey on white often sits below 3:1 — for people with age-related declining eyesight, such text blurs into a grey area. It's not only visually impaired people who are affected: the customer looking up your opening hours on their phone in bright sunlight also struggles with weak contrast. The threshold of 4.5:1 for normal text and 3:1 for large text is the compromise set out in the standard between design freedom and reliable readability.
How our measurement engine measures contrast — even on images
axe-core handles the basic measurement: it calculates the contrast ratio between text and background colour for the texts on your page. For text on photos or gradients, no tool can simply read off the background — that's exactly where our measurement engine goes further: it briefly makes the text invisible, photographs the spot in the browser, calculates the brightness of the actual background pixel by pixel, and derives the real contrast against the text colour from that. That turns "can't be determined" into a solid judgment. The report documents every failed spot with the measured value, the required threshold, and a supporting screenshot — so you can see exactly which piece of text is affected.
Improving contrast without sacrificing the design
Good contrast doesn't force a black-and-white design. Usually it's enough to darken the text colour by a few shades — a light grey becomes a medium charcoal that keeps the same restrained look while staying readable. For text on photos, tried-and-tested tricks help: a semi-transparent dark area behind the text, a gradient at the bottom edge of the image, or moving the text to a calmer part of the picture. As a rule, you don't need to change your brand colours for this — it's often enough to use them for large-area backgrounds and choose a darker or lighter shade of the same colour family for the text.
- Check the grey text on your website first — footers, image captions, and form hints most often fall below the threshold.
- Ask your agency to check all text colours against the 4.5:1 and 3:1 thresholds and document the values.
- Underlay text on photos with a semi-transparent dark area, instead of leaving readability up to the image.
- View your page on your phone in bright daylight — whatever fails there always fails for visitors with impaired vision.
- Fix the checked colour combinations in your style guide, so new pages adopt them.
FAQ
What does a contrast ratio of 4.5:1 mean?
It means the lighter area is four and a half times as bright as the darker one. Black on white reaches 21:1, white on white 1:1. The WCAG standard requires at least 4.5:1 for normal text and at least 3:1 for large text, so that text stays readable even with declining eyesight.
From when does text count as large under the contrast rule?
From roughly 24 pixels in font size, or from roughly 18.7 pixels for bold text. For such large text, the milder contrast ratio of 3:1 is enough, because larger letters stay recognisable even with weaker contrast. Our measurement engine automatically takes font size and weight into account for every single measurement.
How is contrast measured for text on a photo?
Our measurement engine briefly makes the text invisible, photographs the spot in the browser, and calculates the background's brightness from the individual pixels. Against the text colour, that yields the real contrast ratio. The report documents failed spots with the measured value and a supporting screenshot.
Do I need to change my brand colours because of contrast?
As a rule, no. It's usually enough to use the brand colour for large areas and choose a darker or lighter shade of the same colour family for text. Many well-known brands take exactly this approach: recognisability is preserved, and the text reaches the required thresholds.