WCAG Contrast Checker

Check the contrast ratio between a text colour and its background against WCAG AA and AAA. It runs in your browser.

How to use it

1. Enter the text colour and the background colour as HEX codes.
2. Read the ratio and the pass or fail result for each level.
3. Darken or lighten one colour until the level you need passes.

The thresholds

• AA: 4.5:1 for normal text, 3:1 for large text.
• AAA: 7:1 for normal text, 4.5:1 for large text.

Large text means at least 24 px, or 18.66 px if bold.

Examples

• #777777 on white is 4.48:1, a narrow miss for AA on normal text (large text passes).
• #595959 on white is 7:1, passing every level.
• Black on white is 21:1, the maximum.

Good to know

The ratio uses the formula from the WCAG specification: (lighter luminance + 0.05) ÷ (darker luminance + 0.05). It tests colour pairs only. It does not judge thin fonts, small sizes, text over images or gradients, or hover and focus states, and meeting the ratio is part of accessibility, not the whole of it. Logos and purely decorative text are exempt, but icons and borders that carry meaning need 3:1.

See the guide and the glossary entry.

FAQs