Design system contents

Accessibility

Contrast evidence

Measure theme and accent combinations after compositing source alpha surfaces.

On this page

Method

The contrast export uses WCAG relative luminance and alpha-composites text/surfaces on the documented canvas. It evaluates foreground, muted copy, purple primary text, full accent foreground and 65% tile-surface foreground for each accent in light and dark. These are known solid-canvas pairs, not an accessibility certification.

Measured results

Measured results
Theme / roleRatioNormal text 4.5:1
light / foreground on canvas18.05Pass
light / muted on canvas5.59Pass
light / muted-strong on canvas9.92Pass
light / primary on canvas5.83Pass
light / Default solid19.68Pass
light / Default 65% tile6.59Pass
light / Sage solid10.3Pass
light / Sage 65% tile12.58Pass
light / Sky solid9.62Pass
light / Sky 65% tile12.05Pass
light / Rose solid7.86Pass
light / Rose 65% tile10.56Pass
light / Lavender solid8.38Pass
light / Lavender 65% tile11.13Pass
light / Peach solid9.53Pass
light / Peach 65% tile11.94Pass
light / Gold solid10.57Pass
light / Gold 65% tile12.78Pass
dark / foreground on canvas17.68Pass
dark / muted on canvas9.71Pass
dark / muted-strong on canvas14.2Pass
dark / primary on canvas3.12Below threshold
dark / Default solid17.58Pass
dark / Default 65% tile7.6Pass
dark / Sage solid4.48Below threshold
dark / Sage 65% tile8Pass
dark / Sky solid4.78Pass
dark / Sky 65% tile8.39Pass
dark / Rose solid5.95Pass
dark / Rose 65% tile9.83Pass
dark / Lavender solid5.99Pass
dark / Lavender 65% tile9.81Pass
dark / Peach solid4.47Below threshold
dark / Peach 65% tile8.01Pass
dark / Gold solid3.98Below threshold
dark / Gold 65% tile7.33Pass

Limits and action

Wallpaper, blur, gradients, disabled opacity, red validation, yellow migration guidance, public icon discs and hover states require additional composed-pixel review. Borders are intentionally subtle and may not provide 3:1 non-text contrast on their own.

Several custom accent tile combinations fall below the normal-text threshold; the actual ratios determine which. Keep the observed colors in documentation and describe remediation, rather than silently recoloring the screenshots.

Source references

Source references
Repository fileResponsibility
app/globals.cssAlpha and theme roles
lib/style-preferences.tsAccents

Interface examples

Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.

Link Grid Default Desktop Light · Component detail · Light · Desktop · 2096 × 448 px
Accent Picker Sage Desktop Light · Component detail · Light · Desktop · Sage · 2200 × 288 px

Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0