Color Palette Validator
Paste a JSON object, CSS variables, or Tailwind config and get a complete WCAG contrast matrix for every foreground/background combination. See pass/fail for AA, AA Large, and AAA at a glance.
Palette input (JSON, CSS variables, or key/value)
Want a design system that passes contrast by default?
Color contrast is one of 50 WCAG criteria. The A11y Starter Kit ships a token-driven design system where every token pair (foreground over background, primary over surface, etc.) is contrast-tested at build time, so design drift never breaks accessibility.
Get the A11y Starter Kit →Palette passes. Does the rest of the site?
A compliant palette is a good start and about 30% of WCAG 2.1 AA. We manually test the other 70%: keyboard navigation, screen reader output, focus order, and form error recovery. Audits from $499.
Frequently Asked Questions
Common questions about the color palette validator.
JSON objects, CSS custom properties (--name: #hex), and key/value text formats. The parser is forgiving — it extracts hex values from any of these structures, including nested objects and Tailwind config snippets.
Design systems often have hidden contrast failures because designers test only the obvious pairs (text on background). The matrix surfaces every possible foreground/background combination, including the ones nobody thought to check, like a muted text on an alert background.
WCAG AA requires a minimum 4.5:1 ratio for normal text and 3:1 for large text (18pt+ regular or 14pt+ bold). AAA is stricter at 7:1 normal and 4.5:1 large. UI components and graphical objects need at least 3:1.
No. The validator runs entirely in your browser. Nothing is uploaded, logged, or stored.