UI Color Contrast Grid

About this generator

A single-pair WCAG checker is useful for the first color decision in a design, and almost useless by the time you have a token palette with ten or fifteen entries. The question that actually matters once a system has settled is which foreground colors are safe on which background colors, and the only honest way to answer it is to compute every pair. That is what this grid does. Paste your design tokens — one color per line, with an optional label before the hex — and you get back a square matrix of WCAG contrast ratios, with every pair tagged AA, AAA, AA-large, or FAIL based on the text size you selected. Labels are preserved so you can read the matrix as "Danger on Surface" rather than "#DC2626 on #1E293B," which matters more than you think when you are reviewing an audit with people who do not keep hex codes in their heads. The math uses the exact WCAG 2.1 relative-luminance formula: each channel is linearised with the piecewise sRGB function, combined as 0.2126·R + 0.7152·G + 0.0722·B, and the ratio is (L₁ + 0.05) / (L₂ + 0.05) with the brighter color on top. That means the ratio for a pair is symmetric — foreground-on-background equals background-on-foreground — so the matrix is mirrored around its diagonal, which is a quick visual sanity check that nothing is corrupted. Thresholds follow the current standard: AA normal is 4.5:1, AAA normal is 7:1, large text drops those to 3:1 and 4.5:1. Flip the text-size select to see how a scale that fails for body copy might actually be fine for a page title or a prominent button label. The grid earns its place at a very specific moment in a design-system lifecycle: when you are auditing the token layer before shipping, when you are adding a new semantic color (a warning, a destructive variant, a brand sub-palette) and need to know which combinations it unlocks, and when you are reviewing a dark-mode port and want to verify that your lightness ramp survived the inversion. In every one of those cases, a single-pair checker makes you compute n² ratios by hand; the matrix just shows you. The output footer summarises how many of the n² − n meaningful pairs pass AA and AAA, which gives you a one-number quality score for the whole system — pass rates below about 40% usually point at a palette that has too many mid-lightness tokens clustered together, and nudging two or three colors by 10–15 units of L in OKLCH often fixes the chart dramatically. If you are shipping anything that will be audited for accessibility — a government service, a healthcare product, an enterprise B2B dashboard — this is the matrix you want in the design-review deck, not another cherry-picked contrast screenshot.

Use Cases

• •Audit a design-system color palette before shipping — see every token-pair contrast ratio at once.
• •Verify a dark-mode port by pasting both themes side-by-side and comparing pass rates.
• •Decide which brand accent colors are safe for small text and which are button-background-only.
• •Produce a one-page accessibility artifact for a design-review deck or a VPAT appendix.
• •Stress-test a new semantic color (warning, destructive, info) against every existing background in the system.
• •Teach a new team member which pairings in your token layer are already decided and which they must not use.

FAQ