Design System Color Validator

Check color tokens for contrast, naming, and light/dark coherence before they spread through Figma and code. Paste CSS variables, Tailwind colors, or token JSON below and review the report.

Design System Color Validator

Validate your color tokens for accessibility, consistency, and semantic coherence

What gets checked

Accessibility — text and UI contrast against AA/AAA-style thresholds
Semantics — purpose-based names and consistent families
Harmony / structure — obvious clashes and incomplete state sets
Theme mapping — whether light and dark roles still make sense together

Contrast targets (WCAG 2.1)

Normal text: 4.5:1 AA, 7:1 AAA
Large text: 3:1 AA, 4.5:1 AAA
Many UI components / graphics: about 3:1

Fine-tune failing pairs in the Contrast Checker or the UI Element Color Auditor.

Common fixes

Text fails contrast — adjust lightness; keep hue if brand locks it.
Inconsistent names — adopt one pattern (for example primary / primary-hover) via the Color Tokens Generator.
Clashing accents — explore relationships in the Color Harmony Visualizer.

Frequently asked questions

What formats can I validate?

CSS custom properties, Tailwind config snippets, design-token JSON, or manually named colors. Normalize messy imports first if values arrive in mixed formats.

Which contrast thresholds are checked?

WCAG 2.1-style targets: 4.5:1 (AA) / 7:1 (AAA) for normal text, 3:1 / 4.5:1 for large text, and about 3:1 for many UI components and graphics.

Why validate semantic names?

Names like primary and danger travel better than blue-3. Consistent naming keeps themes and states (hover, focus, disabled) discoverable in code reviews.