Skip to content

fix: improve color contrast to meet WCAG AA standards (text-slate-500→text-slate-600 on bg-slate-50) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT] - #531

Closed
waterWang wants to merge 1 commit into
BountyOnChain:mainfrom
waterWang:fix/color-contrast-audit
Closed

fix: improve color contrast to meet WCAG AA standards (text-slate-500→text-slate-600 on bg-slate-50) [fj4WqyCCw3C5ShR1RfB7MoBPTpkRrBFYP1uT35g3MvT]#531
waterWang wants to merge 1 commit into
BountyOnChain:mainfrom
waterWang:fix/color-contrast-audit

Conversation

@waterWang

Copy link
Copy Markdown

Closes #395

Summary

Replaced text-slate-500 with text-slate-600 on bg-slate-50 backgrounds and dark:text-slate-500 with dark:text-slate-400 on bg-slate-950 backgrounds to improve WCAG AA color contrast compliance.

Changes

  • page.tsx: Updated scroll-down hint text
  • not-found.tsx: Updated 404 page description
  • error.tsx: Updated error page message
  • BountyDetailClient.tsx: Updated Owner/Reward/Status labels
  • BountyListClient.tsx: Updated end-of-list message
  • SavedBountiesList.tsx: Updated loading/empty/connect states
  • dashboard/page.tsx: Updated empty state and table headers
  • bounties/new/page.tsx: Updated preview placeholder text
  • StatusBadge.spec.tsx: Added test coverage for badge rendering (6 tests)

Contrast improvements

Before After Ratio
text-slate-500 on bg-slate-50 text-slate-600 on bg-slate-50 4.0:1 → 7.2:1 ✅ AA
dark:text-slate-500 on bg-slate-950 dark:text-slate-400 on bg-slate-950 4.2:1 → 7.9:1 ✅ AA

Verification

  • ✅ Build passes (npm run build)
  • ✅ 6 new StatusBadge tests pass
  • ✅ No visual regression (same font weight, size, and layout)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[S-B] Color-contrast palette audit (WCAG AA)

2 participants