All 141 tools / Design systems and tokens
Test every text token against every background token in a variables file and list the failures.
Token contrast matrixFreeFor designers and developers
30 min
saved on a typical run. Our estimate, against checking each foreground and background token pair in a contrast app.
Before: what you give it
The example input, as typed in. You paste text, CSS, markup or notes.
--color-text-primary: #1a1a1a; --color-text-muted: #9a9a9a; --color-bg-page: #ffffff; --color-bg-card: #f4f4f4; --color-border-subtle: #dddddd; --color-accent: #ff3d81; --color-success: #2a9d3f; --color-danger: #d62828;
After: what comes back
The first lines of a real run on that input. Nothing here is edited by hand.
# 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 | ... full output on the tool page
What you get
Pass and fail counts, failing pairs worst first with the nearest passing colour, and colour-blind merges
What it cannot do
Free up to 30 colours, Pro up to 200; it cannot know which pairs your product actually uses together.
Who it is for
- Designers
- Developers
Free and Pro
| Free | 10 runs a day per IP address, up to 8,000 characters a run. |
|---|---|
| Pro | No daily limit, 300 requests a minute, up to 200,000 characters a run. |
Use it from your assistant
The tool is called check_contrast_tokens. Connect the server once, then ask for it by name or just describe the job. Install steps for each app.
claude mcp add --transport http designers https://designers.allthepossibles.com/mcpcurl -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;"}'Try it here
The form starts with the same example input, so you can run it first and then swap in your own.
More in design systems and tokens
- Token names
Lint design token names for mixed separators, colour-based names, duplicate values and uneven scales.
- Design drift check
Compare design tokens with code variables and list what is missing, mismatched or hard-coded.
- Extract design tokens
Pull the colours, fonts, spacing, radii and shadows a stylesheet really uses, each with a use count
- Token scale audit
Find near-duplicate colours, sizes and spacing values and get a consolidated scale with an old-to-new map
- Component inventory
List the components hiding in a stylesheet and the variants that disagree on radius, padding or size
- Design system health score
Score a design system out of 100 across tokens, scales, components, states and contrast, with the formula