The Accessible Tokens Kit

The DelightfulDev workbook for a palette and a fluid type scale that pass WCAG before anyone checks

Accessibility failures in a design system hide in the pairs nobody checked: the brand violet on the tinted card, the muted gray on the page background, the fluid heading at 200% zoom. The Accessible Tokens Kit checks them together. Part 1 lists every text and background pair and compares each on the exact ratio, because WCAG does not round: 4.4985:1 fails 4.5:1, even though a rounding checker shows 4.50. Each failure gets its nearest passing shade, the same hue with the lightness moved the least distance that passes. Then it builds a fluid type scale and checks every clamp() against zoom, because zooming shrinks the viewport a vw term scales with: past 2.5 times its minimum, a fluid size cannot double even at 500% zoom. It ends with one tokens.css file. Part 2 keeps it true: a two-question pre-merge check, one matrix per theme, and a re-run when the brand changes. With your purchase comes a personalised sheet worked on the colors and clamp() values you enter in the DelightfulDev calculators.

What’s inside

The full contents of The Accessible Tokens Kit: the tokens, keeping them, the working pages and three bonuses

Step 3, The Unrounded Rule: a 4.4985 to 1 pair that rounds to 4.50 and fails, and how to test a checker for it

The pair matrix: every text color on every background, on the exact ratio
The rounding trap: why 4.4985:1 fails, and how to test your checker
The nearest passing shade: the smallest lightness change that passes
A fluid type scale from two ratios, built with clamp()
The zoom check for WCAG 1.4.4, and the largest maximum that passes
One tokens.css file, with approved backgrounds beside every color
The pre-merge check, themes and dark mode, and brand changes
Bonuses: a quickstart, the gray ladder and the 3:1 non-text pairs
A personalised sheet worked on your own colors and clamp()

Plus a second PDF, worked out for you

Run one of the free calculators first and buy from that page, and this sheet is computed from your own figures. Buy from here and the pack still arrives complete — the sheet simply has no numbers of yours to work from yet.

14-day refund, no questions asked. If the pack is not what you needed, email support@graburl.com and we refund you in full — you do not have to justify it or delete the file. Full policy.

Email — where we send the downloadCountry you are buying fromI ask for immediate delivery of this digital content and acknowledge that I lose my right to cancel once the download link is issued.

$19.00 including any taxes · PDF, 28 pages · instant download, link valid 7 days and 5 downloads.
Sold by GrabURL. The charge appears on your statement as GrabURL.
Refund policy · Terms of sale · support@graburl.com