Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#609 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
tailwindcss, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
19
Fork
4
Merge trung bình
20 giờ 9 phút
Pull request đã merge (30 ngày)
156

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của richshaw/OpenSignup

Tất cả issue của richshaw/OpenSignup

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.