Tools / Token contrast matrix

Token contrast matrix Free

Runs every foreground token against every background token from a CSS variable file or tokens JSON, with nearest passing colours and colour-blind merges. Free up to 30 colours; Pro takes 200.

MCP tool name: check_contrast_tokens. REST: POST /api/contrast-tokens. Free: 10 runs a day per IP, 8,000 characters each. Pro: no cap.

Ask for it in plain words

Take a design token file (CSS custom properties like --color-text: #111;, a JSON object of colours, or W3C design tokens) and test every foreground-like token against every background-like token for 4.5:1 text and 3:1 component contrast, with the nearest passing colour, and find colours that merge under colour blindness. Free up to about 30 colours; Pro takes 200. Returns a markdown report.

Inputs

* required

Example

curl -X POST https://designers.allthepossibles.com/api/contrast-tokens \
  -H "content-type: application/json" \
  -d '{"tokens":"--color-text-primary: #1a1a1a;\n--color-text-muted: #9a9a9a;\n--color-bg-page: #ffffff;\n--color-bg-card: #f4f4f4;\n--color-border-subtle: #dddddd;\n--color-accent: #ff3d81;\n--color-success: #2a9d3f;\n--color-danger: #d62828;"}'

Example output

The report field, for the input above (structured fields come back alongside it):

# Contrast matrix for 8 colour tokens

3 foreground-like tokens against 2 background-like tokens: 6 pairs checked, 2 pass, 4 fail.

Text tokens need 4.5:1; border, icon and focus tokens need 3:1 (WCAG 1.4.3 and 1.4.11).

## Failing pairs, worst first

| Foreground | Background | Ratio | Needs | Nearest passing foreground |
|---|---|---|---|---|
| color-border-subtle #dddddd | color-bg-card #f4f4f4 | 1.23 | 3 | #8d8d8d |
| color-border-subtle #dddddd | color-bg-page #ffffff | 1.36 | 3 | #949494 |
| color-text-muted #9a9a9a | color-bg-card #f4f4f4 | 2.56 | 4.5 | #707070 |
| color-text-muted #9a9a9a | color-bg-page #ffffff | 2.81 | 4.5 | #767676 |

## Colour-blind merges

- No token pair that differs in normal vision merges under protanopia, deuteranopia or tritanopia.

Not every failing pair is used in the product; a muted text token on a background it never sits on is not a defect. Confirm pairs against real components before changing the tokens.

What it looks like

Limits of this tool

Deterministic: the same input always gives the same answer. It does not call a language model.