Definition: A contrast ratio measures the difference in lightness between two colours, usually text and its background. The scale runs from 1:1 (the same colour) to 21:1 (black on white). Under WCAG 1.4.3, body text needs at least 4.5:1 and large text 3:1 [1].
German: Kontrastverhältnis · Also: colour contrast · Last reviewed: 27 September 2026
Check your own colours with the contrast checker.
How the number is calculated
WCAG computes each colour's relative luminance, a value between 0 (black) and 1 (white). The ratio is (lighter + 0.05) divided by (darker + 0.05) [2]. Hue plays no part, only lightness. That is why a vivid red on green can look colourful and still have almost no contrast.
The values that apply
| Content | Level AA | Level AAA |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (18 pt, or 14 pt bold – roughly 24 px or 18.66 px) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 (1.4.11) | – |
Logos, pure decoration and text in inactive controls are exempt [1].
Examples
- Black on white: 21:1 – the highest possible value.
- Grey
#595959on white: about 7:1 – enough even for Level AAA. - Grey
#767676on white: about 4.5:1 – just enough for body text. - Grey
#777777on white: 4.48:1 – just short, although it looks almost the same.
Nobody can see the difference between the last two by eye. That is why you measure rather than guess – once per colour pair in the design system, not again on every page.
Common mistakes
- Light grey text on white for hints, placeholders or footers.
- Text on photos with nothing behind it to darken the image.
- Checking the default state only: hover, focus and error messages often have colours of their own.
- Rounding luck: 4.48:1 is not 4.5:1 – the value is not rounded up.
How Reviseberg handles it
Reviseberg measures contrast with the axe-core rule color-contrast on every page, at 1280 px and again at 360 px wide, because mobile stylesheets can change colours. When text sits on an image or gradient, the measurement cannot decide; those spots go to a separate list of potential issues and never count as a pass.
Related terms
Non-text contrast · Focus indicator · Screen magnifier · Automated accessibility testing