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.
Examples
Grey text on white
body { color: #999999; background: #ffffff; } /* 2,8:1 */body { color: #595959; background: #ffffff; } /* 7,0:1 */The limit for normal text is 4.5:1, for large text from 24 pixels 3:1. The value is in the test report per reference.
White lettering on brand colour
.knopf { color: #fff; background: #5aa9ff; } /* 2,5:1 */.knopf { color: #fff; background: #1a5fb4; } /* 6,3:1 */- 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.
