Memo色覚障害の視点からもステキな配色について考えてみた先日円グラフを描いた際、色覚障害の視点を意識して配色をしてみたのですが、色々難しいんだなぁと思ったお話です。Contents意外と難しい?カラーユニバーサルデザインな配色CUDな配色をするにはどうしたら?CUDな配色を心掛けたい人のためのPDFがある!円グラフの色を再考してみる難しい場合は「グラデ」や「ディザ処理」もアリ意外と難しい?カラーユニバーサルデザインな配色それは先日公開した「週4日勤務にしてみたら仕事が捗った話」の記事を書いていたときのこと。1日の時間割を円グラフで描こうと思い、イラストレーターでこんな配色で作成しました。何も考えずに作ったグラフ水色、オレンジ、グリーン、ピンク、とよくありそうな配色じゃないですか?カラーパレットはイラレのデフォルトで入っていたものを項目のイメージで選択しています。これを、色校正にかけてみると......。ダメじゃん!!!オレンジとグリーンが特にわかりにくいですね。当ブログではこれまで、特定の色が見えにくい色覚障害の方でもわかりやすい色を使用する、カラーユニバーサルデザイン(CUD)について調べてきました。(2018.10.30追記しました)フリーのイラスト素材として大人気の『いらすとや』。産後すぐ家事と育児のちょっとした隙間に遊ぶために始めたパズドラ。モンスター集めながらやるパズルゲームのアレです。提案されていていいなーと思って見ていたら、ブコメで「(トップのメニューが)ピ...その割に、実際にCUDな配色をする方法については調べていなかったなぁと思ったので、最初の円グラフが↓の配色になるまで、調べたことをまとめました。Palette」というのを作ってはいました。Paletteは、色を選択するとどの色なら色差や明度差があるのか表示しますしかし、このパレットでは、選択した色ともう1〜2色くらいしか分かりません。グラフなど4色以上の色を使う場合はどうしたらいいのでしょうか?CUDな配色を心掛けたい人のためのPDFがある!CUDな配色については、こんなPDFがあります。DICグラフィックス株式会社この色とこの色の組み合わせは色差がないので分かりにくいとか、こんな色を使うと分かりやすいなど、具体的に紹介されています。それぞれ見分けやすいor見分けにくい組み合わせが紹介されています。カラーユニバーサルデザインを考えるためのポイントなどもまとまっているので、ぜひ見て欲しいです。配色考えるのが面倒だなーという人は、このPDFで紹介されている色や配色をそのまま使うというのもアリだと思います。円グラフの色を再考してみる先のPDFでは、4色ならこの組み合わせ、5色ならこの組み合わせが分かりやすいですよ、と組み合わせ例がいくつか紹介されています。色校正をしてみても、ハッキリ色分けできてるのが分かります。これなら確かに大丈夫そう!とはいえしかし。推奨色なのでコレでもいいのですが、ちょっとパッキリしすぎてますよね。柔らかい配色にしたい。考えた結果、手持ちの配色本で紹介されている色を、分かりやすいとされる組み合わせで選ぶことにしました。今回は「配色アイデア手帖」のハッピーイースターというカラーリストから選んで作成。色校正をしてみると、P型がまだちょっと分かりにくいですかね。これをベースに、色を細かく変えて確認を何度も繰り返し、最終的に↓に落ち着きました。難しい場合は「グラデ」や「ディザ処理」もアリ色をたくさん使うのが難しい場合は、1色のグラデーションにしたり、項目ごとにディザ処理(ハッチング)を施す、というのもアリです。実際に配色してみると、なかなか難しいということが分かりました。時間があるときにCUDなカラーパレットグループを作っておいて、サクッと使えるようにしておきたいです。サイトのワイヤー作りが捗った話コメントを残す返信をキャンセルする。(@mei331)神奈川在住。web作ったり、文字を書いたりしてる黒いひつじさん。育児も好きなことも欲張りながらお仕事してます。Mei.Koutsuki。