Color Contrast Checker

Contrast is the difference in brightness between text and its background. When it's too low — light grey text on white, or dark blue on black — the text becomes hard or impossible to read, especially for the roughly one in twelve people with some form of colour-vision deficiency, anyone with low vision, and everyone squinting at a phone in bright sunlight. Good contrast isn't a nicety; it's what makes your content readable by everyone.

It's also a legal and professional requirement in many contexts. Accessibility standards, public-sector rules and most design systems set minimum contrast levels, and automated audits (like Lighthouse) flag pages that fail. Checking as you design saves a painful retrofit later.

This checker uses the WCAG 2.1 formula, the international standard. It converts each colour to a relative luminance value — a weighted measure of perceived brightness — and expresses the difference as a ratio between 1:1 (identical, invisible) and 21:1 (pure black on pure white, the maximum). The higher the ratio, the more legible the text.

WCAG defines two levels. Level AA, the common target, requires at least 4.5:1 for normal text and 3:1 for large text (roughly 18pt, or 14pt bold). The stricter Level AAA asks for 7:1 and 4.5:1 respectively. The tool shows a pass or fail for each so you know exactly where your colours stand.

If a pair fails, you usually don't need to abandon your palette — just adjust the lightness. Darkening the text or lightening the background (or vice versa) a few steps is often enough to cross the threshold while keeping the same hue. The live preview here lets you nudge values and watch the ratio update instantly.

Two practical notes: large, bold text has a lower requirement, so headings can use colours body text can't; and never rely on colour alone to convey meaning (for example, red for errors) — pair it with an icon or label so the message survives for colour-blind users. Everything is computed in your browser, nothing is uploaded.