Accessibility

We build everything for our users. These recommendations help keep the design system usable and accessible.

Contrast

• Text: Use --fg-primary on --bg-root / --bg-canvas / --bg-card. Use --fg-secondary or --gold-text for supporting text; avoid low-contrast gray on dark.
• Charts & diagrams: Edges and labels must be visible. Use --gold-text, --border-strong, or --fg-primary for 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 via aria-describedby when 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.