color-system-design

Build an accessible color palette by constructing perceptually uniform OKLCH color scales and mapping them to semantic tokens that resolve independently per theme. This ensures visual consistency and meets WCAG 2.1 contrast minima across both modes.

Semantic color tokens define UI colors by intent, such as background-surface or text-primary, rather than hardcoded values. This abstraction allows the same token to resolve to different OKLCH values depending on the active light or dark theme.

Check WCAG contrast ratios by auditing semantic token pairings, like text on background, against both light and dark surfaces. The process verifies that token combinations meet WCAG 2.1 contrast minima and can incorporate APCA-aware checks.

Use OKLCH for generating color scales because it provides perceptual uniformity, meaning equal numeric steps map to equal perceived lightness changes. Standard RGB and HSL lack this perceptual consistency, causing uneven visual transitions.

Fix failing contrast issues by auditing the existing palette for WCAG failures and proposing minimal, semantically consistent OKLCH-based adjustments. This corrects both light and dark theme mappings while maintaining deterministic naming for development.

You can audit an existing color palette for accessibility without a full rebuild by checking specific token pairings against WCAG 2.1 contrast minima. The system proposes minimal OKLCH adjustments to resolve failures while keeping current semantic mappings intact.