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

已关闭
  • 哪里不对？
#609 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@richshaw 已经在做这个了。

开始于 2026年10月30日。

  • #726 来自 @richshaw —— 未关闭

评估

难度
3/5
预计耗时
1-2 天
新手友好度
68/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
tailwindcss, typescript
领域
accessibility, frontend

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
19
派生
4
平均合并
21 小时 41 分钟
30 天内合并 PR
201

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

richshaw/OpenSignup 的其他 Issue

查看 richshaw/OpenSignup 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。