Skip to content

fix(a11y): resolve WCAG AA contrast failures in light theme and dashb…#2191

Merged
Priyanshu-byte-coder merged 1 commit into
Priyanshu-byte-coder:mainfrom
Antra1705:fix/wcag-contrast-dashboard-a11y
Jun 8, 2026
Merged

fix(a11y): resolve WCAG AA contrast failures in light theme and dashb…#2191
Priyanshu-byte-coder merged 1 commit into
Priyanshu-byte-coder:mainfrom
Antra1705:fix/wcag-contrast-dashboard-a11y

Conversation

@Antra1705
Copy link
Copy Markdown
Contributor

Summary

Resolved WCAG AA color contrast failures in the modern-light-blue theme identified via Lighthouse accessibility audit. Three color token fixes across globals.css, StatsCard.tsx, and LandingPage.tsx.

Closes #1335


Type of Change

  • Bug fix
  • New feature
  • Documentation update
  • Refactor / code cleanup

Changes Made

  • globals.css: Updated --accent from #5b8def (3.04:1) to #2563eb (4.85:1 — WCAG AA pass)
  • globals.css: Updated --accent-secondary from #8eb7ff to #1d4ed8 (6.70:1 — WCAG AA pass)
  • globals.css: Synced --focus-ring with updated primary accent
  • StatsCard.tsx: Replaced hardcoded #6b7280 unit label color with #4b5563 (4.68:1 — WCAG AA pass)
  • LandingPage.tsx: Replaced hardcoded #10b981 terminal comment color (2.46:1) with var(--success) token, resolving to #059669 in light mode (4.85:1)

How to Test

  1. Switch to modern-light-blue theme
  2. Run Lighthouse accessibility audit — contrast failure should be resolved
  3. Verify dashboard card unit labels and terminal mock comments are legible
  4. Confirm no visual regressions in dark theme

Screenshots (if UI change)

Before
Screenshot 2026-06-07 at 10 53 49 PM

After
Screenshot 2026-06-07 at 11 04 44 PM

Before
before

After
Screenshot 2026-06-07 at 11 06 55 PM

Before
Screenshot 2026-06-07 at 11 01 50 PM

After
Screenshot 2026-06-07 at 11 07 13 PM


Checklist

  • Linked issue in summary
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Self-reviewed the diff
  • Added/updated tests if applicable

Accessibility Checklist

  • Proper keyboard navigation tested
  • Responsive UI verified
  • Accessibility labels added where needed

Additional Notes

  • 20 pre-existing test failures exist on dev branch — confirmed identical before and after this PR (verified via git stash + npx vitest run). Zero new failures introduced.
  • Contrast ratios verified using Chrome DevTools color picker and WebAIM contrast checker.
  • Dark theme aesthetics preserved — fixes scoped to modern-light-blue theme tokens only.

@vercel
Copy link
Copy Markdown

vercel Bot commented Jun 7, 2026

@Antra1705 is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added gssoc26 GSSoC 2026 contribution type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) labels Jun 7, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 7, 2026

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@Priyanshu-byte-coder Priyanshu-byte-coder added gssoc:approved GSSoC: PR approved for scoring level2 GSSoC Level 2 - Medium complexity (25 points) quality:clean GSSoC: Clean quality multiplier (×1.2) labels Jun 8, 2026
@Priyanshu-byte-coder Priyanshu-byte-coder merged commit 351d19f into Priyanshu-byte-coder:main Jun 8, 2026
5 checks passed
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Jun 8, 2026

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!

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

Labels

gssoc:approved GSSoC: PR approved for scoring gssoc26 GSSoC 2026 contribution level2 GSSoC Level 2 - Medium complexity (25 points) quality:clean GSSoC: Clean quality multiplier (×1.2) type:accessibility GSSoC type bonus: accessibility (+15 pts) type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility Issue: Low Color Contrast in Dashboard UI Elements

2 participants