Accessibility

Contrast Checker

Hover any text for its live WCAG contrast ratio with AA and AAA pass/fail badges. Handles semi-transparent colours, shadow DOM and text over gradients.

When you'd use it

• Check that body text meets 4.5:1 before shipping a new theme
• Find the placeholder or caption colour that quietly fails AA
• Verify a brand colour is usable for text, not just for backgrounds
• Test contrast on real content rather than a swatch in a design file

How to use Contrast Checker

1. Open Contrast Checker.
2. Hover any text to see its live ratio and AA / AAA badges.
3. Click to pin a reading while you compare against another element.
4. Use the reported foreground and background hex values to pick a fix.

Contrast Checker FAQ

What ratio do I actually need?

4.5:1 for normal body text and 3:1 for large text — 24px, or 18.66px if bold — to meet WCAG AA. AAA asks for 7:1 and 4.5:1 respectively.

How does it handle semi-transparent text?

It flattens the colour against the real background behind it by walking up the ancestors, so the ratio reflects what a user actually sees rather than the raw colour value.

What about text over an image or gradient?

It flags the reading as approximate. No single ratio is honest there — the contrast changes across the image, and the usual fix is a scrim or a solid panel behind the text.

Works well with