WCAG colour contrast: requirements and how to test it

Weak colour contrast is one of the most common – and most easily fixed – barriers on the web. Text that sits too pale against its background is hard or impossible to read for people with low vision, with a colour vision deficiency, or simply for anyone using a screen in bright sunlight. The WCAG set concrete, measurable thresholds for this. This article explains the requirements, what counts as “large text”, which exceptions apply, and how to test contrast properly. It is part of our WCAG guide.

What colour contrast means – and why it counts

Contrast is the difference in brightness between the foreground (text) and the background, expressed as a ratio from 1:1 (no difference) to 21:1 (black on white). The higher the value, the more readable the text.

It affects a lot of people: those with low vision, those with colour vision deficiencies, older eyes – and ultimately anyone using a device in bright ambient light. Because contrast can be calculated unambiguously, it is one of the few points that automated tools can check reliably – more on that in how to test accessibility.

The WCAG requirements in detail

The relevant bar for the EAA is level AA (see WCAG conformance levels). It requires:

• Normal text: at least 4.5:1.
• Large text: at least 3:1.
• Non-text contrast: at least 3:1 for user interface components and meaningful graphics – that is, things like the borders of input fields, icons, focus indicators, or the distinguishing colours in a chart (WCAG 1.4.11).

The higher level AAA requires 7:1 for normal text and 4.5:1 for large text – as a rule it is not a blanket requirement, but it is worth aiming for in places.

What counts as “large text”

The line is clearly defined: large text is text from 18 points (about 24 pixels), or from 14 points bold (about 19 pixels bold). Anything smaller counts as normal text – and then the stricter value of 4.5:1 applies.

Exceptions

Not everything is subject to the contrast requirements:

• Logos and brand names in their designed form.
• Purely decorative text and elements with no informational value.
• Inactive (disabled) user interface components.
• Incidental text that is part of an image but not the actual content.

Testing contrast properly

To check contrast, a contrast checker is all you need – for example our contrast checker: you enter the colour values of the foreground and background and get the ratio back. Many tools, including the developer tools built into browsers, show the value directly. Because contrast is unambiguously calculable, it is the showcase discipline of automated testing.

You have to check manually wherever the background is not uniform: text over gradients or images, where the contrast varies across the area; text with transparency; and hover and focus states. For cases like these, the bare calculated value is not enough.

Common contrast mistakes

A few patterns keep coming up:

• Light-grey body text on white – it looks “elegant”, but it fails on readability.
• Warm or light accent colours (orange, yellow, light green) used for small text. Colours like these belong on areas or large elements, not in small type.
• Placeholder text in form fields that is too pale.
• Text over busy background images with no darkening layer.
• White text on lightly coloured buttons.

This guide is not legal advice. For a binding assessment of your specific case, consult a qualified professional.