What contrast ratio do I need?

At least 4.5:1 for normal text and 3:1 for large text to meet WCAG level AA. Level AAA asks for 7:1 and 4.5:1.

What counts as large text?

Text of at least 18 point (24 CSS pixels), or at least 14 point (about 18.7 pixels) if it is bold.

Do icons and buttons need to meet contrast too?

Yes. Icons, input borders and focus indicators need at least 3:1 against what surrounds them under WCAG 2.1.

Why does yellow fail on white when it looks so bright?

Contrast depends on luminance, not vividness. Yellow is almost as luminous as white, so the pair scores about 1.1:1. Pure blue has very low luminance and scores about 8.6:1 on white.

Are logos required to meet contrast?

No. Logos and brand names in a logo are exempt, as are disabled controls and purely decorative elements.

Contrast Checker - WCAG AA & AAA Color Contrast Test

Check colour contrast against WCAG

Pick a text colour and a background colour to see their contrast ratio and whether they pass the Web Content Accessibility Guidelines at level AA and AAA, for normal and large text. A live preview shows real text in your colours, and Swap reverses them in one click.

The thresholds

AA, normal text: at least 4.5:1. This is the level most laws and accessibility policies refer to.
AA, large text: at least 3:1.
AAA, normal text: at least 7:1.
AAA, large text: at least 4.5:1.

Large text means at least 18 point, which is 24 CSS pixels, or 14 point bold, about 18.7 pixels. Most body text is smaller than that, so 4.5:1 is the number to design for.

How the ratio is calculated

WCAG converts each colour to its relative luminance, a measure of perceived brightness where pure black is 0 and pure white is 1, then divides the lighter value plus 0.05 by the darker value plus 0.05. Ratios run from 1:1 for identical colours to 21:1 for black on white. The formula weights green far more than blue, because our eyes are much more sensitive to green light. That is why pure yellow almost vanishes on white, at about 1.1:1, while pure blue, which looks just as vivid, passes easily at about 8.6:1.

Beyond body text

Icons, input borders and focus outlines need 3:1 against their surroundings under WCAG 2.1. The large text AA result tells you whether a pair reaches that.
Disabled controls and logos are exempt, but placeholder text is not when it carries information people need.
Hover and focus states have to pass too. A link that becomes lighter on hover can fail even when its normal state passes.
Text on images and gradients should be checked at the lightest point behind it. On a gradient, test both ends.

Fixing a pair that fails

Change lightness, not hue. Darkening the text or lightening the background a few steps usually fixes a failing pair without changing the look of a brand. If the brand colour itself is too light for text on white, keep it for large headings, buttons with dark text, or decorative elements, and use a darker shade of the same hue for body text and links.

Why it matters

Low contrast affects far more people than the term accessibility suggests: anyone with low vision, older readers, people on a phone in sunlight, and anyone with a dim or cheap screen. Contrast requirements also appear in law. The European Accessibility Act, which has applied since June 2025, and accessibility rules in many other countries point to WCAG level AA.