こんてんつ
見やすいグラフの配色パターンをまとめます。パレットをまとめた後、最後の方で考察を述べています。
結論
カラーユニバーサルデザインが一番見やすいです。
- 3色使用の場合、カラーユニバーサルデザインの赤、青、緑が抜群に良い
- カラーユニバーサルデザインは最大7色まで対応可(黒含む)
- どうしても10色使いたいときは、P. Tol氏が提案するMutedというパレットがある
3色(カラーユニバーサルデザイン)
例 | 16進カラーコード | RGB | 名前 |
---|---|---|---|
■ | #FF4B00 | R255 G75 B0 | 鮮やかな黄みの赤 |
■ | #005AFF | R0 G90 B255 | 鮮やかな青 |
■ | #03AF7A | R3 G175 B122 | 重厚な青みの緑 |
4~6色(カラーユニバーサルデザイン)
上から順に使うと良い。黄色が見にくければ黒を検討すべき。ただしグレーはNG(青との相性が△)。
例 | 16進カラーコード | RGB | 名前 |
---|---|---|---|
■ | #FF4B00 | R255 G75 B0 | 鮮やかな黄みの赤 |
■ | #005AFF | R0 G90 B255 | 鮮やかな青 |
■ | #03AF7A | R3 G175 B122 | 重厚な青みの緑 |
■ | #4DC4FF | R77 G196 B255 | シアン色 |
■ | #F6AA00 | R246 G170 B0 | 鮮やかな黄みの橙 |
■ | #FFF100 | R255 G241 B0 | 鮮やかな黄 |
7色(カラーユニバーサルデザイン)
カラーユニバーサルデザインで表示できる限界だと思う。
例 | 16進カラーコード | RGB | 名前 |
---|---|---|---|
■ | #FF4B00 | R255 G75 B0 | 鮮やかな黄みの赤 |
■ | #005AFF | R0 G90 B255 | 鮮やかな青 |
■ | #03AF7A | R3 G175 B122 | 重厚な青みの緑 |
■ | #4DC4FF | R77 G196 B255 | シアン色 |
■ | #F6AA00 | R246 G170 B0 | 鮮やかな黄みの橙 |
■ | #FFF100 | R255 G241 B0 | 鮮やかな黄 |
■ | #000000 | R0 G0 B0 | 漆黒の黒色 |
8~9色(カラーユニバーサルデザイン)
黒、紫、グレーは互いに相性が△。また、紫とグレーは青との相性も△なため微妙。これくらい数が多くなった場合、後述のTol氏が提案するMutedの方が良いかもしれない。
例 | 16進カラーコード | RGB | 名前 |
---|---|---|---|
■ | #FF4B00 | R255 G75 B0 | 鮮やかな黄みの赤 |
■ | #005AFF | R0 G90 B255 | 鮮やかな青 |
■ | #03AF7A | R3 G175 B122 | 重厚な青みの緑 |
■ | #4DC4FF | R77 G196 B255 | シアン色 |
■ | #F6AA00 | R246 G170 B0 | 鮮やかな黄みの橙 |
■ | #FFF100 | R255 G241 B0 | 鮮やかな黄 |
■ | #000000 | R0 G0 B0 | 漆黒の黒色 |
■ | #990099 | R153 G0 B153 | 奥深い紫色 |
■ | #84919E | R132 G145 B158 | グレー |
10色(Paul Tol氏提案 Muted)
Paul Tol氏によって提案されたMutedというパレット。
「"well work for plot lines and map regions"(線グラフやデータのマッピングに適している)」と記述があるが、灰色のみ「"Pale grey is meant for bad data in maps."(灰色はマッピングされたデータの色塗りには向いていない)」とある。
例 | 16進カラーコード | RGB | 名前 |
---|---|---|---|
■ | #332288 | R51 G34 B136 | indigo |
■ | #88CCEE | R136 G204 B238 | cyan |
■ | #44AA99 | R68 G170 B153 | teal |
■ | #117733 | R17 G119 B51 | green |
■ | #999933 | G153 G153 B51 | olive |
■ | #DDCC77 | R221 G204 B119 | sand |
■ | #CC6677 | R204 G102 B119 | rose |
■ | #882255 | R136 G34 B85 | wine |
■ | #AA4499 | R170 G68 B153 | purple |
■ | #DDDDDD | R221 G221 B221 | pale gray |
考察
今回は、万人にとって見やすい色という観点から次の二つの資料を参考にした。
- カラーユニバーサルデザイン(NPO法人 カラーユニバーサルデザイン機構)
- Muted by P.Tol(SRON/EPS/TN/09-002 issue 3.2 18 August 2021)
前者はカラーユニバーサルデザイン機構のHPより、色に関する詳細な説明を取得することができる。見やすい色、見にくい色の組み合わせまで紹介されているので参考にしてほしい。
今回紹介した7色の部分までは、「やや見分けにくい組み合わせ△」を完全に回避した。しかし、8~9色では「やや見分けにくい組み合わせ△」を完全に回避することはできなかった。それでも一応、「見分けにくい組み合わせ×」は回避している。
後者はオランダ宇宙研究所(SRON : Space Research Organisation Netherlands)によって報告されている。報告書の中では、Mutedはクリアな赤色や青色をサポートしていないことと、pale grayがデータの色塗りの様なグラフに向いていないことが欠点とされている。
対象の報告書にはMutedのほかに様々なパレットがある。好みの色があれば参考にできるかもしれない。
最後に
個人的な見やすさで言うとやはりカラーユニバーサルデザインの6色までだと思う。個人的には6色までに抑えてグラフ作成しようと思う。今回示したのは数学の関数であるが、折れ線グラフや棒グラフにおいても有効だと考える。