Contrast Grid
Every foreground against every background at once, scored to WCAG 2.2 AA and AAA — not one pair at a time.
- Free
- Never leaves the browser
- No account
Accepts #F4F1E8, #fff or rgb(244 241 232), with an optional name.
- Colours
- 7
- Pairs
- 42
- Pass AA
- 20 of 42
| FG ╲ BG | Paper | Sunk | Ink | Ink 2 | Muted | Correcti… | Blueprint |
|---|---|---|---|---|---|---|---|
| Paper | |||||||
| Sunk | |||||||
| Ink | |||||||
| Ink 2 | |||||||
| Muted | |||||||
| Correction | |||||||
| Blueprint |
Select any cell for a rendered sample and the exact ratio.
What the chat window cannot finish.
Single-pair contrast checkers answer the question you already knew to ask. The failures live in the combinations nobody thought to test: the muted label on the sunk surface, the accent on the raised card, the disabled state on the inverted block. Paste a palette and get the entire matrix.
An assistant can compute a contrast ratio, and it will occasionally get it wrong — relative luminance involves a piecewise gamma transform, and approximating it is exactly the kind of arithmetic language models fumble. Here the maths is the WCAG 2.1 formula, executed, not estimated.
More importantly, a chat reply cannot show you the swatch. Contrast is a visual property with a numeric threshold; you need both the number and the sight of it.
WCAG 2.2 thresholds
Minimums for conformance. Large text is 18.66px bold or 24px regular and above.
- AA — body text
- 4.5:1
- AA — large text
- 3:1
- AA — UI components & graphics
- 3:1
- AAA — body text
- 7:1
- AAA — large text
- 4.5:1
- Incidental / disabled
- No minimum, but design it anyway
The formula
- Ratio
- (L1 + 0.05) / (L2 + 0.05), lighter as L1
- Relative luminance
- 0.2126·R + 0.7152·G + 0.0722·B on linearised channels
- Linearisation
- c ≤ 0.03928 ? c/12.92 : ((c+0.055)/1.055)^2.4
These constants are published under CC BY 4.0. Quote them, cite them, put them in your own documentation — attribution to Original Design Studio is the only condition.
The principles behind what this tool tells you.
What is the difference between AA and AAA?
AA requires 4.5:1 for body text and is the level almost all legislation and procurement references. AAA requires 7:1 and is rarely mandated, but is worth hitting for long-form reading and for anything used in bright ambient light.
Does this handle APCA?
Not yet. APCA is the candidate algorithm for WCAG 3 and models perceptual contrast far better, but WCAG 3 is not a recommendation and no regulation references it. We will add it alongside, not instead.
Why does my brand colour fail?
Most saturated brand colours fail against white at body-text sizes — that is normal and not a reason to abandon the colour. Reserve it for large text, fills and non-text elements at 3:1, and derive a darker variant for small text.
Can I check a Tailwind or Figma palette?
Paste any list of hex values, one per line, with optional names. The grid takes whatever you give it.
An automated checker flags this page. Is that a bug?
No, and it is worth explaining. Each cell renders the actual pair at its actual contrast — that is the finding, and a checker that hid its failing pairs would be useless. Those samples are marked aria-hidden, so screen-reader users get the ratio and grade as text from the cell's label instead, and the ratio itself is always drawn in black or white against the cell so the number telling you it failed is never itself unreadable.
Next tool
03 — Aspect Ratio & Frame
Want this run across your whole product?
An audit scores what you have shipped against all ten disciplines — tested with assistive technology and on real hardware — and returns a prioritised plan.