shadcn.io is not affiliated with official shadcn/ui
Color System Dashboard Block for Vue
A token audit of 14 colours with swatches, hex, usage and WCAG contrast on light and dark, plus a pair checker where two selects pick text and background and four verdicts read AA and AAA for normal and large text.
Installation
Overview
Audit a palette and check a pair before you ship it with this token panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a pair checker and a table of fourteen Tintwell tokens. In the checker, two Native Selects pick a text token and a background token, a sample line and a large line render in them, and the ratio is shown with four verdicts, AA normal, AA large, AAA normal and AAA large, each a filled check or a hollow cross and the word Pass or Fail. Below it, every token has a swatch painted from its typed hex, its name and variable, its hex, how often it is used, and its contrast as text on a light and on a dark surface, computed with the WCAG relative luminance formula and tagged AAA, AA, AA large or Fail with a Badge. The swatches and the sample are the only coloured pixels; everything else follows the theme. For design systems, theme reviews and accessibility audits.
FAQ
How do I add my own tokens?
Edit TOKENS: an id, a name, a CSS variable, six hex digits in hex (typed without the hash) and a uses count. LIGHT and DARK are the two surfaces the table checks against. Read the tokens from your stylesheet or design tool in a real tool; here nothing is read.
How is contrast computed?
Each channel is converted to linear light, the relative luminance is 0.2126 red plus 0.7152 green plus 0.0722 blue, and the ratio is the lighter luminance plus 0.05 over the darker plus 0.05. The ratio is cut to two decimals rather than rounded, so 4.499 never reads as a pass. AA needs 4.5 for normal text and 3 for large text, AAA needs 7 and 4.5.
What does Swap do?
It exchanges the text and background tokens and reads the new ratio in the polite line. A pair read the other way round has the same ratio, so only the sample changes.