Make sure your text is readable for everyone. Enter a text colour and a background colour to see the exact WCAG contrast ratio and whether it passes the AA and AAA thresholds for normal and large text. Great for accessibility reviews and design systems.
CSP, HSTS and X-Frame-Options harden your site.
Use Cache-Control to speed up repeat visits.
Verify headers and pages render well on small screens.
Make sure your text is readable for everyone. Enter a text colour and a background colour to see the exact WCAG contrast ratio and whether it passes the AA and AAA thresholds for normal and large text. Great for accessibility reviews and design systems.
Enter a HEX value or use the colour picker for the text.
Do the same for the background — the ratio updates live.
See which WCAG levels pass and adjust the colours if needed.
| Foreground | Background | Ratio |
|---|---|---|
| #000000 | #ffffff | 21:1 |
| #767676 | #ffffff | 4.54:1 |
| #777777 | #ffffff | 4.48:1 |
| #ffffff | #10b981 | 2.5:1 |
Small changes matter: #767676 passes AA, while #777777 just misses it.
It is completely free, private and requires no signup.
Use the tool nowA number from 1:1 to 21:1 that measures the difference in luminance between two colours. Higher means more readable. Black on white is the maximum 21:1.
For normal text, AA needs 4.5:1 and AAA needs 7:1. For large text (18pt+ or 14pt bold) AA needs 3:1 and AAA needs 4.5:1.
Indirectly. Readable text improves user engagement and accessibility, which search engines reward. It is also a legal requirement in many countries.
No. Plenty of branded colours pass AA. Just check the ratio and darken or lighten as needed.
Explore the whole collection — no signup, 100% free & private.