WCAG Contrast Checker

What this tool does

This tool measures the contrast between a text colour and a background colour and grades it against the Web Content Accessibility Guidelines (WCAG) 2.1. You pick a foreground colour and a background colour, and it instantly computes the contrast ratio — a single number between 1:1 and 21:1 — using the official WCAG relative-luminance formula. It then shows clear Pass or Fail badges for the four combinations that matter: AA normal text, AA large text, AAA normal text and AAA large text. A live preview panel renders sample body-size and heading-size text in your exact colours so you can see the result, not just read a score.

Use cases

Contrast checking comes up across almost every visual discipline. A web designer choosing button or link colours needs to know the label will stay legible. A developer implementing a design system can verify token pairs — text-on-surface, text-on-accent — before they ship. During an accessibility audit, contrast is one of the first things a reviewer measures, because failing text is one of the most common and most fixable barriers on the web. Brand and marketing teams use it to confirm that a logo lockup or a campaign colour palette will still read on coloured backgrounds. Even illustrators and slide designers reach for it to make sure captions and annotations remain visible over busy artwork.

How to use it

1. Set the text (foreground) colour using the native colour picker or by typing a hex value such as #191C23 into the field beside it.
2. Set the background colour the same way.
3. Read the large contrast ratio at the top — for example 7.42:1.
4. Check the four WCAG grading rows below it. Each shows Pass or Fail with its required minimum, so you know exactly which levels you meet.
5. Use the live preview to see normal and large sample text in context.
6. Click Swap colours to flip foreground and background — useful when you are unsure which should be which, since contrast ratio is symmetric but the visual result is not.

Tips

If a pairing fails, you rarely need to change both colours. Darkening the text or lightening the background a little is often enough to clear the next threshold — adjust one channel at a time and watch the ratio climb. Pure black on pure white scores the maximum 21:1, but that can feel harsh; a very dark grey on an off-white background still passes AAA while being gentler to read. Be careful with mid-tone greys for secondary text and placeholders — they slip below 4.5:1 easily. Remember that the large-text allowance only applies if the text really is large and, where relevant, bold; do not rely on it for body copy. When designing for older readers or low-light conditions, treat AAA as your target rather than AA.

Related techniques

Contrast is only one strand of colour accessibility. Pair this checker with a colour-blindness simulator to confirm that colour-coded information stays distinguishable for people with protanopia, deuteranopia or tritanopia — two colours can have fine contrast yet still be confusable. A colour converter helps you express a passing colour in the format your stylesheet needs, and a tints-and-shades generator lets you derive a slightly darker or lighter variant that nudges a borderline pairing over the line. Treat all of these as quick, local checks that catch problems early — long before a formal audit — and bake them into your design process rather than leaving them to the end.