Skip to content

fix: improve contrast for gradient actions - #166

Open
efegokdemir wants to merge 1 commit into
StellarTickets:mainfrom
efegokdemir:fix/accessible-action-gradient
Open

efegokdemir wants to merge 1 commit into
StellarTickets:mainfrom
efegokdemir:fix/accessible-action-gradient

Conversation

@efegokdemir

Copy link
Copy Markdown

Summary

Fixes #149 by giving interactive gradient actions darker stops that preserve the existing brand gradient while meeting WCAG AA contrast for white text.

Changes

  • Add a dedicated --gradient-action token with contrast-safe violet, magenta, and amber stops.
  • Add the bg-gradient-action utility.
  • Apply the accessible gradient to authentication, navigation, marketplace, ticket, verification, dashboard, and pill action controls.
  • Keep the original bg-gradient-sunset for decorative and non-interactive brand surfaces.

Testing

  • npm run lint
  • npx tsc --noEmit
  • npm test -- --run (5 files, 20 tests passed)
  • npm run build
  • git diff --check
  • Contrast sampled across the gradient: white text remains at least 4.5:1 at all stops and sampled intermediate positions.

Notes

The original brand gradient remains unchanged for decorative uses; interactive controls use a separate token so the contrast fix does not alter the broader visual identity.

@netlify

netlify Bot commented Sep 21, 2026 •

Copy link
Copy Markdown

❌ Deploy Preview for stellartickets failed.

Name Link
🔨 Latest commit d66e2ef
🔍 Latest deploy log https://app.netlify.com/projects/stellartickets/deploys/6ab900eb8b13c40008fa255d

@efegokdemir
efegokdemir force-pushed the fix/accessible-action-gradient branch from 388531c to d66e2ef Compare September 27, 2026 11:41
@efegokdemir

Copy link
Copy Markdown
Author

Rebased onto latest main and resolved the contrast conflict by carrying the action-gradient change into the current shared Button variant. Validation: git diff --check; TypeScript validation is blocked by an existing syntax error in src/app/my-tickets/page.tsx.

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.

White text on the amber end of the brand gradient fails contrast

1 participant