Colour Contrast Checker
Make sure your text and buttons are readable for everyone — and fix colours that fail.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to check colour contrast
- Click Text or Background and pick or paste a colour.
- Read the ratio, the AA / AAA results and APCA, and see the live preview.
- Apply a suggested fix, or check a whole palette in the grid.
About Contrast Checker
Check text and background colours against WCAG 2.2 AA and AAA and the new APCA.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Accessible websites and apps (WCAG / ADA / EN 301 549)
- Brand colours for buttons and links
- Dark-mode and data-visualisation colours
Tip: Set the preview to your real font size and weight — large or bold text needs less contrast.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text (24 px, or 18.66 px bold) and for UI parts like borders and icons. Level AAA needs 7:1 and 4.5:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm proposed for WCAG 3. It gives an Lc value that accounts for font size and dark mode better than the 2.x ratio. Lc 75+ suits body text, 60+ content text, 45+ headlines.
My colours fail — what now?
Use “Fix it”: it finds the closest text or background colour (same hue, adjusted lightness) that passes AA or AAA. Click one to apply it.
Can I check a whole palette?
Yes — switch to “Palette grid”, list your colours and see every text/background combination with its ratio and grade.
Does contrast matter for icons and buttons?
Yes. WCAG asks for at least 3:1 for user interface parts and meaningful graphics, such as icons, input borders and focus outlines.