Skip to content

fix: improve feature card readability and contrast (#319)#405

Closed
Jai-Shankar1033 wants to merge 2 commits into
Dev-Card:mainfrom
Jai-Shankar1033:fix/feature-card-contrast-319
Closed

fix: improve feature card readability and contrast (#319)#405
Jai-Shankar1033 wants to merge 2 commits into
Dev-Card:mainfrom
Jai-Shankar1033:fix/feature-card-contrast-319

Conversation

@Jai-Shankar1033

Copy link
Copy Markdown

Summary

Improves the readability and accessibility of feature cards on the landing page.
Fixes low text contrast, conflicting CSS rules, and light/dark theme inconsistencies.
Closes #319


Type of Change

  • Bug fix
  • UI / Design change

What Changed

  • Removed glass class from all 3 feature cards (was breaking light mode display)
  • Removed 4 duplicate/conflicting .feature-card CSS rules
  • Added explicit color: var(--text-primary) on .feature-card h3 for reliable heading contrast
  • Added background 0.35s ease to transition for smooth theme switching
  • Dark mode body text upgraded to #e2e8f0 (~11:1 contrast ratio ✅ WCAG AAA)
  • Enhanced dark mode border visibility rgba(255,255,255,0.18)
  • Smooth hover effect: translateY(-6px) + indigo glow shadow in both themes
  • Removed duplicate @media (max-width: 640px) block

How to Test

  1. Run cd apps/web && pnpm dev and open http://localhost:5173
  2. Scroll to feature cards — verify text is clearly readable in dark mode
  3. Click the theme toggle button — verify cards display correctly in light mode
  4. Hover over cards — verify smooth lift + indigo border glow animation

Checklist

  • My code follows the project's coding style (pnpm -r run lint passes).
  • TypeScript compiles without errors (pnpm -r run typecheck).
  • I have added or updated tests for the changes I made.
  • All tests pass locally (pnpm -r run test).
  • I have updated documentation where necessary.
  • No new console.log or debug statements left in the code.
  • Breaking changes are documented in this PR description.

Screenshots / Recordings

ezgif-8cb2c3c4386c6433

Additional Context

Feature cards previously had hardcoded dark backgrounds that ignored the light theme and 4 conflicting CSS rules causing unpredictable rendering. All contrast ratios now meet WCAG AA or AAA standards in both themes.

@Harxhit Harxhit added the gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking. label May 30, 2026
@ShantKhatri

Copy link
Copy Markdown
Contributor

Hi @Jai-Shankar1033 , we have moved from Svelt and have now migrated to React, so it's recommended to make changes with the new architecture. I'll be happy to review your updated PR. Closing this for now.

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

Labels

gssoc:approved Required label for every approved PR. Gives the base +50 points and enables contribution tracking.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FIX] Improve Feature Card Readability and Contrast

3 participants