Accessibility
We build everything for our users. These recommendations help keep the design system usable and accessible.
Contrast
- Text: Use
--fg-primaryon--bg-root/--bg-canvas/--bg-card. Use--fg-secondaryor--gold-textfor supporting text; avoid low-contrast gray on dark. - Charts & diagrams: Edges and labels must be visible. Use
--gold-text,--border-strong, or--fg-primaryfor lines and labels. Node fills with group color at ~25% opacity plus a solid stroke pass contrast. - Buttons: Primary (gold) on dark meets contrast; ensure focus ring is visible (
focus:ring-2 focus:ring-gold).
Tooltips
- Provide visible focus and a keyboard-accessible trigger (button or link). Avoid tooltips on hover-only elements that can’t receive focus.
- Keep tooltip content short. Use
role="tooltip"and associate with the trigger viaaria-describedbywhen possible. - Ensure the tooltip has sufficient contrast (e.g.
bg-bg-card,text-fg-secondary,border-border-strong).
Focus and keyboard
- All interactive elements must be focusable and show a clear focus ring (gold or theme accent). Use
focus:outline-none focus:ring-2 focus:ring-gold. - Touch targets: minimum 44×44 px for buttons, links, and controls (see Responsive & mobile).
Motion and animation
- Respect
prefers-reduced-motion. Consider disabling or shortening animations when the user requests reduced motion. - Don’t rely on motion alone to convey information.
Summary
- Contrast: use design tokens; avoid faint gray on dark.
- Tooltips: keyboard-accessible trigger, short content, visible focus.
- Focus: visible ring on all interactive elements.
- Touch: 44×44 px minimum; see responsive guidance.