All Tools

WCAG Color Contrast Explained: AA vs AAA (With Examples)

Low-contrast text is hard to read for millions of people – and in bright sunlight, for everyone. WCAG sets clear minimums.

🌗Free Color Contrast Checker
WCAG AA/AAA contrast ratio for text and backgrounds.Open tool →

The numbers

Contrast ratio runs from 1:1 (no contrast) to 21:1 (black on white). WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and UI elements like buttons and input borders. AAA asks for 7:1 and 4.5:1.

Common failures

Light grey body text on white (#999 on #fff is only 2.8:1), white text on bright brand colours like yellow or light green, and placeholder text used as labels.

Fix without redesigning

Darken the text a few shades (#767676 is the lightest grey that passes AA on white), use your brand colour for large headings and buttons only, and add a darker overlay behind text on photos.

Check your colours

Pick text and background colours in the Color Contrast Checker to see the ratio and AA/AAA results instantly.

Frequently asked questions

Is WCAG a legal requirement?

Many accessibility laws and lawsuits in the US, UK and EU reference WCAG 2.1 AA.

Do logos need to pass?

No, logos are exempt.

What about dark mode?

The same ratios apply to light text on dark backgrounds.

🌗Free Color Contrast Checker
WCAG AA/AAA contrast ratio for text and backgrounds.Open tool →

More guides