Why does a shadcn theme need accessibility validation?

shadcn's convention pairs every background token with a matching foreground token, but nothing in the framework itself checks that the pairing stays readable. A theme editor that only shows a live preview can produce a foreground/background pair under 3:1 contrast without any warning.

What is the difference between --primary and --primary-foreground?

--primary is the background token for a filled surface like a primary button; --primary-foreground is the text or icon color that sits on top of it. shadcn components read both tokens together, so they need to be generated and checked as a pair, not independently.

Does this work with the shadcn dark mode convention?

Yes. Paletta generates both a :root block and a .dark block, validating contrast separately for each, since a pairing that clears AA in light mode does not automatically clear AA in dark mode.

Can I use this with an existing shadcn project?

Yes. The exported CSS block follows the same variable names shadcn's CLI scaffolds, so it drops into an existing globals.css in place of the current :root and .dark blocks.

INTEGRATION

shadcn theme generator with accessibility

shadcn's convention pairs every background token with a matching foreground token, --primary and --primary-foreground, for example, but nothing in the framework checks that the pairing stays readable. Paletta generates the full paired token set from one seed color and validates every foreground/background pair against WCAG 2.2 before export.

Updated 2026-07-15

How it works

1
Pick a seed color
Choose the color that becomes the shadcn --primary token.
2
Generate paired tokens
Paletta computes matching foreground tokens, --primary-foreground, --card-foreground, and the rest, for every background token.
3
Validate every pair
Each foreground/background combination is checked against WCAG 2.2 and flagged if it drops below AA.
4
Export the CSS block
Copy a :root and .dark block ready for globals.css, validated separately for light and dark mode.

EXPORT

shadcn CSS variables

Copy and paste directly into your project.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.546 0.215 262.9);
  --primary-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
}

Frequently asked questions

Related integrations

generate a Tailwind v4 theme

Generate a full Tailwind v4 color palette from one seed color, validated for WCAG contrast, and export a ready-to-paste @theme CSS block.

sync palettes to Figma Variables

Sync generated color tokens into Figma Variables and pull edits back, so a Figma file and a codebase never drift out of sync on colors.

Try it on your own colors

Generate a validated palette, then export it in the format above.

Generate an accessible shadcn theme

How it works

Pick a seed color

Generate paired tokens

Validate every pair

Export the CSS block