色弱者用にチャートで使われる色を変更

[rikilele]

⛏ 変更内容

• 検査実施数チャートの緑が見分けにくい
• 明暗の差を大きくするため [その他] の緑を薄くする
• 東京都カラーユニバーサルデザインガイドライン
• 他に色を変えたい箇所があればこの PR で対応できます！
• 明暗の他にも 緑 <-> 青 <-> 淡い水色（or 灰色）でもいけそうです

📸 スクリーンショット

Before:

After:

[masuP9]

@rikilele ありがとうございます！

頂いた改善案、都内発生 と その他 の明暗差（コントラスト比） が高くなり見分けやすくなりました。ただ、その他 の薄い緑と白背景のコントラスト比が低くなりすぎて、弱視（ロービジョン）のユーザーにとって薄い緑の認知がしずらくなってしまいました。

W3Cが策定しているウェブコンテンツアクセシビリティガイドラインの2.1では、非テキストコンテンツのコントラスト比を最低限 3:1 と定めているのですが、今の薄い緑と白い背景だと 1.58:1 で正直かなり厳しいんですね。

https://raw.githack.com/waic/wcag21/Understanding-20190306-ED/understanding/non-text-contrast.html

明暗の他にもという案をあげていただいていて、そちらが良さそう or 背景に模様や区切り線をいれるがいいのですが、どちらにしても全体デザインのトンマナに影響してくるので、デザイナーの方の判断を仰ぎたいのですが、他の色相パターンを出していただくことは可能でしょうか 🙏🙏🙏

[rikilele]

@masuP9 お疲れさまです、レビューありがとうございます！非常に参考になります 😸
ご指摘いただいた点に則って色々（色だけに）スクショを貼らせていただきます：

参考にしたページ

検査実施数

色

#949494 コントラスト比 3:1	#0498D2 コントラスト比 3.3:1

枠

#FFFFFF	#A6E29F

都営地下鉄の利用者数の推移

都営地下鉄の利用者数の推移のチャートでもコントラスト比の点でアウトな色が使われていたので、上記の二色を扱った際の見た目も載せておきます。（元々 PR で用いた #A6E29F はこのチャートから引っ張ってきたものです）

[rikilele]

^ このサイト で色を入力してみましたが、以下の色の組み合わせが一番違いがわかりやすいかもしれません （#00A040 は必須と考える場合）

Color 1	Color 2	Color 3
#00A040	#494949	#FFFFFF（枠あり）
#00A040	#D81B60	#FFFFFF（枠あり）
#00A040	#D81B60	#494949

[masuP9]

@rikilele チョッパヤ対案まじで感謝です。頂いたものだと 枠 で塗りなし #ffffff が一番良さそうです。枠になることで、形状的な差別化ができておりますし、枠線と塗のコントラスト比も高いです。

都営地下鉄の利用者数の推移 に関しても、何かしら塗り以外のパターンで表現できるとすごくいいのですが...（参考までに白黒で改善案を示した例です）

chart.js だとパターン描けそうですね。こちらを参考までに！
公式: https://www.chartjs.org/docs/latest/general/colors.html
https://tr.you84815.space/chartjs/general/colors.html

パターンを独自で書くのは厳しいので https://github.com/ashiguruma/patternomaly を使うと良さそうですー。

[masuP9]

おおおお、組み合わせめっちゃ良さそうです！

[rikilele]

デザイナーさんとの兼ね合いもありますね。
あまり緑以外の色を使っちゃうと全体的なブランディングが崩れちゃうかもなので...

とりあえず

Color 1	Color 2	Color 3
#00A040	#00A040 and #FFFFFF ストライプ	#FFFFFF（枠: #00A040）

も作ってみます！

Update: ^ めんどくさかったのでやっていない...

[rikilele]

@masuP9 variables.scss に定義されていた #00D154 を使ってみました。

Diagonal

Diamond

Dash

Triangle

[masuP9]

うおお、すごい… めちゃめちゃ良い感じですー。

@hkomamiy CONTRIBUTORS.md をみてData Visualization(Design)を担当されたとのことで reviewer に追加させていただきました。よければレビューお願いします！

[halsk]

レビュアーに @saladdays さんも追加しました。

[rikilele]

@hkomamiy @saladdays ping. #1172 でもディスカッションが進められていると思いますが、暫定対応としてだけでもレビューお願いできますか？ 今この時点でも色弱者の方々はサイトを見にくいなと思っているハズなので。

[saladdays]

こちらのissueを全然追えておらず申し訳ありません。

全体のデザインの統一とブランドの問題もありますので、頂いている柄を付けたご提案はなしとさせてください🙇
視認性としてはとても良くなったと思うのですが、一方でその柄がついたバーだけが特別なイメージをもってしまう可能性があります。。

グラフは「事実を正しく伝える」という目的がありますので、何かが強調されたり特別なイメージを持ってしまうことは望むものではありません。

#1172

全体のバランスを保ちつつ実装に移りたいと考えていますので、移行は上記のissueで議論を集約頂ければと思います。引き続きよろしくお願いいたします！

[halsk]

#1172 へ引き続きということなので、こちらの PR は閉じさせていただきます。