Labs

Accessibility Contrast Matrix

Paste your palette, get every colour pair’s WCAG ratio in one grid — AA/AAA at a glance, plus a suggested fix for any pair that fails.

Palette —

Colourshex, rgb(), hsl(), CSS variables or “name: #hex” — one per line or comma-separated

Contrast grid —

Every pair in your palette will be rated here

Settings Normal text · AA 4.5:1

Judge against

Hide the mirrored half (the ratio is the same either way round)

Show colour names in headers

How It Works

How to Use Accessibility Contrast Matrix in 3 Steps

Paste the palette

Drop in hex codes, rgb()/hsl(), a block of CSS custom properties or name: #hex lines — up to 12 colours. Names are picked up from variable names so the grid reads like your design system.

Read the grid

Each cell is the WCAG 2 contrast ratio of the row colour as text on the column colour as background. Green passes the level you chose, amber passes only for large text, red fails. The summary counts usable pairs.

Fix what fails

Click a failing cell: the tool nudges the text colour’s lightness until the pair passes and shows the new hex with the ratio, ready to copy. Export the whole matrix as CSV, Markdown (for docs) or PNG (for a design review).

FAQ

Accessibility Contrast Matrix — Frequently Asked Questions

Which formula is used?

WCAG 2.x relative luminance contrast — the same numbers browsers’ DevTools and Lighthouse report. Semi-transparent colours are composited on white before measuring. APCA (WCAG 3 draft) is not included yet.

What do AA and AAA mean here?

AA needs 4.5:1 for normal text and 3:1 for large text (≥ 24 px, or ≥ 19 px bold) and UI components such as borders and icons. AAA raises that to 7:1 and 4.5:1. Pick the level you are designing for in Settings and the grid recolours.

Why is the diagonal empty?

A colour on itself has a ratio of 1:1 and is never usable. The lower-left half mirrors the upper-right because the ratio does not depend on which colour is the text — hide it in Settings for a cleaner grid.

How is the suggested fix chosen?

It keeps the hue and saturation of the text colour and moves only its lightness — toward white on dark backgrounds, toward black on light ones — stopping at the first value that reaches the target. That keeps the fix recognisably “your” colour.

Can I check more than 12 colours?

The grid grows quadratically (12 colours = 66 pairs), which is already a lot to read. Split larger palettes into neutrals, brand and semantic groups and run each.

Is my input sent anywhere?

No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.