先日円グラフを描いた際、色覚障害の視点を意識して配色をしてみたのですが、色々難しいんだなぁと思ったお話です。
意外と難しい？カラーユニバーサルデザインな配色
それは先日公開した「週４日勤務にしてみたら仕事が捗った話」の記事を書いていたときのこと。 １日の時間割を円グラフで描こうと思い、イラストレーターでこんな配色で作成しました。
水色、オレンジ、グリーン、ピンク、とよくありそうな配色じゃないですか？
カラーパレットはイラレのデフォルトで入っていたものを項目のイメージで選択しています。
しかしこれを、色校正にかけてみると……。
だ、ダメじゃん！！！
オレンジとグリーンが特にわかりにくいですね。
当ブログではこれまで、特定の色が見えにくい色覚障害の方でもわかりやすい色を使用する、カラーユニバーサルデザイン（CUD）について調べてきました。
その割に、実際にCUDな配色をする方法については調べていなかったなぁと思ったので、最初の円グラフが↓の配色になるまで、調べたことをまとめました。
CUDな配色をするにはどうしたら？
実は以前、CUDな配色を楽にできたらいいなぁとの思いで、「GUCUD Palette」というのを作ってはいました。
しかし、このパレットでは、選択した色ともう１〜２色くらいしか分かりません。
では、グラフなど４色以上の色を使う場合はどうしたらいいのでしょうか？
CUDな配色を心掛けたい人のためのPDFがある！
CUDな配色については、こんなPDFがあります。
この色とこの色の組み合わせは色差がないので分かりにくいとか、こんな色を使うと分かりやすいなど、具体的に紹介されています。
見分けやすい推奨色20色のほか、塗装用、印刷用、画面用でそれぞれ見分けやすいor見分けにくい組み合わせが紹介されています。
カラーユニバーサルデザインを考えるためのポイントなどもまとまっているので、ぜひ見て欲しいです。
配色考えるのが面倒だなーという人は、このPDFで紹介されている色や配色をそのまま使うというのもアリだと思います。
円グラフの色を再考してみる
先のPDFでは、４色ならこの組み合わせ、５色ならこの組み合わせが分かりやすいですよ、と組み合わせ例がいくつか紹介されています。
そこで、元のグラフでは「水色、オレンジ、グリーン、ピンク」の組み合わせで作っていたのを、PDFの推奨配色「赤、黄色、緑、空色」に変更してみました。
色校正をしてみても、ハッキリ色分けできてるのが分かります。
これなら確かに大丈夫そう！
とはいえしかし。
推奨色なのでコレでもいいのですが、ちょっとパッキリしすぎてますよね。
もう少し柔らかい配色にしたい。
色々と考えた結果、手持ちの配色本で紹介されている色を、分かりやすいとされる組み合わせで選ぶことにしました。
今回は「配色アイデア手帖」のハッピーイースターというカラーリストから選んで作成。
色校正をしてみると、P型がまだちょっと分かりにくいですかね。
これをベースに、色を細かく変えて確認を何度も繰り返し、最終的に↓に落ち着きました。
難しい場合は「グラデ」や「ディザ処理」もアリ
色をたくさん使うのが難しい場合は、１色のグラデーションにしたり、項目ごとにディザ処理（ハッチング）を施す、というのもアリです。
実際に配色してみると、なかなか難しいということが分かりました。
時間があるときにCUDなカラーパレットグループを作っておいて、サクッと使えるようにしておきたいです。
