見やすいグラフの色分けをまとめました(カラーコード)

こんてんつ

見やすいグラフの配色パターンをまとめます。パレットをまとめた後、最後の方で考察を述べています。

結論

カラーユニバーサルデザインが一番見やすいです。

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

考察

今回は、万人にとって見やすい色という観点から次の二つの資料を参考にした。

前者はカラーユニバーサルデザイン機構のHPより、色に関する詳細な説明を取得することができる。見やすい色、見にくい色の組み合わせまで紹介されているので参考にしてほしい。

今回紹介した7色の部分までは、「やや見分けにくい組み合わせ△」を完全に回避した。しかし、8~9色では「やや見分けにくい組み合わせ△」を完全に回避することはできなかった。それでも一応、「見分けにくい組み合わせ×」は回避している。

後者はオランダ宇宙研究所(SRON : Space Research Organisation Netherlands)によって報告されている。報告書の中では、Mutedはクリアな赤色や青色をサポートしていないことと、pale grayがデータの色塗りの様なグラフに向いていないことが欠点とされている。

対象の報告書にはMutedのほかに様々なパレットがある。好みの色があれば参考にできるかもしれない。

最後に

個人的な見やすさで言うとやはりカラーユニバーサルデザインの6色までだと思う。個人的には6色までに抑えてグラフ作成しようと思う。今回示したのは数学の関数であるが、折れ線グラフや棒グラフにおいても有効だと考える。