What this checker does
Design tokens store a brand's colors, type and spacing as named values, so the same palette can feed CSS, Tailwind, iOS and Android. Color tokens are easy to export and easy to break: one muted gray placed on the wrong surface can fail accessibility everywhere it is used. This checker reads your token file, tests every foreground and background combination against WCAG 2 contrast, and drafts the opposite theme so you can see how the palette holds up in light and dark mode.
Supported formats
HueWiz reads the W3C Design Tokens Community Group format ($value, $type, group-level $type, and the sRGB color object with colorSpace and components) and the Tokens Studio format (value and type). Values can be hex (3, 4, 6 or 8 digits, with alpha ignored), rgb() or hsl() strings. Alias references such as {color.ink} are resolved, and circular aliases are reported. Non-color tokens like spacing and typography are skipped. Up to 40 colors are read; the matrix shows the first 14.
How the contrast matrix works
Each cell shows one token as text on another token as background, with the WCAG 2 contrast ratio. AA for normal text needs 4.5:1, AAA needs 7:1, and large text needs 3:1. Ratios are truncated rather than rounded, so a pass is never a rounding artifact. Most pairs in a palette are never meant to be used together. Use the matrix to confirm the combinations you actually ship, and the "best text color" list to pick text for each surface. For the method itself, see the contrast checker and the accessibility guide.
How the dark (or light) theme is generated
Inverting colors does not produce a usable dark theme: brand hues shift, borders vanish and muted text becomes unreadable. HueWiz uses a contrast-preserving approach in the perceptual OKLCH color space:
- It finds the base surface: a token named canvas, background, bg, page or surface, or else the lightest or darkest color.
- It maps that base to a near-black (or near-white) that keeps a trace of the original hue, so warm neutrals stay warm.
- Cards, borders and tints move away from the new base by about the same distance they had in the original, so separation and elevation stay visible.
- Text, icons and accents keep their hue and are adjusted in lightness until they have the same contrast against the new base as they had against the original. A muted gray stays muted, and primary text stays strong.
- Very vivid highlight colors that sat near the base are kept unchanged, because they usually work on both themes.
The output is a draft. Brand button fills usually keep their original value, with text color chosen for contrast. Read the full worked example in how to turn a light design system into a dark theme.
Using the exports
The CSS export defines every token as a custom property, switches to the generated theme under prefers-color-scheme: dark, and also responds to data-theme="dark" or "light" on the root element, so users can override the system setting. The Tailwind v4 export maps each variable into @theme inline, so utilities like bg-canvas follow the active theme. The DTCG export writes a light and a dark group you can feed to Style Dictionary or another token pipeline.
Privacy
Token files often describe unreleased brands. The checker parses and processes everything with JavaScript on this page; HueWiz does not upload, store or log the file's contents. Optional analytics, if you allow it, records page visits only.
Frequently asked questions
Which design-token formats does the checker read?
W3C DTCG JSON ($value/$type) and Tokens Studio JSON (value/type), with hex, rgb(), hsl(), sRGB color objects and alias references.
Is my token file uploaded anywhere?
No. The file is read and processed in your browser.
Can I download HueWiz's own tokens to try it?
Yes. Download the HueWiz dark theme tokens (DTCG JSON), or press "Load an example" for a light palette to convert.