Offline CSS Token Contrast Matrix

Paste a CSS block that defines custom properties and this single HTML file tests every colour token as text on every other colour token. It reports WCAG contrast ratios with Pass/Fail for AA normal text, AA large text and AAA normal text, and exports the full pair table to CSV. Free single-pair contrast checkers already exist. This tool adds batch testing of every colour-token pair in a stylesheet block, plus CSV export for review or documentation. What it does: - Reads custom properties from any pasted CSS block, such as :root. - Parses hex (3, 4, 6 and 8 digits), rgb()/rgba() and hsl()/hsla() values. - Resolves var(--name) references to other tokens in the same block, up to 8 levels deep. - Shows failing pairs only, if you prefer. - Downloads the pair table as a CSV file. - Ratios are shown to two decimals, rounded down. Pass/Fail uses that same displayed value, so a pair shown as 4.49:1 is marked Fail for AA normal text. Limits: - Checks up to 120 colour tokens per run. If your block defines more, only the first 120 are tested and the status line says so. - Named colours other than black, white and transparent (for example navy) are not parsed and are counted as ignored. - Semi-transparent colours and fallback forms such as var(--x, #fff) are ignored and counted in the status line. - Pairs are tested as listed. The tool does not check how your components combine colours. - It does not inspect web pages, rendered components, images or non-text UI contrast. Runs offline in any modern browser. No account, no installation, no network requests.

Format: html tool · Instant download (.zip) · Includes: index.html, README.md

Created with AI assistance and checked automatically before release.

Secure payment by Stripe. See terms & refund policy.