WCAG Contrast Ratio Checker
Pair a text and background colour and see the exact contrast ratio with pass/fail for WCAG AA and AAA — a fast legibility check you can run before a colour reaches a real screen.
Catch low contrast before your users do
A colour pair that looks fine on your calibrated monitor in a dim room can be unreadable on a phone in daylight. The WCAG ratio takes the guesswork out of it: a single number, checked against fixed thresholds, that predicts whether real people can read the text. Nudging a foreground colour a few shades darker is usually all it takes to move a 3.8:1 fail up to a comfortable 4.5:1 pass.
Building the palette itself? Convert and fine-tune each colour with the hex, RGB & HSL converter — adjusting lightness in HSL is the quickest way to hit a target ratio.
Frequently Asked Questions
What contrast ratio do I actually need?
WCAG 2.x sets two levels. For AA — the bar most teams and legal requirements aim at — normal text needs a contrast ratio of at least 4.5:1, and large text at least 3:1. AAA is stricter: 7:1 for normal text and 4.5:1 for large. 'Large' means roughly 24px and up, or 18.66px and up if bold. This checker shows a pass or fail for all four bands at once.
How is the contrast ratio calculated?
It follows the WCAG formula. Each colour's relative luminance is computed by gamma-correcting its red, green, and blue channels and weighting them (green counts most, blue least). The ratio is then (lighter + 0.05) / (darker + 0.05), which ranges from 1:1 for two identical colours up to 21:1 for pure black on pure white. The 0.05 term models ambient screen glare.
Why does contrast matter beyond looking nice?
Low-contrast text is hard to read for anyone in bright sunlight or on a cheap screen, and genuinely inaccessible for people with low vision or colour-vision differences. Meeting the WCAG thresholds is a baseline for usable interfaces and, in many jurisdictions, a legal accessibility requirement. It is far cheaper to catch a failing pair here than after a design ships.
Does passing the ratio mean my colours are fully accessible?
It covers the text-contrast criterion, which is a big one, but accessibility is broader. Contrast requirements also apply to meaningful icons and UI controls, you shouldn't rely on colour alone to convey information, and font size and weight affect legibility too. Treat a pass here as a necessary check, not a complete audit — verify against your browser's built-in accessibility tools as well.
This checks the WCAG text-contrast criterion only and is not a full accessibility audit. Verify against your browser’s accessibility tools and real assistive technology.