Accessibility

Color-vision deficiency check

Simulates the Flux Beam palette for protanopia, deuteranopia, and tritanopia using Machado et al. (2009) confusion-line matrices, then re-checks WCAG contrast for every text and UI surface pair we ship.

How to read this

Each row is a real foreground/background pair from the design tokens. Each column simulates how that pair looks under a different vision type. The badge reports the WCAG 2.1 contrast ratio after simulation; any pair below threshold is flagged.

Same checks run automatically in CI (cvd-contrast.test.ts) so future palette changes can't silently regress CVD users.

light theme

Each pair is simulated under three CVD types. WCAG AA: text ≥ 4.5:1, UI ≥ 3:1.

All 0 checks pass

Accessibility summary

0/0 passing

All 0 contrast checks pass in the light theme at the current severity settings.

Simulating protanopia full (100%), deuteranopia full (100%), and tritanopia full (100%).

Token editor — tweak values live

Background--background

Foreground--foreground

Card--card

Card foreground--card-foreground

Primary--primary

Primary foreground--primary-foreground

Secondary--secondary

Secondary foreground--secondary-foreground

Accent--accent

Accent foreground--accent-foreground

Gold (signal)--gold

Gold foreground--gold-foreground

Destructive--destructive

Destructive foreground--destructive-foreground

Muted foreground--muted-foreground

Ring--ring

0 of 16 tokens overridden

Edits live in this preview only — they don't modify styles.css. Copy the snippet above into the theme block when you're happy. Base values shown reflect the current loading… tokens.

CVD severity

Use ← → or ↑ ↓ to adjust by 1%, Page Up / Page Down for 10%, and Home / End to jump to 0% or 100%. Updates apply live to all checks below.

Protanopia (no red cones)100%

NoneAnomalousFull

Deuteranopia (no green cones)100%

NoneAnomalousFull

Tritanopia (no blue cones)100%

NoneAnomalousFull

Contrast results for the light palette across normal vision and three CVD types.
Pair	Normal vision	Protanopia (no red cones)	Deuteranopia (no green cones)	Tritanopia (no blue cones)

dark theme

Each pair is simulated under three CVD types. WCAG AA: text ≥ 4.5:1, UI ≥ 3:1.

All 0 checks pass

Accessibility summary

0/0 passing

All 0 contrast checks pass in the dark theme at the current severity settings.

Simulating protanopia full (100%), deuteranopia full (100%), and tritanopia full (100%).

Token editor — tweak values live

Background--background

Foreground--foreground

Card--card

Card foreground--card-foreground

Primary--primary

Primary foreground--primary-foreground

Secondary--secondary

Secondary foreground--secondary-foreground

Accent--accent

Accent foreground--accent-foreground

Gold (signal)--gold

Gold foreground--gold-foreground

Destructive--destructive

Destructive foreground--destructive-foreground

Muted foreground--muted-foreground

Ring--ring

0 of 16 tokens overridden

Edits live in this preview only — they don't modify styles.css. Copy the snippet above into the theme block when you're happy. Base values shown reflect the current loading… tokens.

CVD severity

Use ← → or ↑ ↓ to adjust by 1%, Page Up / Page Down for 10%, and Home / End to jump to 0% or 100%. Updates apply live to all checks below.

Protanopia (no red cones)100%

NoneAnomalousFull

Deuteranopia (no green cones)100%

NoneAnomalousFull

Tritanopia (no blue cones)100%

NoneAnomalousFull

Contrast results for the dark palette across normal vision and three CVD types.
Pair	Normal vision	Protanopia (no red cones)	Deuteranopia (no green cones)	Tritanopia (no blue cones)