Generate WCAG-compliant color systems with real-time contrast checking. Build accessible interfaces without sacrificing aesthetics.
Every color is checked against WCAG 2.1 standards. Click any swatch to copy the hex value.
Understand the standards that make your interfaces accessible to everyone.
Minimum requirement
Enhanced accessibility
Why OKLCH helps
Create accessible palettes in minutes, not hours.
Start with your brand colors or pick from the wheel. ColorBox works with any starting point.
OKLCH interpolation creates smooth tints and shades that look naturally harmonious.
Real-time WCAG contrast checking shows you exactly which combinations pass.
CSS variables, Tailwind config, Figma tokens, or raw JSON—your choice.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors. These standards ensure content is readable for users with visual impairments, including those with low vision or color blindness.
OKLCH's perceptual uniformity means lightness values accurately reflect how bright colors appear to human eyes. This makes contrast calculations predictable—you can create reliably accessible color scales by controlling the lightness parameter.
Yes. ColorBox shows contrast ratios for all color combinations in your palette. You can see at a glance which pairs pass AA, AAA, or neither standard.