"Accessibility-first theming: contrast checks and CVD simulation"

A gorgeous palette that fails WCAG contrast is a bug, not a design choice. Theme Kit ships a runtime accessibility toolkit so you can catch contrast failures and color-vision problems before your users do.

Contrast ratios, live

getContrastRatio(foreground, background) returns the WCAG 2.x ratio, and checkContrastPair annotates it with AA/AAA conformance and a pass/fail verdict:

1import { getContrastRatio, checkContrastPair } from "@theme-kit/core";
2
3getContrastRatio("#111111", "#ffffff"); // → 19.56
4checkContrastPair("#777777", "#ffffff");
5// → { foreground: "#777777", background: "#ffffff", ratio: 4.54,
6//     passesAANormal: false, passesAALarge: true,
7//     passesAAANormal: false, passesAAALarge: false }

Auditing a whole theme

validateThemeContrast walks every semantic token pair — text-on-surface, text-on-primary, borders, and more — and returns a structured report of failures:

1import { validateThemeContrast } from "@theme-kit/core";
2
3const result = validateThemeContrast(theme, { themes: [theme] });
4// { valid: false, checks: [{ foregroundToken, backgroundToken,
5//   foreground, background, ratio, passesAANormal, passesAALarge,
6//   passesAAANormal, passesAAALarge }] }

Color-vision deficiency simulation

simulateCVD(color, type) converts a color as seen with protanopia, deuteranopia or tritanopia, and simulateThemeForCVD does the same for an entire theme. Combined with the runtime, you can preview exactly what a user with CVD sees:

import { simulateThemeForCVD, getCVDLabel } from "@theme-kit/core";

const deuteranopic = simulateThemeForCVD(theme, "deuteranopia");

Built-in accessibility profiles

For teams that need guaranteed contrast, Theme Kit ships getAccessibilityProfiles with High Contrast and Large Text presets — drop them in as theme packs and let users opt in.

Every feature above is demonstrated live on /accessibility, where you can check any two colors, audit the current theme, and apply a CVD-simulated theme to this very site.