Color Contrast Matrix Checker

Why check every color combination at once, not one pair at a time?

WCAG accessibility guidelines require a minimum contrast ratio between text and background colors, or users with low vision or color blindness may not be able to read your text. In practice, most sites mix several brand colors, background colors, and status colors — a primary-colored heading over a light-gray card, a warning color over white, dark text over a tinted background — and checking each pairing one at a time is easy to get wrong or simply forget. This tool lets you paste every color you actually use and instantly computes the contrast ratio for every possible pair, laid out as one matrix — no more checking combinations one by one.

How the ratio is calculated — a concrete example

WCAG 2.1 defines contrast ratio as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the two colors' relative luminance (higher means closer to white). Pure black #000000 against pure white #FFFFFF scores a perfect 21:1, but light gray #999999 against white only scores 2.85:1 — well below the 4.5:1 minimum required for normal text. Normal text (under 18px, or under 14px bold) needs AA ≥ 4.5:1, or AAA ≥ 7:1 for a stricter standard; large text (18px+ bold or 24px+) has a looser bar of AA ≥ 3:1.

How to read the result matrix

Each cell in the matrix shows the contrast ratio between the color in that row and the color in that column, color-coded green (passes AAA), yellow (passes AA only), or red (fails) — so you can spot problem pairings at a glance instead of computing each one by hand.

Contrast is calculated purely from each color's RGB value — it doesn't account for font weight, anti-aliasing, or semi-transparent overlays in actual rendering. Always double-check on a real device before shipping.