Color Contrast Checker
Check the WCAG contrast ratio between text and background colors and see if it passes AA/AAA.
This contrast checker measures the WCAG contrast ratio between a text colour and its background and tells you instantly whether it passes accessibility standards. Enter two hex colours and it shows the exact ratio plus pass/fail for AA and AAA at both normal and large text sizes, with a live sample so you can see the result.
Good contrast helps everyone — users with low vision, colour blindness, older eyes and anyone reading on a phone in sunlight — and it is increasingly a legal requirement. If you only remember one number, make it 4.5:1, the AA minimum for body text.
Frequently asked questions
What contrast ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA is stricter at 7:1 and 4.5:1. Aim for at least 4.5:1 for body text.
How is contrast ratio calculated?
It compares the relative luminance (brightness) of the two colours, giving a ratio from 1:1 (identical) to 21:1 (black on white).
Why does contrast matter for SEO and ads?
Poor contrast hurts usability and accessibility, which affects engagement and can be a compliance issue. Readable text keeps visitors on the page.
My brand colour fails — what now?
Darken the text or background until it passes. Generate an on-brand darker shade with a shades and tints tool rather than jumping to pure black.