Contrast Checker

About the contrast checker

Check the contrast ratio between a text colour and a background colour and see whether it passes WCAG AA and AAA for normal and large text. It uses the WCAG 2 relative luminance formula and shows a live sample of your colours together.

How to use it

1. Set the foreground (text) colour with the picker or a hex code.
2. Set the background colour the same way.
3. Read the contrast ratio and check the sample text.
4. Look at the four pass or fail results and adjust colours until the level you need passes.

Questions

What contrast ratio does WCAG AA require?

4.5:1 for normal text and 3:1 for large text. AAA raises this to 7:1 for normal text and 4.5:1 for large text.

What counts as large text in WCAG?

At least 18 point (about 24px) regular, or 14 point (about 18.66px) bold.

Is 4.5:1 contrast enough?

It meets AA for body text, the level most accessibility policies and laws reference. AAA's 7:1 is better for readability but is not usually required across a whole site.

Does contrast matter for placeholder text and icons?

Yes. Placeholder text should meet the text requirement, and WCAG asks for at least 3:1 for icons and other meaningful non-text elements.