Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#609 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
68/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
tailwindcss, typescript
Área
accessibility, frontend

Línea de trabajo

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.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
TypeScript
Estrellas
19
Forks
4
Merge medio
20 h 9 min
PR fusionados (30 d)
156

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de richshaw/OpenSignup

Todos los issues de richshaw/OpenSignup

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.