WCAG Contrast Checker
betaThis free WCAG contrast checker measures the colour contrast between text and its background so your designs stay readable and accessible. Pick a text colour and a background colour to see the exact contrast ratio, a live preview, and whether it meets WCAG 2.1 AA and AAA for both normal and large text. Everything runs in your browser.
Check the colour contrast between text and its background against WCAG 2.1. Pick two colours and see the contrast ratio and whether it passes AA and AAA for normal and large text. Runs in your browser.
Normal text — the quick brown fox jumps over the lazy dog.
Large text sample
Large text is 18pt+ (or 14pt+ bold). AAA is the strictest level.
How to use WCAG Contrast Checker
- 1 Choose your text colour and background colour (swatch or hex).
- 2 Read the contrast ratio and the live preview.
- 3 Check the AA / AAA pass or fail badges for normal and large text.
- 4 Use Swap to try the reverse, and adjust until it passes.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.1 AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1 respectively. Large text is roughly 18pt+ (or 14pt+ bold).
How is the ratio calculated?
It uses the WCAG relative-luminance formula on both colours, then (lighter + 0.05) / (darker + 0.05), giving a value from 1:1 to 21:1.
Is anything uploaded?
No. The check runs entirely in your browser; your colours never leave your device.
What is the difference between AA and AAA?
AA is the common legal and practical baseline; AAA is the strictest level for enhanced accessibility. Aim for AA at minimum, AAA where you can.
Does it work offline?
Yes. PDFPowerHub is a PWA, so once loaded the checker works with no internet connection.