What sufficient contrast is
Contrast is the difference in lightness between text and background. Normal text needs at least 4.5:1 and large text 3:1, so that people with low vision can read it too.
How it works
The contrast ratio compares the lightness of two colours. It runs from 1:1 (the same colour) to 21:1 (black on white). Hue plays no part, only lightness as the eye perceives it.
Pale grey text on white looks elegant but is hard to read for many people: with low vision, with age, on a cheap screen or outside in the sun. Some examples on a white background:
#999999reaches 2.8:1 and is too pale for normal text.#767676reaches 4.5:1, the lightest grey that still passes.#595959reaches 7:1.
WCAG 2.2 sets the values in success criterion 1.4.3. In practice the European standard EN 301 549 is the yardstick for the European Accessibility Act and for public-sector websites; it adopts the WCAG 2.1 criteria at level AA, 1.4.3 among them.
What matters
- 4.5:1 for normal text. That covers body text, links, labels and text in buttons.
- 3:1 for large text. Large means from 24 pixels, or bold from 18.7 pixels (18 and 14 points).
- Text on images and gradients. Here contrast can't be measured automatically; it has to be enough at the least favourable point behind the text. A semi-transparent panel behind the text helps.
- Exceptions. Logos, purely decorative text and disabled controls don't have to reach the ratio.
- More than text. For the borders of input fields, icons and focus outlines, success criterion 1.4.11 asks for at least 3:1. This check doesn't measure that, but it belongs to the same topic.
How to set it up
Colours are set by the design, ideally in one place: the design system, the theme's colour settings or CSS variables. Change them there and they change everywhere. For each colour that is too pale, the report suggests one with the same hue that is just dark enough (on a dark background: light enough). Agree the change with whoever owns the design, and afterwards check states such as hover and placeholders too. Individual spots in the content, such as coloured text set in the editor, are changed in your CMS.