UI/UX: Audit and fix color-contrast of tier and status badges across light/dark themes

[Baskarayelu]

Description

The Badge component (src/components/Badge.tsx, Badge.css) renders tier (bronze/silver/gold/platinum) and status (active/locked/slashed/grace-period) variants from surface/border/text token triplets in src/index.css. Some pairings (e.g. gold text #854d0e on #fefce8, silver on slate) need verification against WCAG AA, especially once dark theme overrides apply. We need a contrast audit across both themes and corrected token pairings where any badge fails.

Requirements and context

• UI/UX scope only — contrast audit and token adjustment.
• Reference src/components/Badge.css and the tier/status tokens in src/index.css plus dark-theme overrides.
• Test every variant against WCAG AA (4.5:1 text, 3:1 for large/borders) in light and dark.
• Document pass/fail per variant and propose minimal token tweaks.

Suggested execution

• Branch: uiux/badge-contrast-audit.
• Adjust offending tokens/badge styles; record a results matrix.
• Deliver: contrast matrix (variant × theme) and updated values.

Test and commit

• Visual QA at 375px and 1280px in both themes.
• npm run build and npm run lint pass.
• a11y checks: all badge variants meet WCAG AA contrast.

Example commit message

fix(uiux): correct badge color contrast for WCAG AA across themes

Guidelines

• Clear documentation of the contrast matrix.
• Design consistency across tier/status badges.
• Timeframe: 96 hours