Overview
Readable text is not a preference — it is the difference between a site everyone can use and one that quietly excludes people with low vision, ageing eyes, or a phone in bright sunlight. The Web Content Accessibility Guidelines draw the line precisely: 4.5:1 for normal text, 3:1 for large text. Either your pairing clears it or it does not.
This checker removes all judgement calls. It runs the official relative-luminance formula — the same arithmetic auditors use — and reports the exact ratio with clear verdicts. Beside the numbers, a live preview renders real paragraphs in your colours as you drag either picker, because ratios are abstract and reading is not. What passes on paper but strains in the preview still deserves a second look.
What is a contrast ratio, really?
Contrast ratio measures how distinguishable two colours are, on a scale from 1:1 (identical, invisible text) to 21:1 (black on white, maximum). The WCAG formula does not compare the colours naively: it first converts each to relative luminance — perceived brightness — weighting green heavily and blue lightly, mirroring how human vision actually works. Two colours that look equally 'strong' can have wildly different luminance.
The thresholds exist because research ties them to real reading ability. At 4.5:1, most people with moderately low vision can read normal text; 3:1 suffices for large text because bigger letterforms are inherently more legible. These are floors, not goals — higher is always kinder.
Features
- Exact ratio from the official WCAG relative-luminance formula.
- AA and AAA verdicts for normal and large text, as clear pass/fail.
- Live text preview — real paragraphs in your colours, updating as you adjust.
- Synced inputs: colour pickers plus HEX typing, both always in agreement.
- One-click swap tests the reverse pairing instantly.
- Perceptually honest — the formula weights colours like human vision does.
- Fully local — the arithmetic runs on your device.
Benefits
- Settle debates with data. The ratio ends 'but it looks fine' arguments.
- Design inclusively for low vision, ageing eyes and sunlight glare.
- Audit before launch, not after the complaint email.
- Explore freely: swap and drag to find pairings that pass beautifully.
Who can use it
Designers proving their palettes are readable, developers implementing designs faithfully, product teams facing accessibility audits or legal requirements, bloggers choosing theme colours, and anyone who has ever strained at light-grey text on a white background. If humans read it, check it.
How to use
- Set your text (foreground) colour via picker or HEX.
- Set your background colour the same way.
- Read the exact ratio and the AA/AAA verdicts for both text sizes.
- Study the live preview — does it feel as readable as the verdict claims?
- Hit swap to test the reverse, or drag either colour until it passes.
Frequently asked questions
My design passes but still feels hard to read. What gives?
Trust the feeling. The ratio is a minimum threshold measured under ideal conditions — thin fonts, small sizes and long paragraphs all demand more. Many designers aim well above 4.5:1 for body text, treating the standard as the floor and comfort as the target.
Does large text really get an easier standard?
Yes — 3:1 instead of 4.5:1, because larger letterforms are inherently more legible. 'Large' means at least 18pt (24px) regular or 14pt bold. Everything smaller plays by the stricter rule, including the body text most sites are made of.
Can I check more than two colours?
One pairing at a time keeps the verdict honest. For a full palette, check each text/background combination you actually use — headings on hero, body on card, links on background. Five minutes of checks beats one confident guess.
Is AA compliance legally required?
It depends on your jurisdiction and sector — many countries reference WCAG AA in accessibility law for public services and, increasingly, private sites. Beyond law, it is simply good business: readable text serves every visitor, including the large share reading on phones in imperfect light.
Why does the formula weight green so heavily?
Because your eyes do. Human vision is most sensitive to green-yellow light and least to blue — an evolutionary quirk of daylight. The luminance formula bakes this in, which is why a bright blue can fail against white while a duller-looking green passes.
Conclusion
Readability is measurable, so measure it. Set the pair, read the verdict, trust the preview — and ship text that everyone can actually read.