UI Color Preview
Preview your persistent cart roles live across real-world dummy UI components with WCAG 2.1 AA/AAA and APCA contrast scoring. Every coloured element is a token slot — click or right-click one to swap its colour. Each card has its own Dark/Light control, so one specimen can be flipped without touching the rest.
One card per variant, all painted from the Trusty Button role on an identical backdrop.
The same fill at three sizes, then the icon-only control in each of its three treatments.
Badges and avatars take the same fill and foreground as the button — over a tenth of its area.
One card per role, so a palette that only breaks on `danger` cannot hide behind six healthy buttons.
Accent roles with no 500 slot — click one to author it.
Design Tokens
3 tokens · 9 rolesUnderstanding WCAG 2.1 vs. APCA Contrast
While WCAG 2.1 uses a static mathematical ratio (4.5:1 for normal text, 3:1 for large text), the modern Advanced Perceptual Contrast Algorithm (APCA) accounts for spatial frequency, font weight, and polarity (dark-on-light vs light-on-dark). Our preview tool evaluates your color tokens under both systems to guarantee accessible UI states in both dark and light modes.
How to Use the UI Preview
- Collect colors: Use the color picker or palette library to add colors to your cart. Each color is assigned to a semantic role (e.g. Primary, Danger, Success).
- Preview live: The preview above shows your colors applied to real UI components — buttons, cards, badges, forms, and navigation bars.
- Swap tokens: Click any colored element to open a popover where you can swap its color token, copy its value, or save it to a different role.
- Check contrast: Each component displays its WCAG 2.1 and APCA contrast scores. Green scores pass AA; red scores need attention.
- Toggle themes: Each card has its own Dark/Light control, so you can verify your colors work in both modes.
Sample Token Output
When you export your colors, you get production-ready CSS custom properties. Here is an example of what a typical token set looks like:
:root {
--color-primary-500: oklch(0.55 0.20 265);
--color-danger-500: oklch(0.58 0.21 25);
--color-success-500: oklch(0.62 0.15 150);
--color-surface: oklch(1 0 0);
--color-ink: oklch(0.21 0 0);
}These tokens work with Tailwind CSS v4's @theme block and can be used directly in your CSS or JavaScript.
Contrast Scoring Explained
The preview evaluates every text/background pair in your UI components. Here is how to read the scores:
- WCAG 2.1 AA: Requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold).
- WCAG 2.1 AAA: Requires 7:1 for normal text and 4.5:1 for large text.
- APCA: A newer, more perceptually accurate contrast system. Scores above 60 are generally considered readable; above 75 is good; above 90 is excellent.
- Polarity matters: APCA treats dark-on-light and light-on-dark differently. White text on a dark background is not the same as dark text on a light background.