Features

Generator

• Pick a hex color via native color picker or text input
• Generates 15 design tokens for light and dark modes
• WCAG 2.1 contrast audit (AA, AAA, AA Large) for every color pair
• APCA Lc contrast values alongside WCAG ratios
• Color vision deficiency simulation (deuteranopia, protanopia, tritanopia, achromatopsia)
• Copy-paste CSS custom properties with prefers-color-scheme and data-theme support
• Click any swatch to copy its hex value

Site-Wide Modes

Three toggles in the navbar with tooltips and aria-pressed state:

Dark Mode

Toggles light/dark theme for the site itself (independent of generated themes). Respects prefers-color-scheme system preference on first visit.

A11y Mode

An accessibility enhancement layer that goes beyond baseline WCAG compliance:

Feature	How
Enhanced contrast	Overrides CSS custom properties to true black/white foregrounds
Larger text	Bumps root font-size to 112.5% (18px base)
No motion	CSS kills native transitions; Motion disabled via MotionConfig reducedMotion="always"
Stronger focus rings	3px solid outline with 4px offset on :focus-visible
Visible links	Underlines all links so they are not identified by color alone

Low Carbon Mode

Sustainability-focused mode that strips the page down to content only:

Feature	How
No images	LowCarbonImage component renders dashed-border alt-text placeholder instead of loading images
System fonts	CSS override to system-ui stack, eliminating web font downloads
No motion	CSS kills transitions; Motion disabled via MotionConfig reducedMotion="always"
No decorative effects	CSS strips box-shadow, text-shadow, backdrop-filter
Simplified cards	Card backgrounds set to transparent with border-only styling

Both modes can be active simultaneously. The CSS rules and React logic compose cleanly.