Color Contrast Checker

WCAG AA requires 4.5:1 for normal text and 3:1 for large text, which means at least 24px, or 18.5px bold. AAA raises those to 7:1 and 4.5:1. Non-text UI elements like input borders and icons need 3:1 against adjacent colors. The checker above shows your exact ratio with a pass/fail badge for each threshold, previewed at realistic text sizes.

Because naive checkers compute luminance from the raw RGB channels and ignore alpha. A 40%-opacity gray text on white does not look like the gray in its rgba() value; it looks like a much lighter gray, the one the browser produces by compositing. This checker composites your foreground over the background, and the background over an explicit backdrop, before calculating, so the ratio describes the pixels people actually see. A fully transparent color correctly scores 1:1.

The safety net under everything. If your background itself has transparency, say a card at rgba(255,255,255,0.8) over a page, the final rendered color depends on what sits underneath. The backdrop is that final layer, defaulting to white. Set it to your real page color and the math matches your site exactly.

They repair a failing pair with the smallest visible change: your foreground is walked through OKLCH lightness (and reduced in chroma only if needed) until the composited pair passes the target, then the result is re-verified after rounding to the copyable hex. You get the suggested color, its exact ratio and a delta-E measure of how far it moved.

AA is the accepted legal and practical baseline for most content, and what WCAG conformance usually means. Aim for AAA for body text where you can afford it, long-form reading, small text, and audiences skewing older. And remember contrast is necessary but not sufficient: color must not be the only carrier of meaning, which is why the badges here say pass or fail in text, not just in green and red.