shadcn/ui theme contrast checker
Check every text color in a shadcn/ui theme against WCAG 2 contrast in light and dark mode, then fix failing pairs automatically while keeping your theme's colors.
How it works
- 1
Pick a theme from the catalog or paste your own globals.css.
- 2
We check 12 foreground/background pairs in both light and dark mode, including buttons, muted text, popovers and the sidebar, against WCAG 2 AA (4.5:1).
- 3
Auto-fix adjusts only the lightness of failing text colors, keeping hue and chroma, and shows exactly what changed.
FAQ
What contrast ratio do I need?
WCAG 2 AA requires 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA requires 7:1.
Why only adjust lightness?
Contrast depends almost entirely on lightness. Changing only OKLCH lightness keeps each color's hue and saturation, so the fixed theme still looks like yours.
Can every pair be fixed?
Nearly always. The exception is a foreground shared by two very different surfaces, such as muted text on both a dark muted surface and a light background. We flag any pair that can't reach 4.5:1.