Color Contrast Grid

About the Color Contrast Grid

Check a whole palette for readable colour pairs at once. Paste your colours and the grid puts every colour on every other one: each cell shows “Aa” in the text colour on the background, its contrast ratio and the best WCAG 2.2 level the pair reaches — AAA (7:1), AA (4.5:1), AA large (3:1, which is also the minimum for icons, borders and other interface graphics) or a fail.

It reads the formats design systems are kept in: a plain list with names, CSS custom properties (with var() references between them), SCSS or Less variables, JSON tokens and the colors object of a Tailwind config. Filter the grid to the pairs that pass a level, swap rows and columns, and read the combinations sorted from highest to lowest contrast. With a pass, the grid and the combinations list go into your documentation as Markdown, CSV or a PNG image. Everything runs in your browser.

Common uses

• Documenting which text and background pairs a design system allows, with the ratios to back it up.
• Checking a new brand palette before it goes into a product, a slide template or a website theme.
• Auditing a Tailwind or CSS-variables theme for pairs that fail AA, before an accessibility review.
• Finding which colours are safe for icons, input borders and focus rings (3:1) and which only work as backgrounds.

How the ratio is worked out

Each colour’s relative luminance comes from its sRGB channels, as WCAG 2.2 defines it: every 8-bit channel is divided by 255, channels at or below 0.04045 are divided by 12.92 and the others become ((c + 0.055) / 1.055)^2.4, and then L = 0.2126 R + 0.7152 G + 0.0722 B.

The contrast ratio is (L1 + 0.05) / (L2 + 0.05), with L1 the lighter colour, from 1:1 (no contrast) to 21:1 (black on white). The ratio is the same whichever colour is the text, so the grid is mirrored across its diagonal unless a colour is translucent.

WCAG treats its thresholds as exact: a computed ratio is not rounded before it is compared, so 4.499:1 does not meet 4.5:1. The grid shows ratios truncated to two decimals, never rounded up.

Which level a pair needs

• AA, normal text: 4.5:1 (SC 1.4.3).
• AA, large text: 3:1. Large text is at least 18 point (about 24 CSS pixels), or 14 point (about 18.5 pixels) when bold.
• AAA: 7:1 for normal text and 4.5:1 for large text (SC 1.4.6).
• Interface components and graphics: 3:1 against what is next to them (SC 1.4.11) — icons that carry meaning, input borders, focus indicators, chart lines.

Logos and the text of disabled controls have no contrast requirement. The badge in each cell names the highest level the pair reaches; “AA large” covers both large text and interface graphics.

Formats it reads

• A list: Brand #1d5fcb, #1d5fcb Brand, Brand: #1d5fcb, Markdown table rows, numbered or bulleted lists, several colours on one line.
• Colour values: HEX with or without # (3, 4, 6 or 8 digits), rgb(), hsl(), hwb(), oklch(), oklab(), lab(), lch(), color(display-p3 …) and the 148 CSS colour names.
• CSS custom properties such as --color-primary: oklch(52% 0.2 264);, including var(--other) references within the paste; a leading color- is dropped from the name.
• SCSS and Less variables: $brand: #1d5fcb;, @brand: #1d5fcb;.
• JSON tokens and Tailwind configs: nested keys become names (brand.500 → brand-500, DEFAULT dropped), and a design token’s $value (W3C Design Tokens format) or value (Style Dictionary) is read under the token’s own name. Only string values are read; code such as colors.blue or functions is skipped, never run.

The same colour listed twice is shown once, with both names.

Translucent and wide-gamut colours

A translucent text colour is painted over each background before its contrast is measured, as a browser paints it. A translucent background is painted over white, which WCAG assumes when no background is given. A colour outside sRGB (color(display-p3 …) or a vivid oklch()) is first mapped to the nearest displayable colour with the CSS Color 4 gamut-mapping algorithm, because WCAG’s luminance formula is defined for sRGB.

Limitations

• Contrast ratio is only one part of readability: font weight, size, spacing and the colours around a pair also matter. The ratios are for flat colours; text over an image or a gradient needs a check against the lightest and darkest areas behind it.
• The grid uses the WCAG 2.2 formula. The APCA method proposed for future guidelines gives different numbers and is not part of WCAG 2.2.
• Up to 40 colours are compared (1,560 combinations); paste the rest separately.
• In the free preview the grid and the combinations list show their first half (up to 10 rows each) and every count, and the exports stay locked.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.