[UI/UX Design] Design a dark-mode tooltip and axis label contrast pass for charts #491

[Dubemtopsite]

Description

Chart tooltips and axis labels can disappear on dark chart surfaces: the previous tooltip border (#334155) failed WCAG 2.1 AA non-text contrast (1.4.11) at ~1.7:1, and tooltip/axis tokens were only sparsely documented. This PR is a contrast pass that establishes tokenized tooltip surfaces, foregrounds, and borders plus axis-label size/color/weight for dark surfaces, and documents the system with live usage examples in the Design Tokens tool.

Closes #491

What changed

Tokenized contrast definitions (src/index.css, src/pages/DesignTokens/tokens.ts)

• --chart-tooltip-bg #0f172a (Slate 900) — tooltip surface layered above the #020617 chart surface
• --chart-tooltip-fg #f8fafc (Slate 50) — 17.1:1 text contrast on the tooltip surface (WCAG 1.4.3)
• --chart-tooltip-border #334155 → #64748b (Slate 500) — 3.75:1 non-text boundary contrast against the tooltip surface and 4.24:1 against the app surface (WCAG 1.4.11)
• --chart-axis-label-color #94a3b8 (Slate 400) — 7.87:1 on #020617 (≥ 4.5:1 for 12px small text)
• --chart-axis-label-size 0.75rem (12px base, rem-based so it reflows with 200% zoom / large-text preferences)
• --chart-axis-label-weight 500 — new, keeps 12px axis text crisp on dark surfaces

All tokens now carry WCAG-documented descriptions in the Design Tokens tool.

Usage examples in the Design Tokens page (ChartTooltipContrastDemo.tsx)

New section — "Dark-Mode Tooltip & Axis Label Contrast" — rendered between the categorical palette guidelines and the token tables:

• Live preview: a mini bar chart with tooltip + axis labels that exercises the actual tokens (CSS variables) on the dark surface, and shows a mirrored light-surface equivalent when the surface toggle is set to Light
• Contrast verification matrix: each token, its value, and a computed WCAG ratio badge (4.5:1 for text / 3:1 for non-text boundaries)
• Usage example code snippet showing how to apply the tokens
• Do's & Don'ts cards (e.g., never use < 3:1 tooltip borders; don't shrink axis text below spec)
• Accessibility & responsive notes covering WCAG 1.4.3, 1.4.11, 1.4.4, forced-colors/high-contrast mode, RTL logical properties, reduced motion, and 320px responsiveness

Validation

• WCAG 2.1 AA contrast (computed via contrast.ts):
  • Tooltip foreground vs tooltip surface: 17.1:1 (AA/AAA) — dark; 14.6:1 — light mirror
  • Tooltip border vs tooltip surface: 3.75:1 (≥ 3:1 non-text) — dark; 4.76:1 — light mirror
  • Axis label vs chart surface: 7.87:1 (AA) — dark; 7.58:1 — light mirror
• Accessibility: jest-axe reports 0 violations on the new section in both dark and light surfaces
• Tests: 52 tests pass in the DesignTokens suite (including 13 new tests). New component coverage is 100% statements/lines/functions, 96.7% branches (the single uncovered branch is the fail-styling path for an invalid token, unreachable with the passing token set)
• Lint/TS: new and modified files are clean (eslint + tsc --noEmit). Pre-existing repo-wide lint/type/test failures (e.g., DistributionDashboard.tsx, AuditTrail.tsx, KycSelfieCapture.tsx, Tabs.tsx) are unrelated and unchanged by this PR

Edge cases covered

• High-contrast / forced-colors mode: text and borders follow the system forced-colors palette
• Large-text / 200% zoom: rem-based axis sizing reflows
• RTL: axis rows and tooltip positioning use logical CSS properties (inset-inline, text-align: start)
• Responsive: chart demo reflows down to 320px viewports

[drips-wave]

@Dubemtopsite Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits