How is the WCAG contrast ratio calculated?

The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's relative luminance and L2 the darker. Relative luminance is the linearised sRGB sum 0.2126*R + 0.7152*G + 0.0722*B.

What thresholds does the matrix use?

For normal text, AA requires a ratio of at least 4.5:1 and AAA at least 7:1. Cells below 4.5:1 are marked Fail. Large text uses relaxed thresholds — use the Large Text Contrast Checker for that case.

How many colours can I add?

The matrix supports up to 12 colours, producing up to a 12x12 grid. Duplicate and unrecognised entries are ignored automatically so you can paste straight from a stylesheet.

Does the order of colours matter?

Contrast ratio is symmetric, so swapping foreground and background gives the same number. The grid still shows both directions because the rendered preview (which colour is text vs background) differs visually.

Is my palette sent anywhere?

No. All parsing and contrast calculation happens locally in your browser. Nothing is uploaded, logged, or transmitted.

Contrast Matrix Generator

A contrast matrix is the fastest way to audit a colour palette for accessibility. Instead of checking one foreground-background pair at a time, you paste every brand colour and get an NxN grid showing the WCAG contrast ratio — and the AA/AAA verdict — for every possible combination at once. This is essential when you are building or reviewing a design system and need to know which colour pairs are safe for body text.

How it works

The tool implements the WCAG 2.x contrast formula exactly:

Each hex colour is converted to sRGB channels in the range 0–255.
Each channel is normalised to 0–1 and linearised: a channel value c becomes c/12.92 when c <= 0.03928, otherwise ((c + 0.055)/1.055)^2.4.
Relative luminance L is the weighted sum 0.2126*R + 0.7152*G + 0.0722*B.
For any pair, the contrast ratio is (Llighter + 0.05) / (Ldarker + 0.05).

A ratio of 7:1 or higher passes AAA for normal text, 4.5:1 or higher passes AA, and anything below 4.5:1 fails. The grid colours every cell with the real foreground and background so you can sanity-check the number against what your eye sees.

Tips and notes

Pure black on pure white is 21:1 — the maximum possible contrast — and AAA on every count.
Mid-tone greys and saturated brand accents are the usual culprits: blue or green on white often lands between 3:1 and 4.5:1, which passes large text but fails body copy.
These ratios cover the contrast success criterion only. They do not check that a colour pair is distinguishable for users with colour-vision deficiency — pair this with a colour-blindness simulator for full coverage.
The matrix uses the normal-text thresholds. If a pairing is only for 18pt or 14pt-bold headings, the relaxed 3:1 AA rule applies instead.