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.
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.