WCAG Contrast Checker
Check if your text colour is readable on its background.
Using toolbook means you agree to our Terms and Privacy Policy.
Large text sample (24px+)
Normal text sample — the quick brown fox jumps over the lazy dog.
Your files stay on your device
How to use it
Enter a text colour and a background colour to see their contrast ratio, with clear pass or fail results for WCAG AA and AAA accessibility levels.
Light grey text on a white background might look stylish, but lots of people can’t read it. This checks whether your colours have enough contrast to be readable for everyone.
Enter a text colour and a background colour, or pick them with the swatches. You get a contrast score from 1:1 (invisible) to 21:1 (black on white), plus pass or fail badges.
Aim for AA — it’s what most accessibility checks and laws ask for. That means at least 4.5:1 for normal text, or 3:1 for big text, buttons, and icons. AAA is the stricter, gold-standard level.
FAQ
What contrast do I need to pass AA?
At least 4.5:1 for normal text, or 3:1 for large text (24px and up, or 18.66px bold).
What’s the UI components badge?
It checks things like button outlines, form borders, and icons, which need at least 3:1 to be seen clearly.
Which colour formats work?
HEX, rgb(), and hsl(). You can also use the colour swatch next to each box.
How it worksFor the curious
WCAG contrast is the ratio between the relative luminance of two colours, from 1:1 to 21:1. Red, green, and blue are weighted differently because the eye is most sensitive to green.
AA requires 4.5:1 for normal text and 3:1 for large text (24px+, or 18.66px+ bold). AAA requires 7:1 and 4.5:1. WCAG 2.1’s non-text contrast rule (1.4.11) sets 3:1 for UI components such as button borders, form field outlines, and meaningful icons.
Both fields accept hex, rgb(), or hsl(). Parsing, luminance, and threshold checks all run in this page.