How to Check Color Contrast for WCAG Accessibility

To check contrast, enter a text color and a background color into the WCAG Contrast Checker. It shows the contrast ratio and whether it passes WCAG 2 levels AA and AAA for normal and large text.

How to use the WCAG Contrast Checker

1. Enter the text color.
2. Enter the background color.
3. Read the contrast ratio.
4. Adjust colors until they pass the level you need.

Worked example

Black on white has a ratio of 21:1, the maximum. Light grey text on white may fall below 4.5:1 and fail AA for normal text.

Tips and common mistakes

• WCAG AA needs at least 4.5:1 for normal text and 3:1 for large text.
• AAA needs 7:1 for normal text and 4.5:1 for large text.
• Do not rely on color alone to convey meaning.

Frequently asked questions