shadcnpreset
  • Ask AI
  • Community
shadcnpreset

Don’t click random. Describe what you’re building or the vibe you want. AI surfaces matching presets, shows real components, and helps you choose fast. Open source and free.

Vercel OSS Program

Tools

  • Preset Theme CSS Generator
  • Preset color contrast checker
  • Tailwind / CSS Image filter generator
  • shadcn preset variables Figma plugin
  • shadcn theme generator
  • shadcn themes
  • OG image debugger

Navigation

  • Ask AI
  • Community
  • Tools

Presets

  • High contrast presets
  • My presets

Support

  • Get in touch

© 2026 shadcnpreset. All rights reserved.

Preset color contrast checker

WCAG 2.x contrast ratios for a shadcn preset's light and dark theme tokens.

b0

nova style, neutral base, neutral theme, neutral charts, lucide, inter font

Light

WCAG 2.1

Normal text

PairColorsRatioAAAAA
Background
19.79:1
Card
19.79:1
Popover
19.79:1
Primary
17.16:1
Secondary
16.42:1
Muted
4.34:1
Accent
16.42:1
Sidebar
18.96:1
Sidebar primary
17.16:1
Sidebar accent
16.42:1
Dark

WCAG 2.1

Normal text

PairColorsRatioAAAAA
Background
18.96:1
Card
17.16:1
Popover
17.16:1
Primary
14.22:1
Secondary
14.48:1
Muted
5.83:1
Accent
14.48:1
Sidebar
17.16:1
Sidebar primary
6.54:1
Sidebar accent
14.48:1

WCAG 2.x SC 1.4.3 (Contrast Minimum) requires 4.5:1 for normal text at Level AA. SC 1.4.6 (Contrast Enhanced) requires 7:1 at Level AAA.

Large text and non-text contrast are not covered here.