Accessible Color System
WCAG-compliant color palettes for dark and light mode. Export as shadcn, Tailwind, or JSON.
Colors are generated in your browser. Nothing is sent to a server.
Color Tokens
Base
Chart
Sidebar
Status
Preview
Light
System Status
Operational
High Latency
Quota
Activity
Quick Action
Admin
Member
Dark
System Status
Operational
High Latency
Quota
Activity
Quick Action
Admin
Member
Export
Frequently Asked Questions
What is WCAG color contrast?+
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. AA requires 4.5:1 for normal text, AAA requires 7:1.
How do I choose accessible colors for dark mode?+
Start with a primary brand color and let the tool generate a dark mode palette. All foreground/background pairs are automatically checked against WCAG AA standards.
Can I use the exported tokens with shadcn/ui?+
Yes. Copy the CSS Variables output and paste it into your globals.css. The variable names match shadcn/ui's semantic token structure exactly.