Home › Tools › WCAG Colour Contrast Checker
WCAG Colour Contrast Checker
Check text and background colour pairs against WCAG 2.1 AA and AAA contrast requirements.
The quick brown fox jumps over the lazy dog. Normal sample text at 16px.
About this tool
Low colour contrast is one of the most common accessibility failures on the web. The Web Content Accessibility Guidelines (WCAG 2.1) define minimum contrast ratios between text and its background so that people with low vision or colour-vision deficiency, and anyone reading in bright sunlight, can read your content.
This checker calculates the exact contrast ratio using the WCAG relative-luminance formula and tells you whether the pair passes: AA for normal text (4.5:1), AA for large text (3:1), AAA for normal text (7:1), AAA for large text (4.5:1) and AA for user-interface components and graphics (3:1). Large text means 18pt (24px) and above, or 14pt (about 18.7px) bold and above.
A live preview shows how the pair looks as real text. Accessible design also improves readability for every visitor and supports compliance with laws such as the ADA, EN 301 549 and India's RPwD Act guidelines.
How to use it
- Pick or type a foreground (text) colour and a background colour in hex.
- Review the ratio and the five pass/fail checks.
- Adjust colours until the level you need is met.
A worked example
Medium grey text #999999 on white measures 2.85:1, which fails AA for normal text. Darkening it to #767676 gives 4.54:1 and passes. One step lighter, #777777, scores 4.48:1 and fails. Try the three values in the checker to see the line for yourself. More tested replacements are in this colour guide.
Common mistakes
- Checking only the default state and not hover, focus, visited or disabled states.
- Testing text on a flat colour while the real page puts it over a photograph.
- Assuming that passing contrast makes a page accessible. It is only one requirement.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1.
Do logos and decorative images need to meet contrast rules?
No. Logos and purely decorative elements are exempt, but icons that convey meaning should reach 3:1.
Is the maximum ratio 21:1?
Yes, black on white produces 21:1.
Results are provided for general information. Please read our disclaimer.