Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Switch): 未選択時のコントラスト比を 3:1 確保する #5027

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

daiHash
Copy link
Contributor

@daiHash daiHash commented Oct 18, 2024

関連URL

https://smarthr.atlassian.net/browse/SHRUI-1072

概要

  • Switchは非テキストとして、未選択時のコントラスト比をミニマムでも3:1を確保したい
  • 視覚障害を持つユーザーや色を見分けることが難しいユーザーが内容が見やすくなる
  • borderもコントラスト比をミニマムでも3:1を確保したいけど、他のform control componentも影響があるため、まとめて別途検討する

変更内容

  • 未選択時のSwitchのコントラスト比をミニマムでも3:1を確保するために、つまみの部分のカラーを変更する
    • #c1bdb7(TEXT_DISABLED) から #706d65(TEXT_GREY)
    • コントラスト比:1.87:1 => 5.16:1

Reduced contrastで検証

BEFORE AFTER
Switch componentのコントラスト比改善前の画面のReduced contrast設定されてるstorybookの画面 Switch componentのコントラスト比改善後の画面のReduced contrast設定されてるstorybookの画面

確認方法

Storybook や Chromatic で確認してください。

@daiHash daiHash self-assigned this Oct 18, 2024
@daiHash daiHash requested a review from a team as a code owner October 18, 2024 03:37
@daiHash daiHash requested review from s-sasaki-0529 and uknmr and removed request for a team October 18, 2024 03:37
Copy link

pkg-pr-new bot commented Oct 18, 2024

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5027

commit: eae7353

Copy link
Contributor

@uknmr uknmr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nits なコメント一つ付けています🙏

packages/smarthr-ui/src/components/Switch/Switch.tsx Outdated Show resolved Hide resolved
@daiHash daiHash requested a review from uknmr October 18, 2024 05:21
Copy link
Contributor

@uknmr uknmr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants