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

[mikkame]

改善詳細 / Details of Improvement

• チャートのカラーをアクセシビリティを考慮した色へ変更する #1172 で議論されていたカラーについて
• 現在、チャートで使用されているカラーの再考を行いたい
• 多くの方にアンケートを取る事でより見やすいカラーを選びたい

スクリーンショット / Screenshot

参考までに現状のグラフです。

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

• グラフのカラーサンプルを作成する
• 本当にアンケートが必要かも思案する必要有り
• 実際に意見をもらいたい(実施方法や対応方法についても協議したい)
• それを反映したい

動作環境・ブラウザ / Environment

• macOS / Windows / Linux / iOS / Android
• Chrome / Safari / Firefox / Edge / Internet Explorer

[mikkame]

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

[magi1125]

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

[sakadon]

再現には（一番シェアが大きい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]

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

[mikkame]

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

[magi1125]

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

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

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

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

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

• 1：情報伝達が色のみに依存しないこと
  • 要改善：凡例とバーが色のみで紐付いている
    • ただし凡例クリックによって内容を切り替えられるので、その操作が行える場合においては厳密には判別不能ではないとも言える
    • スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい #2068 の代替手段によって、情報取得自体は可能になる（ただしグラフの対応が不要ということは意味しない）
  • 要改善：項目同士が色のみで区別されている
    • ただしマウスオーバーで詳細が表示されるので、その操作が行える場合においては厳密には判別不能ではないとも言える
    • スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい #2068 の代替手段によって、情報取得自体は可能になる（ただしグラフの対応が不要ということは意味しない）
• 2：グラフィックの境界のコントラストを3:1以上にする
  • OK：背景の白とバーとのコントラストは3:1以上
  • OK：項目同士の隣接境界のコントラストは3:1以上
  • 要改善：罫線のコントラストは現状は1.41:1
• 3：テキストと背景のコントラストを4.5:1以上にする
  • OK：★バーの塗りと上に載る白文字とのコントラストは4.5:1以上
  • OK：★背景の白と、バーの塗りと同一の凡例文字色とのコントラストは4.5:1以上
  • OK：日別と累計の切り替えコントロールの文字のコントラストは4.5:1以上
  • OK：バーにマウスオーバーしたときの吹き出しの文字のコントラストは4.5:1以上
  • 要改善：軸ラベル（行の数字（％や人）と列の日付）のコントラストが現状は4.0:1
• 4：色同士を比べて見たときに色弱者でも見分けられるようにする
  • 要改善：現在の色は色弱当事者にとって見分けがつかない（アンケート結果）

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

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

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

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

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

• バーの塗りの上に来るのを一律で白文字にするのではなく、各バーの塗りに対して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]

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

[Koiggy]

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

[Koiggy]

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

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

[mikkame]

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

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

[mikkame]

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

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

[Koiggy]

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

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

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

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

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

[Koiggy]

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

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

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

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

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

[tamaina]

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

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

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

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

[sakadon]

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

[mikkame]

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

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

[makojo]

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

Color Oracle

• http://colororacle.org/
• 分類: 色覚
• OS: Win / Mac / Linux
• 特徴
  • 色覚のシミュレートを行う
  • ツールメニューバーに常駐し、全画面の色覚シミュレートができる

Sim Daltonism

• https://michelf.ca/projects/sim-daltonism/
• 分類: 色覚
• OS: Mac / iOS
• 特徴
  • 色覚のシミュレートを行う
  • 常にアプリの最上面にウィンドウがオーバーレイする
  • 機能が少なくシンプルなので使いやすい

Photoshop

• https://www.adobe.com/jp/products/photoshop.html
• 分類: 色覚
• OS: Win / Mac
• 特徴
  • 「表示」→「校正設定」からP型とD型をの色覚を選択し、「表示」→「色の校正」でシミュレートできる

Stark

• http://www.getstark.co/
• 分類: 色覚・コントラスト
• OS: Mac
• 特徴
  • Sketchのプラグイン色覚のシミュレートと、選択したオブジェクトのコントラスト比の計算ができる

Colour Contrast Analyser

• https://developer.paciellogroup.com/resources/contrastanalyser/
• 分類: コントラスト
• OS: Win / Mac
• 特徴
  • WCAG2.0に準拠しているかを検証できるツール
  • コントラストと色差の検証ができる

Contrast

• https://usecontrast.com/
• 分類: コントラスト
• OS: Mac
• 特徴
  • 2色のコントラストを検証するツール
  • メニューバーに常駐し、画面上のどの色もピックできる

ColorTester

• https://alfasado.net/apps/colortester-ja.html
• 分類: コントラスト
• OS: Mac
• 特徴
  • 2色のコントラスト比を計算し評価するツール
  • コントラストの評価はJIS X 8341-3:2010 (WCAG 2.0)の達成基準に基づく
  • 画像ファイルをウィンドウにドラッグ&ドロップすることで、画像の背景色と前景色を自動的に推測し、評価できる
  • クリップボードのピクチャから色を取得して評価を行うこともできる

ユーザー補助検証ツール

• https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor
• 分類: コントラスト
• OS: Android
• 特徴
  • キャプチャから文字を自動認識し、コントラスト比が低い箇所を抽出してくれる
  • タップ領域に該当する箇所を自動認識し、狭い・小さい場合は警告してくれる

[saladdays]

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

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

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

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

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

[saladdays]

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

模様について

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

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

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

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

[saladdays]

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

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

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

[Koiggy]

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

模様について

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

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

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

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

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

[Koiggy]

Photoshop

• https://www.adobe.com/jp/products/photoshop.html

• 分類: 色覚

• OS: Win / Mac

• 特徴

  • 「表示」→「校正設定」からP型とD型をの色覚を選択し、「表示」→「色の校正」でシミュレートできる

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

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

[magi1125]

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

• 細かいですが、凡例側の薄緑もボーダーで囲めるといいなと思います。
• 各色のコントラストがWCAG基準を満たすかはこちらで確認してみますね。このとき、figma版であるような、「バーの上に文字が来るケース」および「バーの塗りの文字色で凡例とするケース」はいったん気にせずで良いでしょうか（実装だとこのパターンはまだ無いようなので）。
• 相対的に明るくはなっているので、現行版と比較して弱視の方の見やすさがどうなっているかを当事者の知人に聞いてみようと思います。
• 上記に関連して、これを機に、罫線や軸ラベルのコントラストも改善できると良さそうです。
• 凡例とバーとの紐付けの観点で、この状態で1.4.1 色の使用を満たせるかについてです。ガイドライン上では状況Bに対して「模様での対応づけ」または「テキストによる情報提供」をもとめています。で、このグラフでは後者がマウスオーバー吹き出しや、スクリーンリーダー向け隠しtableと通常時のグラフを表示切り替えできるようにしたい #2068 で表が提供されることでクリアできる気がします。なので、あとは色覚特性がある方に実際に見てもらって明度差で見分けられれば模様モードはナシでもいいかもしれませんね。

[96KuRo]

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

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

案

saladdays氏の案との違い

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

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

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

パターン解説

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

相談

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

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

[forestgtree]

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

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

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

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

// 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]

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

[96KuRo]

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

[magi1125]

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

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

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

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

ちなみに

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

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

• 96さん案：薄緑と緑とあいだは2.47:1、緑と濃緑とのあいだは2.84:1
• forestgtreeさん案：薄緑と緑とあいだは1.66:1、緑と濃緑とのあいだは2.26:1

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

[magi1125]

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

[saladdays]

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

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

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

ご参考までにどうぞ！

• 1: #1B4D30
• 2: #00A040
• 3: #C5E2C6
• 4: #E2EEE2
• ボーダー: #7D947A

[magi1125]

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

[forestgtree]

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

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

[magi1125]

みなさまありがとうございます。
#2364 (comment)
のバージョンが、塗りのカラーコードは @saladdays 版と同一で、罫線のみ濃くなっていることを確認したので、このバージョンでいったん反映に移れればと思います。

[96KuRo]

@magi1125

#2364 (comment)

LGTM

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

[96KuRo]

@magi1125

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

それで良いかと思います！

[magi1125]

@96KuRo ありがとうございます！
@tsmd 名指しですいません、実装をお願いできますか？ #2364 (comment) で、系統数ごとの配色は以下です。

• 1系統：B
• 2系統：A・B
• 3系統：A・B・C

[akiyama708]

皆様，有難うございます．

3月27日に公開された「How to tell if We're Beating COVID-19」のグラフ表示法が非常に効果的です．このグラフを追加できないでしょうか．
https://www.youtube.com/watch?v=54XLXg4fYsc

よろしくお願い申し上げます．

[kaizumaki]

@akiyama708

3月27日に公開された「How to tell if We're Beating COVID-19」のグラフ表示法が非常に効果的です．このグラフを追加できないでしょうか．

当サイトは東京都の公式サイトです。東京都のデータ以外のグラフを載せるのは難しいです。

[tsmd]

色をアップデートしてプルリク作成しました。
画面キャプチャはプルリクを参照してください。
#2705

関係者さま、プルリクがマージされるとこのIssueが閉じられますので、残存課題の切り出し作業をお願いします。

[akiyama708]

@akiyama708

3月27日に公開された「How to tell if We're Beating COVID-19」のグラフ表示法が非常に効果的です．このグラフを追加できないでしょうか．

当サイトは東京都の公式サイトです。東京都のデータ以外のグラフを載せるのは難しいです。

有難うございます．

表示は東京都のデータだけでもよいと思いますので，東京都のデータを加工して，以下のグラフを更新していくプログラムを作れないでしょうか．
・x軸は，累積件数
・y軸は，1週間当たり新しい件数（成長率）
・スケールは，xyともに対数

こうすれば，流行が拡大していっているのか，縮小に向かっているのかが明らかとなります．tと件数の一般的なグラフではみえない傾向が明らかになります．

よろしくご検討頂けたら幸いです．

[kaizumaki]

@akiyama708 関係各所の確認が必要になりますが、いずれにせよ、こちらのissueとは話題が外れますので、よろしければ新たにissueを立てて提案されることをおすすめします。

[magi1125]

@tsmd
ありがとうございます!

関係者さま、プルリクがマージされるとこのIssueが閉じられますので、残存課題の切り出し作業をお願いします。

はいー別途立てますね。

[magi1125]

こちらに新Issue立てましたので、以降はこちらで。
#2917