Overview
Colour pairs that look elegant on a designer's screen can be quietly unreadable to a large share of visitors — older eyes, tired eyes, eyes squinting at a phone in bright sunlight. The contrast ratio turns that vague worry into a number you can act on. This checker performs 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 a 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 possible ratio, 21:1. Two 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
- Full WCAG arithmetic — relative luminance is computed per the specification, including the gamma correction that rough calculators skip.
- Four verdicts, plainly marked — AA and AAA for normal and large text, each shown as a clear PASS or FAIL.
- Two ways to choose colours — a visual colour well or a typed HEX code for each colour, kept in sync.
- One-click swap — flip text and background instantly; the reverse pairing often reads better.
- Live reading preview — heading, body text and small print rendered in your exact colours as you adjust them.
- Ratio to two decimals — the precise number itself, not a rounded score or star rating.
- Private by design — every calculation is arithmetic on your machine; nothing is uploaded or stored.
Benefits
- Know before you ship — confirm your palette meets the standard you are aiming for before launch day.
- Catch failures early — find a failing pair while sketching, not after an accessibility audit flags it.
- Settle design debates — 'this pair measures 5.2 to 1' ends arguments that taste alone cannot.
- Better reading for everyone — contrast that suits low-vision readers also survives glare, cheap screens and tired eyes.
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
- Set the text colour with its picker, or type its HEX code.
- Set the background colour the same way.
- Read the large ratio shown in the middle of the panel.
- Check the four badges for the level (AA or AAA) and text size you care about.
- 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.
Frequently asked questions
What ratio should I aim for?
For body text, treat AA's 4.5:1 as the floor and AAA's 7:1 as a comfortable target. Headings and other large text can live happily at 3:1 under AA. If a pair only just passes, remember that real screens and real lighting are less kind than this page, so a little headroom is wise.
Why does a pair that looks fine to me fail?
Your eyes are not the test audience. Contrast perception drops with age, low vision, glare and poor displays, and it also drops for thin fonts even at large sizes. The ratio measures the colours, not the viewer — which is precisely the point of having a standard at all.
Does font size or weight change the result?
The ratio itself never changes, but the threshold does: large text (about 24 pixels, or 19 pixels bold) is allowed a lower ratio because bigger letterforms are easier to resolve. Delicate, thin typefaces deserve extra headroom beyond the minimums.
What about text over photos or gradients?
WCAG ratios assume flat colours. Over an image, the honest approach is to test against the lightest and darkest parts of the image behind the text — or add a solid backdrop or shadow so the pairing becomes measurable. This checker handles the flat-colour case properly.
Is AA compliance a legal requirement?
It depends on your country and sector. Many accessibility laws and public procurement rules reference AA, which is why it is the level most organisations aim for. AAA is a target for those who want to go further, but it is rarely a legal mandate.
Is anything I test uploaded or stored?
No. The entire calculation runs in JavaScript in your browser. You can disconnect from the internet after the page loads and the checker keeps working exactly the same.
Conclusion
A readable palette is a decision, not a hope. With the exact ratio, four honest verdicts and a live preview of real text, you can choose colours that satisfy both the standard and your own eyes — and move on to the rest of the design with confidence.