What contrast ratio does WCAG require?

At level AA, 4.5:1 for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1.

What counts as large text?

At least 18 point, or 14 point bold — roughly 24 pixels, or 18.66 pixels bold, at default browser settings.

Does placeholder text need to meet the threshold?

Yes. It is text presented to the user. Low-contrast placeholders are among the most common failures, and placeholders are a poor substitute for labels regardless.

Glossary

Contrast ratio

Contrast ratio is a number between 1 and 21 expressing the difference in relative luminance between two colours — in practice, text and the background behind it. WCAG sets thresholds at level AA of 4.5 to 1 for normal text and 3 to 1 for large text, with level AAA raising them to 7 and 4.5. It is a purely mathematical measure of luminance, which makes it reliably testable and also blind to several things that affect real legibility.

The thresholds

Level AA: 4.5:1 for body text, 3:1 for large text. Large means at least 18 point, or 14 point bold — roughly 24 and 18.66 pixels at default settings.

Level AAA: 7:1 and 4.5:1 for the same two categories.

A separate criterion requires 3:1 for the visual boundaries of user interface components and for graphics needed to understand content, which covers input borders, icons and chart elements.

Text that is purely decorative, or part of a logo, is exempt.

Disabled controls are also exempt from the text contrast requirement, which is why a greyed-out button legitimately falls below the threshold.

How the number is produced

Each colour's relative luminance is computed from its red, green and blue components with a gamma correction and fixed weightings.

The ratio is the lighter luminance plus 0.05, divided by the darker plus 0.05. The offsets keep the scale bounded, which is why pure black against pure white is 21:1 rather than infinite.

Hue plays no part beyond its contribution to luminance, which is why two colours that look very different can have a poor ratio.

Transparency must be resolved first: the ratio depends on the colour actually composited, which is why a check has to look at rendered pixels rather than at declared values.

What the measure misses

Font weight and size beyond the large-text boundary. Thin text at 4.5:1 is genuinely harder to read than heavy text at the same ratio.

Text over an image or a gradient, where the ratio varies across the text and the worst case is what matters.

Ambient conditions: a ratio comfortable indoors can be unusable in sunlight.

The formula's known weakness with certain colour pairs, which is why the accessibility community has been developing a perceptual replacement. Until it is standardised, the current formula is the criterion.

How to measure it

The browser's element inspector shows the computed ratio for a text node and indicates whether it meets AA and AAA.

Automated tools test every text node on a page and report the failures with their ratios.

Text over images, video and gradients is where automated results are least reliable, and those cases are worth checking by eye.

Check hover, focus and disabled states as well: a control that passes at rest frequently fails in one of them.

Test dark mode separately where the site offers one. A palette inverted by a media query is a second set of colour pairs that nobody measured.

Frequently asked questions

What contrast ratio does WCAG require?: At level AA, 4.5:1 for normal text and 3:1 for large text. Level AAA raises these to 7:1 and 4.5:1.
What counts as large text?: At least 18 point, or 14 point bold — roughly 24 pixels, or 18.66 pixels bold, at default browser settings.
Does placeholder text need to meet the threshold?: Yes. It is text presented to the user. Low-contrast placeholders are among the most common failures, and placeholders are a poor substitute for labels regardless.

Sources

VeriFixScan crawls a site and applies its checks to every page it reaches, keeping the evidence behind each finding. Scanning one website is free.

Scan a website