Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

White text on the blue buttons drops below 4.5:1 contrast on hover

Aperta
  • Qualcosa non va?
#609 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
68/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
tailwindcss, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Read the 17 hover:brightness-110 usages in src, including src/components/signup/header-buttons.ts; note that the PRIMARY stack is not on main yet. Compare the existing hover colours in the consent form and sign-in link, then apply the chosen treatment across the affected buttons and check that white text stays above 4.5:1 contrast. Done means no affected white-text bg-brand button uses hover:brightness-110 and the listed lint, typecheck, knip, and test commands pass.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug pipeline:proposed pipeline:ux

Needs your OK: choosing the hover colour is a small design call. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

  • The hover style lightens the button. Most blue (bg-brand) buttons use hover:brightness-110. That includes the signup header's PRIMARY style (src/components/signup/header-buttons.ts on the "Publish and share" stack): Publish and share, Share, and Reopen signup (#608). In all, 17 places in src use hover:brightness-110.
  • The contrast drops below what normal-size text needs. At rest, white text on #1f6feb is 4.63:1, which passes WCAG 1.4.3's 4.5:1. Brightened by 10% to about #227aff, it's 3.97:1. These labels are 13–15px, so they need 4.5:1.
  • Axe doesn't catch it. It checks the colours at rest, not on hover.
  • Found while reviewing #608.

Fix, in outline

  • Darken on hover instead of lightening. Use hover:bg-[#1658c4], the hover colour the OAuth consent button (src/app/oauth/consent/[uid]/consent-form.tsx) and the sign-in link (src/app/login/confirm/sign-in-link.tsx) already use. Better still, add it as a brand-hover colour in tailwind.config.ts and use that everywhere.
  • Leave the disabled style alone. disabled:brightness-90 on PRIMARY darkens, so it's fine as it is.
  • Or drop the hover change on these buttons altogether. That's simpler, but gives no hover feedback.

Watch for

  • PRIMARY only exists on the "Publish and share" stack (#571 → #581), not on main yet. Build this after that stack lands, or change PRIMARY there as well as the other 16 places.
  • The text never gets bigger on hover. These buttons stay "normal text" for WCAG, so 4.5:1 is the bar on hover too, not 3:1.

Choices this makes

Darkening on hover, with the colour the consent and sign-in buttons already use, rather than a new one.

Done when

  • No bg-brand button with white text uses hover:brightness-110.
  • White on the hover colour is at least 4.5:1 (#1658c4 gives 6.51:1).
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

https://claude.ai/code/session_01LrYa57fvbqWjZj89iH975K

Lingua principale
TypeScript
Stelle
19
Fork
4
Merge medio
20h 9m
PR unite (30g)
156

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di richshaw/OpenSignup

Tutte le issue di richshaw/OpenSignup

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.