Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#609 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
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時間 3分
マージ済み PR（30日）
176

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。