WCAG 2.2 contrast grid
Every colour against every other colour, scored with the WCAG 2.x contrast ratio. Paste a palette and read the whole matrix at once instead of checking pairs one at a time.
One per line. Bare hex, name #hex, or a CSS
custom-property block pasted straight from a stylesheet.
Results
- AAA, 7:1 or better
- AA body text, 4.5:1
- Large text and UI only, 3:1
- Fails every threshold
Every cell carries its ratio and a written label, so the result never depends on telling the colours apart.
What the thresholds mean
| Ratio | Applies to |
|---|---|
| 7:1 | AAA body text |
| 4.5:1 | AA body text, and any text under 18pt / 14pt bold |
| 3:1 | AA large text (18pt, or 14pt bold), icons, and UI component boundaries |
How it is calculated
Each channel is divided by 255 and linearised: values at or below 0.04045 are divided
by 12.92, the rest go through ((c + 0.055) / 1.055)2.4. Relative
luminance is 0.2126R + 0.7152G + 0.0722B. The ratio is
(Llighter + 0.05) / (Ldarker + 0.05), so it runs from
1:1 to 21:1 and is the same in both directions. The grid is symmetric for that reason.
What it does not tell you
WCAG 2.x measures a ratio of luminance only. It is known to be harsh on light text against mid-dark backgrounds and generous to some dark-on-mid pairings, because it ignores polarity and perceptual weight. For a perceptual second opinion, use the APCA grid. Where the two disagree, WCAG 2.x is the one with legal standing today.
Runs entirely in your browser. Nothing is uploaded, nothing is stored, nothing is logged. All tools