Accessible Palette Generation

1Install

Pick your package manager — the command updates to match.

pnpm add @themvora/core

Using a framework? Its adapter is a separate package — see the framework guides for the provider setup, then come back for the pattern.

2Implement

Drop this into your project. It is the whole pattern — no other setup is required.

import {
  getContrastRatio,
  validateThemeContrast,
} from "@themvora/core";

// Contrast ratio between two colors.
// WCAG 2.1 AA needs 4.5:1 for normal text and 3:1 for large text.
const ratio = getContrastRatio("#000000", "#ffffff");
console.log(ratio.toFixed(2), ratio >= 4.5 ? "passes AA" : "fails AA");

// Validate every semantic pair in a theme at once
const result = validateThemeContrast(theme);
if (!result.valid) {
  console.error(
    "Failing pairs:",
    result.checks.filter((c) => !c.passesAANormal),
  );
}

3Why this works

Use getContrastRatio to check an individual color pair against the WCAG thresholds, and validateThemeContrast to audit every semantic pair in a theme in one pass. The Accessibility Lab runs both against the active theme in real time.

4Verify

• ✓The page loads with no console errors after the change.
• ✓The outcome holds: wCAG-compliant color tokens
• ✓Toggling the theme in your app still works, and the state survives a reload if persistence is configured.
• ✓Reduced-motion users see no animation if you enabled transitions.