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.

Look inside

Two full pages from the workbook, exactly as printed. Click either to read it at full size before you decide.

What is in 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()

The kit complements the free calculators. They check one pair and build one clamp; it checks every pair and every size together, and ends with one tokens file.