文字と背景の間に十分なコントラスト比を保つ
目的
現在のHelpfeelが達成できているか確認する
どのような基準がアクセシビリティとして大事なのかを理解する
3.2 必ず達成しなければならないもの
文字色と背景の間に、4.5:1 以上のコントラスト比がある（チェックツールによりある程度確認できる）必要があります。 配色を決めるときに合わせて検討しましょう。
https://gyazo.com/6dec7aabc78a40dd3316055ebef5fd5c
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次の場合は除く: (レベル AA)
大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
確認した結果
https://nota.gyazo.com/b6c7ca7d19f80723df51893ce7816898
使おうと思ったらなぜか存在していなかった...🥺 (mac chrome115)chubachi.icon
設定から有効にする必要はないはず？ pastak.icon
https://scrapbox.io/files/657fac359c276e0025a21476.png
なるほど！More toolsの中に入ってた...ありがとうございます！🙇♂️chubachi.icon
https://gyazo.com/fb1c7b823dc2b15c156f5118942eb866
LPでは青いリンクにしたところはコントラスト4.5を達成出来てます
https://gyazo.com/8436e71d35f24ec28621c7979c9811ca
上の「ソリューション」とかは残念ながら達成出来てないです
7/26のアクセシビリティオフィスアワーでpastakさんと話した時は、「ソリューション」の時は黒くして、下のバーとかボーダーでオレンジを使えば良いのではという案をもらいました 検索ページは結構お客さん毎にカスタマイズするのでお客さんも巻き込まないといけなくて大変……？
こちらも7/26のアクセシビリティオフィスアワーでpastakさんと話した時は、「FAQとしてはこうすると良いです」ってガイドラインを作って、FAQ作成の知見の一つとしてpushしていくと進めやすいのでは？という感じの案をもらいました +1balar.icon
なるほど、良さそうniboshi.icon
オレンジ色が大変ということがわかったbalar.icon
なるべく機械的に行いたいチェック項目。
hata.iconの目視だと判断難しそう。
https://nota.gyazo.com/0587eb589973962aa2377aa4efd02286
https://nota.gyazo.com/9b3126c7cbd55f21dad35cc378cee844
このあたりが灰色でコントラスト比が足りないらしい
https://nota.gyazo.com/9eb00065fdddd30ab4e0111fc853f1c2
こっちはシュッと治しても良さそう。hata.icon
基準値はたしかに4.5ですが、4.47から4.5にちゃんと治すほどでもないかも……? 一応プルリクエスト作ることはできると思います。
https://nota.gyazo.com/2407ed1fa096fb6a4d1316c66f32965b
目立たなくしたいという意図がある配色だと思うが、完全に見えなくなってしまうユーザがいる可能性があるのでよくないか
社内で使ってるHelpfeelの場合yado.icon
パーツとしてはchubachi.iconさんが指摘しているのと同じ "Powered by Helpfeel" だけど、このプロジェクトだと黄色背景が設定されているためさらに点数が低い
https://nota.gyazo.com/18821d2a1bc8c597526e047606bd4368
今回の項目はプロジェクトに設定されているスタイルによっても問題のある/なしが異なってきそうだなと思った
これは本当に見えづらいkohei-kimura.icon
改善タスク