Contrast Checker

Overview

Colour pairs that look elegant to a designer can be quietly unreadable to a large share of visitors — older eyes, tired eyes, eyes looking at a phone in bright sunlight. The contrast ratio turns that vague worry into a number you can act on. This checker does the full WCAG calculation for any foreground and background pair, then translates the number into the four verdicts that matter: AA and AAA, for normal text and for large text.

The preview panel is deliberately plain. It shows a heading, a paragraph and a line of small print in exactly your two colours, because a ratio alone cannot tell you how a combination feels to read. Pair the number with your own eyes and you get both halves of the decision: what the standard requires, and what the reading experience is actually like.

What is contrast ratio?

A contrast ratio compares the relative luminance — roughly, the perceived brightness — of two colours, and expresses it as something like 7:1. Pure black on pure white gives the maximum, 21:1. Identical colours give 1:1, which is to say invisible text. Every real pairing lives somewhere between those extremes, and most of the interesting design arguments happen between 3:1 and 8:1.

The WCAG guidelines (the Web Content Accessibility Guidelines, maintained by the W3C) set the thresholds the badges on this page use. Level AA is the standard most laws and procurement rules point to: 4.5:1 for normal text, 3:1 for large text. Level AAA is the stricter tier: 7:1 for normal text and 4.5:1 for large text. "Large" has a specific meaning too — about 24 pixels and up, or about 19 pixels if the text is bold.

Features

• Exact WCAG maths: relative luminance is computed per the specification, including the gamma correction most rough calculators skip.
• Four clear verdicts: AA normal, AA large, AAA normal and AAA large, each marked PASS or FAIL in plain sight.
• Two ways to pick: a visual colour well or a typed HEX code for each colour, kept in sync.
• Swap button: flip text and background in one click — surprisingly often the reverse pairing reads better.
• Live text preview: heading, body and small print rendered in your exact colours as you change them.
• Big honest ratio: the number itself, to two decimal places, not a rounded star rating.
• Private by design: the whole calculation is arithmetic on your machine; nothing is uploaded.

Benefits

• Accessibility without the guesswork: know before you ship whether your text meets the standard you are aiming for.
• Fewer redesign surprises: catch a failing pair at the sketch stage instead of after an audit.
• Defensible decisions: "this pair measures 5.2:1" ends arguments that opinions cannot.
• Better reading for everyone: contrast that suits low-vision readers also suits glare, cheap screens and tired eyes.
• Instant iteration: nudge a colour, watch the badges respond, stop the moment it passes.

Who can use it

Designers choosing brand palettes, developers handed a colour scheme and told to "make it accessible", content teams checking that last year's template still holds up, and site owners who simply want their words read. It is also a kind first tool for students of accessibility: the standards stop being abstract the moment you watch a badge flip from FAIL to PASS because you darkened a grey by two steps.

How to use

1. Set the text colour with its picker, or type its HEX code.
2. Set the background colour the same way.
3. Read the big ratio in the middle of the panel.
4. Check the four badges for the level (AA or AAA) and text size you care about.
5. If a badge fails, darken or lighten one colour in small steps until it passes — then confirm in the preview that the pair still looks like your design.
6. Use Swap to test the reverse pairing before you settle.

Frequently asked questions

Conclusion

Readable text is not a style preference; it is the whole job of text. Two colours, one honest number, four clear verdicts — check your pairings here before they ship, and nobody has to squint at your words again.