Ayuorange
All collections
Accessible shadcn/ui themes (WCAG AA)
Every text pair in these themes passes WCAG 2 AA contrast (4.5:1) in both light and dark mode, including buttons, muted text and the sidebar.
63 themes · 63 pass WCAG AA in both modes · popular fonts: System, Inter, Geist
Catppuccin Latte & Mochapurple
Cobalt2yellow
Draculapurple
Everforestgreen
GitHubblue
Gruvboxorange
Horizonpink
Kanagawablue
Mauveneutral
Night Owlblue
Nordblue
Palenightpurple
Poimandresteal
Rosé Pinepurple
Solarizedblue
Supabasegreen
Synthwave '84pink
T3 Chatpink
Tokyo Nightblue
Vesperorange
22atlasblue
432 Editorialblue
Accessible Goldyellow
Accessible Tealteal
Accessible Violetpurple
Adidasneutral
Ark Omnitek Phosphoryellow
Baroworksyellow
Blue Neoblue
Calmgreen
Cendriix Aurora Slatepurple
DevSec Mossgreen
Echelon Fleetgreen
Emerald Softyellow
Golden Linenyellow
Googleblue
Grupo Reisteal
Harbor Swissblue
IKEAblue
Illos Blueprintteal
Kubo Rentalgreen
McDonaldsyellow
Midatec v04blue
Midnight 2blue
Ocean SaaSblue
Frequently asked questions
What counts as a accessible theme?
We check 12 foreground/background pairs, such as primary-foreground on primary and muted-foreground on background, in both modes. All must reach 4.5:1.
How do I install a accessible theme?
Open any theme and copy its shadcn CLI command (npx shadcn@latest add …), or copy the Tailwind v4 CSS into app/globals.css, replacing the :root and .dark blocks.
Are these themes free?
Yes. Every theme on shadcnthemes.com is free to use in personal and commercial projects.
Can I customize a theme?
Yes. Click “Open in editor” on any theme to change colors, fonts, radius and shadows, check contrast, and export the result.