search

Tokyo-Metro-Gov / covid19

東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
https://stopcovid19.metro.tokyo.lg.jp/
MIT License
6.26k stars 1.97k forks source link

チャートのカラーについての再考、パターンの提案、アンケート作成を行う #2364

Closed mikkame closed 4 years ago

mikkame commented 4 years ago

改善詳細 / Details of Improvement

スクリーンショット / Screenshot

スクリーンショット 2020-03-26 20 35 59 参考までに現状のグラフです。

期待する見せ方・挙動 / Expected behavior

動作環境・ブラウザ / Environment

mikkame commented 4 years ago

他にも色覚特性を再現できるツールやテスターなどがあれば教えていただきたいです。 よろしくお願いします。

magi1125 commented 4 years ago

新規Issueありがとうございます。議論の前提を整理します。少しお待ち下さい。

sakadon commented 4 years ago

再現には（一番シェアが大きいChromeの検証ツールで使える）ChromeLensはどうでしょうか。 http://chromelens.xyz/

もしくは、アプリケーションになってしまいますが、以下もあります。

総務省　みんなのアクセシビリティ評価ツール：miChecker (エムアイチェッカー)Ver.2.0 （JIS X 8341-3:2016基準） https://www.soumu.go.jp/main_sosiki/joho_tsusin/b_free/michecker.html

昔は富士通やNTTデータなどのツールがあったのですが、公開終了しちゃってますね

mikkame commented 4 years ago

ありがとうございます！早速インストールしました。

mikkame commented 4 years ago
スクリーンショット 2020-03-26 22 40 21 スクリーンショット 2020-03-26 22 40 28 スクリーンショット 2020-03-26 22 40 37 スクリーンショット 2020-03-26 22 40 43 スクリーンショット 2020-03-26 22 40 52 スクリーンショット 2020-03-26 22 40 59 スクリーンショット 2020-03-26 22 41 06 スクリーンショット 2020-03-26 22 41 14 スクリーンショット 2020-03-26 22 41 22 スクリーンショット 2020-03-26 22 41 28 スクリーンショット 2020-03-26 22 41 33

順番がバラバラかつ、ズレズレで申し訳ないのですが取り急ぎ現状のスクショを作成しました。

magi1125 commented 4 years ago

グラフのアクセシビリティおよびカラーユニバーサルデザイン要件を整理してみました。 すいません、かなり長文です。

まず、現時点のグラフの確認です。#1172 の決定稿を確認します。

77030550-4935a800-69e2-11ea-80fb-6eb3e140c2e6 (1)

この調整の結果、以前の薄い緑から濃い緑＋青になったことで、グラフ自体のコントラストは上昇し、視力が弱い人にとってバーの存在を見落とす可能性は減りました。 いっぽう、後述する条件を満たすために濃い色を使った結果、色弱者にとっては逆に見分けにくくなっています。

今回はこの両者の課題をどちらも解決する必要があります。しかし、これは色の調整のみでは難しいため、他の方法を合わせて考える必要があります。

グラフに求められる、アクセシビリティ基準やカラーユニバーサルデザインの要件と現状は以下となります。上の方が致命的な度合いが高い（出来てないと情報取得できない）と考えられます。 もちろん最終的には障害当事者によるユーザビリティテストが必要ですが、まずこの基準を目指すのがセオリーだと考えられます。

ということで、現在は2と3のコントラスト要件はほぼ満たせているが（※罫線と軸ラベルの色は要改善）、1の色依存回避と、4の色の見分けができていない、という状況です。

これを両立するにはいくつかグラフの前提を変えなければなりません。

1の「凡例とバーが色のみで紐付いている」および「項目同士の判別が色のみで差別化されている」を解決するには、凡例から引出線をつける、凡例とバーを記号で対応させる、凡例とバーを模様で対応させるといった方法があります。 なお、この中でChartJSで可能なのは模様で対応させるという方法だけです。以前の類似PRにて試した例が出ています。 デフォルトで模様にはせずに、模様をつけるモードを用意するという考え方もあります。これはtrelloなどで採用されているアプローチです。ただしアプリケーションのように普段遣いするものと、一見客として訪れるウェブサイトでは状況が違うので、慎重な検討が必要です。

ここでは「模様をつけるモード」を実装して1を満たすという仮定で検討をすすめます。次は通常モードのときは2,3,4を同時に満たす必要がでてきます。 このとき問題になるのが、3で★をつけた「バーの塗りと上に載る白文字とのコントラスト」および「背景の白と、バーの塗りと同一の凡例文字色とのコントラスト」です。 つまり白とバーで4.5:1以上を満たそうとすると、それは文字色で使えるような濃い色を選ぶということになり、明度による見分けを作ることが困難になります。また、濃い色同士だと色相による見分けもしにくくなります。

これを解決するそれぞれの対応方法は以下です。

上記2点を調整すると、バーの塗りの色のコントラスト要件が4.5:1以上から3:1以上にできます。こうすることでバーの一番明るい色は3:1にでき、そこからおそらく+2色までは、段階的に暗くすることで、明度差だけで見分けがつくような状況が作れると考えられます。 ちなみに明度で差をつける場合は、WCAGの1.4.11やG183を読む限り、それぞれが3:1以上の差がついていれば見分けられると思われます。

ただし、ここから更にプラス1色の見分けを可能にしようとすると、明度だけで対応することが難しくなります（9:1と12:1を明度で見分けるのは難しい）。 「3:1を下回るがボーダーつきで境界がわかる明るい色」を1色加えるか、あるいは「色弱者でも見分けられる色相の違う色」を加える必要があります。

（03/27 02:20追記）なお、私はできれば明度差で区別を付ける方向をできるだけ模索したほうがよいと考えています。明度差であれば、たとえ全く色がわからない状態の人でも見分けがつくからです。項目が4段階で収まるレベルであれば明度差によるアプローチが維持できます。 色弱者でも見分けやすいカラーユニバーサルデザインのパレットを使うことはもちろん優れたアプローチですが、それはもっと項目数が多いときや、明度差によるアプローチが適さないケースに検討対象になるものと感じます。

以上、私なりに対応についてまとめましたが、間違いや不明点があればぜひコメントください。特に問題なければ、こちらをベースに改善案を検討いただければ幸いです。

ounziw commented 4 years ago

文字色と背景色の比較(＝2つの色)であれば、以前にシミュレーターを作りました。 https://cud.nagoya/simulator

Koiggy commented 4 years ago

私も１型２色覚の当事者なのですが、シミュレータで判断することには限界もありますので、当事者にお尋ねいただくのが良いと思います。前issueでもお話ししましたが、今回も90名の色覚型が判明している当事者集団にボランティアで評価してもらいました。微調整可能は候補色の範囲を示していただければその中で評価し、良い方向を選択することもできます。 http://www.cudo.jp/

Koiggy commented 4 years ago
スクリーンショット 2020-03-26 22 40 21 スクリーンショット 2020-03-26 22 40 28 スクリーンショット 2020-03-26 22 40 37 スクリーンショット 2020-03-26 22 40 43 スクリーンショット 2020-03-26 22 40 52 スクリーンショット 2020-03-26 22 40 59 スクリーンショット 2020-03-26 22 41 06 スクリーンショット 2020-03-26 22 41 14 スクリーンショット 2020-03-26 22 41 22 スクリーンショット 2020-03-26 22 41 28 スクリーンショット 2020-03-26 22 41 33

順番がバラバラかつ、ズレズレで申し訳ないのですが取り急ぎ現状のスクショを作成しました。

当事者調査した時に、この2色は見分けできると言うことです。深緑2色に対して緑色の刺激が少なく暗く感じてしまう傾向がある2型（D型）色覚の人の中に見分けができないという方々がおられます。対策としては緑二色の明度差をもっと持たせる方向です。この方向とサンプルは前issue で提案済みです。

mikkame commented 4 years ago

@Koiggy シミュレータでの再現では限界があることは承知しております。 あくまで参考までに添付させていただきました。

アンケートの件はありがとうございました。 素人意見ではございますが アンケート内で実際に見えにくいと回答された方の属性（型？や程度）が分からない点 また、複数のパターンよりどれが見やすいかという方向性で進めた方が良いのではないかと思っております。 それを踏まえてどのような聞き方が良いの検討も含め進めていきたいと思います。 また、検討に検討を重ねているとなかなか改善が進まないということも懸念されますのでこの辺はバランスを考えていきたいですね。

mikkame commented 4 years ago

なお、私はできれば明度差で区別を付ける方向をできるだけ模索したほうがよいと考えています。明度差であれば、たとえ全く色がわからない状態の人でも見分けがつくからです。項目が4段階で収まるレベルであれば明度差によるアプローチが維持できます。 色弱者でも見分けやすいカラーユニバーサルデザインのパレットを使うことはもちろん優れたアプローチですが、それはもっと項目数が多いときや、明度差によるアプローチが適さないケースに検討対象になるものと感じます。

こちらに関しては現状最大4段階までです。

Koiggy commented 4 years ago

@Koiggy シミュレータでの再現では限界があることは承知しております。 あくまで参考までに添付させていただきました。

アンケートの件はありがとうございました。 素人意見ではございますが アンケート内で実際に見えにくいと回答された方の属性（型？や程度）が分からない点 また、複数のパターンよりどれが見やすいかという方向性で進めた方が良いのではないかと思っております。

それぞれの評価をした色覚タイプ別の割合についてということでいいでしょうか。Ｐ型よりもＤ型の方が見分けにくいと回答しています。

image

それを踏まえてどのような聞き方が良いの検討も含め進めていきたいと思います。 また、検討に検討を重ねているとなかなか改善が進まないということも懸念されますのでこの辺はバランスを考えていきたいですね。

おっしゃるとおりです。それで最も速い方法についてですが、色弱の人を集めて決めれば短時間で決まります。私たちは常にそうしています。どうしても色弱の人が集まらない場合にのみ慣れた人がシミュレーションなどで検討して決めます。

Koiggy commented 4 years ago

なお、私はできれば明度差で区別を付ける方向をできるだけ模索したほうがよいと考えています。明度差であれば、たとえ全く色がわからない状態の人でも見分けがつくからです。項目が4段階で収まるレベルであれば明度差によるアプローチが維持できます。 色弱者でも見分けやすいカラーユニバーサルデザインのパレットを使うことはもちろん優れたアプローチですが、それはもっと項目数が多いときや、明度差によるアプローチが適さないケースに検討対象になるものと感じます。

こちらに関しては現状最大4段階までです。

カラーユニバーサルデザイン推奨配色パレットなどのすでにできている配色パレットを使うのも簡単な方法ですが、慣性制御（イメージコントロール）と情報制御の両方を成立させたい、オーダーメイドしたいという場合には、個別に検討しなければなりません。

同一色相で４色ということについてですが、色覚型によって、感じる色差が等歩度ではないため確認が必要です。Ｐ型の人は赤は暗く感じるため黒と近くなり、緑は比較的明るく感じるが、逆にＤ型の人は赤は明るく感じるため白と近くなり、緑は暗くなるため黒と近くなる。と言ったことが起こります。

1172にてお知らせしましたが、同一色相で4段階とるとするとこれくらいになると思います。

image

tamaina commented 4 years ago

はじめまして。CUDについての議論がかなり炎上しており、ひとつひとつの意見を追えてはいないのですが、私なりの意見を述べさせていただきます。

まず、現状の緑濃色・緑色・青色の塗分けは青色が変に目立っており、悪い配色だと思います。

私の主張はただひとつで、 真にCUDのことを考えるならば、https://github.com/ashiguruma/patternomaly を使用しすべてのグラフに模様をつけることが最善かと思います。
色の濃淡を覚えて区別するのは普通の人でもわかりにくいことだと思います。
(画像はpatternomalyから引用)
ただ、積み上げ棒グラフでは濃淡の区別が容易なため、濃淡での区別で良いかと思います。

また、サイトデザイン上使用できる色が緑のみということですが、これはデザイン的な制約が大きくあまりよくないと思います。ほかに数色は定義するのが無難かと思います。（たとえば、flowページのsvgでは黄色が使用されています。）
多要素のグラフ内は例えば緑以外の色で表現するというのはどうでしょうか。これなら緑が特別な色と認識されることもないと思います。

sakadon commented 4 years ago

色数を増やす、濃淡のパターン数、模様の追加、など提案が挙がっていると思いますが、 全体のイメージやメッセージを鑑みて前回issue #1172 起票者兼UIデザイン担当者様のご意見もお聞きしたいです。 前回コメントの文脈的に、宮坂副知事のオファーも考慮されるべきなのでしょうし。 いかがでしょうか @saladdays 様

mikkame commented 4 years ago

個人的には模様パターンは現状の幅が細いグラフ対して適用した時に効果が薄いように思えます。 （細い件についてまで盛り込んで直そうとすると各方面で色々厳しい気もします）

@Koiggy さんと@magi1125 さんの意見の中から配色を選択していくのが良いかと思います。 もちろん @saladdays さんも交えて。

makojo commented 4 years ago

検証ツールやシミュレーターが限定的であるということは確かですが、 トライアンドエラーを繰り返し行うときにはあったほうが便利です。 コントラスト検証用のツールと合わせていくつか見つけたのでURLをお送りします。参考になれば幸いです。

Color Oracle

Sim Daltonism

Photoshop

Stark

Colour Contrast Analyser

Contrast

ColorTester

ユーザー補助検証ツール

saladdays commented 4 years ago

@sakadon さん ありがとうございます。先ほど前のissueにも書かせて頂いたのですが、

ですから「緑でなければならない」とも思っていません。 死を予想させる色、危険を煽るような色、そういった意志をこめたグラフにしたくないというのが、宮坂副知事の思いです。

このような意図でのお話を頂いておりますので、これらの考慮ができていれば問題ないと考えております。

ですから、今上がっている案でしたらどれでも大丈夫です！

本当にとてもとても勉強になっております。皆さんありがとうございます。

saladdays commented 4 years ago

その上で私見ではありますがご意見を。

模様について

@mikkame さんのご指摘のように現在の棒グラフは全体の流れを把握するため一つ一つはとても細いものもあります。 ですので、模様を入れるにしてもそれだけでの解決は難しく思います。

また太めのグラフに関しては今のところそれほど多くの色パターンを要しないものですので、そこは模様をご提案頂いた @tamaina さんも書かれているように色や明暗での差で現状は大丈夫だと思います。

色のパターンと明暗について

こちらについては @tamaina さん、@Koiggyさんのお二人が明暗によって差をつけるのが良いのではという案に達しておられるので実際に https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-604822740 でお出し頂いた色でグラフを作ってみました。いかがでしょう？

draft1 draft2

saladdays commented 4 years ago

蛇足ではありますが、私自身が本当にやりたかったのは「極力凡例を用いず、グラフのそれぞれの横ないし上に文字として配置する」という方法でした。 @magi1125 さんの書かれている「凡例から引出線をつける」と目指す先は一緒ですね。

凡例がグラフから離れていると、健常者の方であろうと色弱の方であろうと、グラフの棒だけ見ては意味がわからず凡例とグラフで目線を行き来しなければなりません。

できればそのような方法を取りたかったのですが、magi1125 さんのご指摘のようにChart.jsでは再現できないとのことで断念しました。。

Koiggy commented 4 years ago

その上で私見ではありますがご意見を。

模様について

@mikkame さんのご指摘のように現在の棒グラフは全体の流れを把握するため一つ一つはとても細いものもあります。 ですので、模様を入れるにしてもそれだけでの解決は難しく思います。

また太めのグラフに関しては今のところそれほど多くの色パターンを要しないものですので、そこは模様をご提案頂いた @tamaina さんも書かれているように色や明暗での差で現状は大丈夫だと思います。

色のパターンと明暗について

こちらについては @tamaina さん、@Koiggyさんのお二人が明暗によって差をつけるのが良いのではという案に達しておられるので実際に #2364 (comment) でお出し頂いた色でグラフを作ってみました。いかがでしょう？

draft1 draft2

P型（１型２色覚）の私には相当分かりやすくなりました。D型（２型２色覚）の人にも聞いて見ます。

Koiggy commented 4 years ago

Photoshop

かつて多数発表されていた色覚シミュレータの元となる理論そのものがどうなのか。また理論通りにプログラムできているか。その精度や被験者テストは実施されてないままであったりするため、混乱が起きていました。

ここでご紹介頂いた、アドビシステムズのphotoshop illustrator CS3以降に標準搭載されている「色覚シミュレータ」は元となったシミュレーション理論そのままでなく、2007-8年に実際に色評価用のディスプレイを調整して、色弱者による調整・微調整を繰り返して、可能な限り実際に感じている色の差に近づけるという作業をいたしました。他にはナナオ、NECのハードウェア色覚シミュレータも同様の調整をした物です。RGBモードで調整しているので、ディスプレイで見るコンテンツのテストには良いと思います。紹介頂いた他のシミュレータ系は検証しておりませんので精度などは不明です。（アドビ社のものはP型D型しか積んでいませんが、１０万人に１人居ると言われた先天性のT型色覚の人が被験者として見つからなかったためです）

magi1125 commented 4 years ago

@saladdays ありがとうございます。個人の感覚ではとても見やすくなったと感じます。 （以下、ガイドラインを満たすのが本筋ではないという前置きをしつつ）いくつかトピックを。

96KuRo commented 4 years ago

パターンの提案

saladdays氏の素敵な案を元に、色と模様を組み合せる事で、様々な色覚タイプにおいてチャート内で識別できる要素の種類を増やす事を試みた案を作りました。よろしければ参考にしてください。

案

0001

作成方針

色の種類は同色相の明度違いに絞る

色相の違いを組み合わせる表現をすると、配色によっては、色覚タイプによってそこにグループを見出してしまいます（※1）。それにより、色覚タイプによって情報を意図しない形での受け取り方、印象の持たせ方をさせてしまう事が懸念されます。それを回避するため、今回は一番簡単な色相による違いを付けずに明度差で検討しています。

※1：例えばC型の人にとって「あ、い、う、え、お」と5種類が等分に別の物として見えたとしても、色覚タイプが違えば、そこに「あ、い、う」と「え、お」のように2つのグループに別れて見えてしまう事があります。

色、模様は言語化しやすいようにする

多くの見える人は、見えた物を馴染みのある形で言語化できないと記憶に留めにくいためです。言語化できることで、凡例とグラフの行き来の際、どれが何の情報かという脳内の引き当てがしやすくすることを目指しています。 色については、明度差で分けるため、言語化しやすい「明るい」「普通（真ん中）」「暗い」の3種類にしました（※2）。また、模様は多くの人が認知し言語化しやすいと思われる物（※3）にし、また複数種類にすると表現できる種類は膨らむのですが、複雑になって記憶に留めにくくなるため、絞ってシマシマ（斜線）の1種類にしました。

※2：「明るい」「暗い」の2種類の方がより望ましいのですが、そうするとバリエーションが減ってしまうため、3種類としました。 ※3：水玉模様、シマシマ、星、ハート等々。

模様は面積が小さくなっても極力見やすいものにする

グラフは縦横サイズに様々な場合があり、縦幅が狭くなっても、横幅が狭くなっても、その模様がある事が認知できるようにする必要があるため、縦横どちらの狭さにも強い斜線のシマシマを選びました。縦線、横線のシマシマを避けたのは、今回、グラフを面ごとに線囲みを行っているためです。

パターン解説

0003 A：暗い緑色 B：暗い緑色に白の斜線 C：普通の緑色 D：普通の緑色に白の斜線 E：明るい緑色 F：白 の計6種類のパターンになります。

見本

0001 0002

magi1125 commented 4 years ago

@saladdays 知人の弱視の方（伊敷さん：こちらの動画でデモしているアクセシビリティ専門家）に、現行版とsaladdaysさん案をレビューしてもらいました。ひとまず共有します。 なお、画面を5倍に拡大し、かつ色反転して閲覧されています。

現在のグラフ

改善案1-1 改善案1-2

他にも何名かお声がけいただけるとのことです。色弱同様、弱視はいろんなパターンがあるので、いろんな方向から確認してみたいと思います。

magi1125 commented 4 years ago

@96KuRo 提案ありがとうございます！質実剛健な印象もありつつ、見分けやすく、良い案だと感じました。そして、こちらも伊敷さんにレビューいただきました。取り急ぎ共有。

まずどちらも罫線は見やすくなりましたね。 それで、濃い緑とその模様つき、明るい緑とその模様つきは区別ができます。 その上の、淡い緑とさらにその上はちょっと区別ができません。横罫線があるので2つの情報があることはわかりますが、色と模様はわかりませんでした。

改善案2

96KuRo commented 4 years ago

パターンの再提案

@magi1125 さんありがとうございます。フィードバックを受け、前案を改善した案を用意しました。もし、再度レビューいただけるようでしたら、チャートだけでなく、下記のパターン解説に掲載している画像も併せて見ていただき、種類数によってどの組み合わせが見やすいかもフィードバックいただければ幸いです。

案

00012

前案との違い

「F：白」を外ししました

saladdaysさん案：暗い緑と明るい緑は存在が認知できるし、見分けがつく。しかし一番明るい薄緑は、ほぼ白に見えるので見落とす可能性が高い。 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605416816

その上の、淡い緑とさらにその上はちょっと区別ができません。横罫線があるので2つの情報があることはわかりますが、色と模様はわかりませんでした。 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605419882

上記のフィードバックから、明るい緑が白と同じに見えているということで、

A：暗い緑色 B：暗い緑色に白の斜線 C：普通の緑色 D：普通の緑色に白の斜線 E：明るい緑色 F：白 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605411551

の「F：白」を外しました。 （判別できるものを6種類から5種類に減らしてしまいました。ちょっと悔しい。凡例との脳内引き当てがしやすい形で何とかもう少し種類が増やせないものか…）

囲み線（罫線）を濃くしました

saladdaysさん案：暗い緑と明るい緑は存在が認知できるし、見分けがつく。しかし一番明るい薄緑は、ほぼ白に見えるので見落とす可能性が高い。 拡大して閲覧しているので、薄緑のフチにボーダーがあることに気づければ矩形に気づけるが、そこをうっかり通過してしまうと気づけない。 なおグラフの棒の幅が細くなるほど、薄緑のところ矩形の認知は難しくなる。 ボーダーをよりはっきり太くするか、模様をつけるかといった対応が望ましいのではないか。 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605416816

上記フィードバックから、明るい緑をより見つけやすくするために、囲み線（罫線）の明度を下げ、コントラスト比を上げることで境界をより意識しやすくしました。

パターン解説

00032 A：暗い緑色 B：暗い緑色に白の斜線 C：普通の緑色 D：普通の緑色に白の斜線 E：明るい緑色 の計5種類のパターンになります。

見本

00012 00022

96KuRo commented 4 years ago

https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605432951 の案の反省点。

tsmd commented 4 years ago

@96KuRo さんのパターン案を Chart.js 上に実装してみました。

localhost_3000_ (1)

以下、補足や雑多な感想です。

Koiggy commented 4 years ago

地図の塗り分けについて。P型（１型２色覚）とD型（２型２色覚）の印象を申し上げます（参考にアドビシステムズの色覚シミュレーション画像を提示します）

４段階の地図の塗り色の内 凡例において 0〜75000と150000〜225000と225000〜の３色は同系色（黄色系）の濃度差として捉えられます。 75000〜15000だけは別の色相の色（青い色系列）として捉えられます。

そうしますと、これらは薄黄、薄青、中黄、濃黄　の順に並んで感じられます。 これがもし　薄青、薄黄、中黄、濃黄　なら自然なグラデーションに感じられると思います。

※１元になった地図に「建物の無いところは白、あるところは灰色（あるいは灰色に見える細かいハッチング）」がありますと、色弱の人には誤認が生じます。この例で言いますと、色弱の人は黄色系の薄い黄色、中黄色、濃い黄色と３色の濃度差で見分けていた物が、背景に2色あると、薄い黄色、薄い黄色に灰色が重なった色、中黄色、中黄色に灰色が重なった色、濃い黄色、濃い黄色に灰色が重なった色　と６種の濃淡を判別することになります。たとえば薄い黄色に灰色が重なった色と、濃い黄色が同じ色に見えるなどの問題が起きてきます。そういったことから、必要が無ければ白地図は白のままで灰色部分がない事が望ましいと思います。

※　地図に色を付ける場合に、ハザードマップなどの場合には、その危険度合いが多様な色覚にも対応して危険度合いの傾斜度が感じられるように調整します。気象庁　気象庁ホームページにおける気象情報の配色に関する設定指針　平成２４年報告　

image

image

magi1125 commented 4 years ago

@96KuRo @tsmd パターンの再提案と実装ありがとうございます！ 伊敷さんにパターンの再提案バージョンを見ていただいたところ、「今までで一番見やすいです。ボーダーもわかりやすい。」とのことでした。 改善案3

一部の系統にだけパターンを適用することは、その系統がなにか特別な意味を持っているかのように見えてしまう問題がありそうに思いました。この指摘が書かれた記事を見かけた記憶がありますが、すみません失念しました。

このリポジトリ内だと https://github.com/tokyo-metropolitan-gov/covid19/pull/740#issuecomment-598613008 でその議論がありました。

もう一人別の弱視のかたに見てもらいました。こちらの方は緑内障と黄斑変性のため視野の中心がほとんど見えなくなった元プログラマの方です。「iPhoneとPCで見ましたが、iPhoneだと拡大に限界があるので、13インチのノートPCで拡大鏡を使ってみています」とのことです。

現行版と、 @saladdays さん版、 @96KuRo さんの2つの版を見て頂きました。サマると、この方は明度差の見分けはある程度つくが、模様の見分けが難しいので色相による差のほうが良さそうでした。 まだn=2ですが、単一色相による明度差や模様だと対応に限界がありそうです。また東京都以外のforkサイトでも同様の対応が必要になることを鑑みると、ブランドカラーから色を付ける方向をやめて色相と明度を散らしつつ、地域に依らず共通利用できるグラフのカラーセットを定義できたほうがアクセシビリティの点では良さそうに感じています。

以下、各グラフに対する評価の詳細です。

現行版

左のグラフ（バーが分かれている地下鉄乗降数）は系列の違いが判りますが、さすがに右側（積み上げの都庁来庁者数）は第一庁舎と第二庁舎の違いがぱっと見では全然判りません。

現在のグラフ

saladdaysさん版

改善案1-1

改善案1-2

96さん版（初期案、6段階積み上げ）

改善案2

96さん版（白をやめる、ボーダー濃く、5段階積み上げ）

改善案3

magi1125 commented 4 years ago

@Koiggy 地図についてのチェックと提案ありがとうございます。ここは他のグラフとちょっと内容や対応の性質が異なりそうなので、独立したIssueを後で立てますね。そちらに転記し、引き続き議論できればと思います。

kaizumaki commented 4 years ago

@Koiggy さん、

地図の塗り分けについて。

地図については、開発がメインとは別のリポジトリで進められていたこともあり、こちらのグラフのカラーについてのissueとは分けたほうがよさそうです。

kaizumaki commented 4 years ago

バーの太さについて懸念がでているものと思われます。 現状では、全期間のグラフを表示させており、このままいくとバーがどんどん細くなっていく問題は、都側も認識しているようです。 現在こちら #2498 のPRが提出されており、バーの太さも含め都側に確認・検討してもらっている最中です。なのでいったん #2498 で実装する方向にもっていきたいと思います。その上で、こちらで改めてご検討いただければと思います。 ですので、バーの太さについてはお待ちいただけると幸いです。

ちなみに以下のグラフについては #2498 では対応しない予定です。

magi1125 commented 4 years ago

@kaizumaki たしかに、細くなるとより見分けが難しくなるのはその通りなので、そこが一定の太さで維持されるほうがよいと感じます。 ちなみに今弱視の方や色弱の方に確認いただいているのは、現状版は「都営地下鉄の利用者数の推移」と「都庁来庁者数の推移」であり、調整版は画像サンプルで十分に太さがあるものなので、当事者検証はいったんこのまま継続したいと思います。

2498 が固まったら、「太いもので見てもらったが、このぐらいの細さでも大丈夫か？」的な形で追加で検証できればと。

96KuRo commented 4 years ago

現行版と、 @saladdays さん版、 @96KuRo さんの2つの版を見て頂きました。サマると、この方は明度差の見分けはある程度つくが、模様の見分けが難しいので色相による差のほうが良さそうでした。 まだn=2ですが、単一色相による明度差や模様だと対応に限界がありそうです。また東京都以外のforkサイトでも同様の対応が必要になることを鑑みると、ブランドカラーから色を付ける方向をやめて色相と明度を散らしつつ、地域に依らず共通利用できるグラフのカラーセットを定義できたほうがアクセシビリティの点では良さそうに感じています。

と書かれていますが、

saladdaysさん版 バーが分かれているもの：各系列のバーは拡大鏡を使わなくても見分けられます。凡例は拡大鏡を使わないと無理ですが、使えば紐付け可能です。

ということなので、現状最大3系統ですし、3系統として、saladdaysさん版の囲み線（罫線）を少し暗くしてコントラスト比を少し上げ、それで一旦行くというのはどうでしょうか？

magi1125 commented 4 years ago

@96KuRo 3系統前提でいったん漸進的改善を進める、という点では賛成です！系統が増えたときと各地域でもアクセシブルにというのは、それぞれ分けて考えるということですよね。

96KuRo commented 4 years ago

@magi1125 はい。少しでも良くできるのであればそれで一旦リリースし、利用できる人を増やし、並行して4系統以上の識別を可能な表現を探った方がユーザー利益があると考えます。

magi1125 commented 4 years ago

@96KuRo 了解です。 @tsmd に、塗り色は @saladdays の https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605076050 で、ボーダー色は https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605432951 で実装を試してもらうとよいでしょうか。 ……いわゆる良いとこどりガッチャンコなので、適切な色指定があればご指示いただければと。

96KuRo commented 4 years ago

【保留】パターンの再提案2

@magi1125 さんありがとうございます。フィードバックを受け、改善した案を用意しました。

案

00013 00023

saladdays氏の案との違い

囲み線（罫線）を濃くしました

saladdaysさん案：暗い緑と明るい緑は存在が認知できるし、見分けがつく。しかし一番明るい薄緑は、ほぼ白に見えるので見落とす可能性が高い。 拡大して閲覧しているので、薄緑のフチにボーダーがあることに気づければ矩形に気づけるが、そこをうっかり通過してしまうと気づけない。 なおグラフの棒の幅が細くなるほど、薄緑のところ矩形の認知は難しくなる。 ボーダーをよりはっきり太くするか、模様をつけるかといった対応が望ましいのではないか。 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605416816

上記のフィードバックから、明るい緑が白と同じに見えているということで、囲み線（罫線）の明度を下げ、#5a8055とすることで、白とのコントラスト比を4.5:1にすることで境目を認知できる対象者を増やし、明るい緑色の識別性の向上を試みています。

パターン解説

00033

A：#1b4d30（暗い緑色）→ @saladdaysさんに要確認 B：#00a040（普通の緑色）→ @saladdaysさんに要確認 C：#c5e2c6（明るい緑色）→ @saladdaysさんに要確認 囲み線（罫線）：#5a8055

相談

チャート内での識別する系統数別の組み合わせですが、@saladdays さんの案を読み解くと、「二系統の場合はBとC、一系統の場合はB（以下、案1）」にすることになると思います。

より多くの場面においての視認性の高さをと考えると、「二系統の場合はAとB、一系統の場合はA（以下、案2）」にするという考え方もあると思いますが、今回は、サイトのトンマナとの親和性を考え、できるだけ暗い印象を与えたくないという当初デザインの意図を汲み、案1で行くというのでどうでしょうか？

forestgtree commented 4 years ago

色々とご意見いただいている中、恐縮です🙇‍♂️

私からも、以下ご提案になります。 ほぼ @96KuRo さんのご提案色に近づけ 他県版にもすぐに適用できるよう10色（内グレー含む）多色展開してみました。 サンプルグラフはベースの $green のみとなります

多色展開用、sassのソースコードを記載しています。 都庁来庁者数の推移は、雰囲気のみお伝えできればと思い作っています。

A：#006026（暗い緑色） B：#00A040（普通の緑色） C：#8FBFA2（明るい緑色） 囲み線（罫線）：#567E66

draft1 draft2 draft3

color

// 10 COLORS
$aqua:       #1B9B9B;
$blue:       #508FCF;
$green:      #00A040;
$lime:       #759535;
$orange:     #DB6A1B;
$purple:     #8D83CB;
$red:        #E55F5F;
$pink:       #DD638B;
$blown:      #A9845B;
$glay:       #8C8C8C;

// BASE COLOR
$base-color: $green;

$colorset: (
    base: (
        auto: $base-color,
        pale: mix(#CCCCCC,$base-color, 70%),
        dull: mix(#727272,$base-color, 75%),
        dark: mix(#000000,$base-color, 40%),
    )
);

@function colorset($key, $tone: auto) {
    @return map-get( map-get($colorset, $key), $tone);
}

// SAMPLE
div {
  &.base-color {
    background: colorset(base);
  }
  &.pale {
    background: colorset(base, pale);
  }
  &.dull {
    background: colorset(base, dull);
  }
  &.dark {
    background: colorset(base, dark);
  }
}
Koiggy commented 4 years ago

10地域分評価をP型D型色覚の当事者に聞いてみました。

image

96KuRo commented 4 years ago

@saladdays さん、制作いただいていた案を元に色展開をさせていただきましたが、制作いただいていた案で使用されていた囲み線（枠線）を含む4色について数値をいただけますでしょうか？

magi1125 commented 4 years ago

@96KuRo 再提案ありがとうございます！これなら行けそうな感じがしますね。

より多くの場面においての視認性の高さをと考えると、「二系統の場合はAとB、一系統の場合はA（以下、案2）」にするという考え方もあると思いますが、今回は、サイトのトンマナとの親和性を考え、できるだけ暗い印象を与えたくないという当初デザインの意図を汲み、案1で行くというのでどうでしょうか？

こちらですが、例えば「二系統の場合はAとB、一系統の場合はB」というのはどうでしょうか。一系統だけのグラフもけっこうあるので、ページ全体の色面でいうとBが多くなり、結果トンマナとの親和性も維持できるように思います。

@forestgtree ご提案ありがとうございます！多色展開まで。すごい。

ちなみに

ほぼ @96KuRo さんのご提案色に近づけ

とのことですが、96さん案より各色の明度差が少ないように感じます。

明度差が大きいほうが見分けやすく、WCAGではコントラスト差で見分けさせる場合は3:1以上という数字があります（ただしこれは境界のコントラストの話なので色面差の話ではないです、あくまで参考値として）。差を減らしたことに何か理由などありますでしょうか？（囲み線はほぼ同じでした）。 推定ですが、濃い色を黒から離す、薄色を白から離す、および多色展開での整合性とかかな、と思いました。もし濃い色を黒から離す話であれば、1系統のときに真ん中の色を使うことで、ページ全体の印象は暗くならずに済むかも知れません。

magi1125 commented 4 years ago

あと、どの案でも共通ですが、WCAG 2.1 1.4.11では系列同士の区切り（か、色面同士の色の差）は3:1以上になっている必要があります。縦積みのバー内での区切り線は、上下にくる色によって白系か濃い緑系かで使い分けが要るかもしれません。

saladdays commented 4 years ago

@saladdays さん、制作いただいていた案を元に色展開をさせていただきましたが、制作いただいていた案で使用されていた囲み線（枠線）を含む4色について数値をいただけますでしょうか？

@96KuRo カラーコードこちらになります！

Koiggyさんのコメント の図からスポイトしただけのものなので、きちんとしたカラーになっていないかもしれませんが。。

ご参考までにどうぞ！

magi1125 commented 4 years ago

ところで、https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-605913167 で書いていただいたとおり、この議論を開始してから5日が経過しており、ほぼ行けそうな案が https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-606035208 で出ていることから、いったんこちら（ないし、https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-606431108 を踏まえた最終調整版）を反映する形で進めたいと考えていますが、いかがでしょうか。 @96KuRo @forestgtree @saladdays @Koiggy 他地域向けの多色展開や、明度に加えた色相を散らす方向は別Issueで継続したいなと（ここ長くなりすぎてますし…笑）。

forestgtree commented 4 years ago

@Koiggy 細かな検証ありがとうございました！ aqua,red,blown,glayは、D型の方には難しいというのが良く分かりました。 もう少し別issueにて、調整してみたいと思います。

@magi1125 引き続き、展開のコード調整は行いますが、反映に進めていただきたいです！ よろしくお願いします。

magi1125 commented 4 years ago

みなさまありがとうございます。 https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-606035208 のバージョンが、塗りのカラーコードは @saladdays 版と同一で、罫線のみ濃くなっていることを確認したので、このバージョンでいったん反映に移れればと思います。

96KuRo commented 4 years ago

@magi1125

https://github.com/tokyo-metropolitan-gov/covid19/issues/2364#issuecomment-606637110

LGTM

ありがとうございます。ベースとなっていた @Koiggy さん案の数値を確認せず進めてしまいすみませんでした。今回はこれで公開し、別issueにて更により良くできるようにまた提案させていただきます！