Enter a text and background color to see the exact WCAG contrast ratio and whether it passes AA or AAA.
🔒 Colors are checked locally and never uploaded.
WCAG contrast guidelines exist so text stays legible for people with low vision or color blindness. Enter any two CSS colors to see the exact ratio and instantly know whether the pairing is accessible for normal and large text at both AA and AAA levels.
See exactly how the pairing looks on real sized text before you commit to it.
Enter hex, rgb(), hsl() or named CSS colors in either field.
The contrast ratio is calculated entirely in your browser.
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold and larger).
WCAG AAA is stricter, requiring at least 7:1 for normal text and 4.5:1 for large text.
It uses the relative luminance of each color as defined by WCAG 2.1, then compares the lighter and darker luminance in a standard ratio formula.
Enter any valid CSS color, including hex codes, rgb(), hsl() or named colors like tomato.