FREE TOOL · LIVE A11Y CHECKS
Palette Visualizer
Assign colors to background, surface, text, primary and accent, and see them on a real UI mockup. Every key text pairing is scored against WCAG contrast in real time, so your palette is readable, not just pretty.
Build something people love
A quick preview of how your palette reads across real interface elements.
Cards use the surface color with body text on top — a common contrast trap.
Accessibility checks
WCAG 2.x contrast for each key text pairing. AA needs 4.5:1 for normal text, 3:1 for large text.
See it on real UI · with a11y checks
Test a palette on a real interface, not just swatches.
Assign five colors to product roles — background, surface, text, primary, and accent — and watch them render on a live UI mockup. Every key text pairing is scored against WCAG contrast in real time, so you choose colors that are both good-looking and readable.
Frequently asked questions
What does the palette visualizer do?
It maps your colors onto a realistic UI — navigation, a hero with a call-to-action, cards, a badge, and a form — so you can see how a palette actually feels in product context instead of as flat swatches. As you change any role, the mockup and the contrast checks update live.
How are the accessibility checks calculated?
Each pairing (body text on the page background, text on a card surface, the button label on the primary color, and the accent link on a surface) is scored with the WCAG 2.x contrast ratio. A pairing passes AA when it reaches 4.5:1 for normal text, or is flagged as AA large when it only clears 3:1.
Why check contrast inside the visualizer?
Palettes that look great as swatches often fail in real use — a pretty accent on white can be unreadable. Surfacing the contrast ratio next to the live mockup means you catch the problem while you are still choosing colors, not after you ship.
Can I share a theme?
Yes. The five role colors are stored in the URL, so the Share button copies a link that reopens the exact same theme and its contrast readout.