Contrast Checker
Check the contrast ratio between text and background colours against WCAG 2.2 AA and AAA, with a live sample and a suggested fix.
Free · No upload · 100% on your device
How to use Contrast Checker
- Choose the settings in the side panel.
- The result updates instantly. Select “Check” for a fresh one.
- Copy the result or download it.
Private by design. Everything you type, open or record is processed in this browser tab and is never uploaded to KittySuite.
About Contrast Checker
WCAG asks for 4.5:1 for normal text and 3:1 for large text (24 px, or 18.7 px bold) and interface parts such as icons and borders. Translucent text is blended over the background first. If a pair fails, a darker or lighter version of your text colour that passes AA is suggested.
Everything is calculated in this browser tab and nothing you enter is sent anywhere. It keeps working offline once the page has loaded.
Contrast Checker: frequently asked questions
How do I check if my colours have enough contrast?
Enter the text and background colours. The contrast ratio is checked against WCAG 2.2 AA and AAA with a live sample.
What ratio do I need?
4.5:1 for normal text and 3:1 for large text (24 px, or about 18.7 px bold) and interface parts such as icons and borders.
What if my colours fail?
A darker or lighter version of your text colour that passes AA is suggested.
Does it handle transparent colours?
Yes. Translucent text is blended over the background before the ratio is calculated.