ModerneDesign system

Dark mode explorer

Foundations

Accessibility

Every text and UI color pair in both themes is checked against WCAG 2.1 AA. The audit is a script — .context/ds-a11y-check.mjs — run with node; it currently reports 0 failures. Thresholds: normal text ≥ 4.5:1, large/bold text & UI graphics ≥ 3.0:1.

Color is never the only signal. Status always pairs the hue with an icon, a dot, and a text label (see the data-display and feedback pages), so red/green meaning survives for color-blind users (DESIGN.md §8). Focus is shown with a visible :focus-visible ring on the primary color, and all looping motion honors prefers-reduced-motion.

Light theme — contrast ratios

AA pass at every row
PairTokensRatioMinResult
Body text on cardink-dim / panel9.764.5Pass
Labels on canvasmuted / bg5.094.5Pass
Primary link / textprimary-ink / panel7.104.5Pass
Button label on primaryon-primary / primary7.104.5Pass
Success textgreen-ink / panel7.134.5Pass
Error textred-ink / panel6.584.5Pass
Label on danger buttonwhite / danger5.714.5Pass
Rainbow inks (darkest→lightest)cat-*-ink / panel4.88–6.324.5Pass
Faint caption (large only)muted2 / bg3.473.0Pass

Dark theme — contrast ratios

AA pass at every row
PairTokensRatioMinResult
Body text on cardink-dim / panel9.174.5Pass
Labels on canvasmuted / bg6.074.5Pass
Primary link / textprimary-ink / panel9.084.5Pass
Button label on primaryon-primary / primary5.204.5Pass
Success textgreen-ink / panel10.674.5Pass
Error textred-ink / panel8.194.5Pass
Label on danger buttonwhite / danger4.804.5Pass
Rainbow inkscat-*-ink / panel6.81–11.484.5Pass
Faint caption (large only)muted2 / bg3.343.0Pass

Re-run the audit

node .context/ds-a11y-check.mjs

The script holds the literal token values and computes WCAG relative-luminance contrast for every meaningful pair, exiting non-zero on any failure — so it can gate CI later. When a token changes, re-run it and update the rows above.