青と緑のグラフを見分けやすくするには？色の差と線の種類を考える

青と緑の2本の折れ線グラフは、色を変えただけでは見分けにくいことがあります。特に線が交差したり、スマートフォンで表示が小さくなったりすると、どちらの線を追っているのか迷いやすくなります。大切なのは、青と緑の明るさに差をつけたうえで、実線・破線や点の形でも区別できるようにすることです。4週間の問い合わせ件数を比較する例で考えます。

青と緑は色みだけでなく明るさも変える

グラフの「系列」とは、週ごとの問い合わせ件数のように、同じ項目を続けて記録した一組のデータです。2つの系列を青と緑に分ける場合、色相（青・緑などの色の種類）だけを変えても、似た明るさでは区別しにくいことがあります。

白 ■#FFFFFF のグラフ背景に、深い青 ■#113762 と、それより明るい緑 ■#3A9862 を合わせてみます。HEX（ヘックス）は「#」に続く英数字でWebの色を指定する形式です。青を暗め、緑を中程度の明るさにすると、色みの違いに加えて濃淡の差も生まれます。ただし、青と緑を選ぶだけで誰にでも判別できるとは限らないため、線の形も変えます。

実線・破線・点の形を組み合わせる配色例

架空のWebサービスで、メールとチャットの問い合わせ件数を4週間分、1枚の折れ線グラフにするとします。数値は配色を説明するための例です。

メールは青 ■#113762 の実線と丸印、チャットは緑 ■#3A9862 の長めの破線と四角印にします。線上の各週に異なる形の印を置けば、2本が近づいた場所でも点をたどりやすくなります。凡例（色や線の意味を説明する表示）にも「メール：実線・丸印」「チャット：破線・四角印」と文字で書きます。

第1週はチャット38件がメール24件より多く、第2週はメール37件とチャット36件で順位が逆転します。つまり第1週と第2週の間で2本の線が交差します。この位置こそ線種の違いが役立つ場面です。右端には「メール48件」「チャット40件」と直接ラベルを付け、近すぎる場合はラベルを上下にずらして、どちらの線に対応するか分かるようにします。表にも数値を残せば、色を見分けなくても正確な件数を確認できます。

交差点・コントラスト・縮小表示を確認する

コントラスト比は隣り合う色の明るさの差を表す数値です。今回の白 ■#FFFFFF の背景に対する比率は、青 ■#113762 が約12.02:1、緑 ■#3A9862 が約3.59:1です。どちらも、重要なグラフの線と背景についてWCAG（Webコンテンツのアクセシビリティに関するガイドライン）2.2で示される3:1以上です。目盛りや数値ラベルを濃いグレー ■#293847 にすると、白 ■#FFFFFF との比率は約11.99:1で、通常の文字の目安である4.5:1も超えます。

ただしコントラスト比は線の太さや破線の間隔まで保証する数値ではありません。細い点線は縮小時につながって見える場合があるので、線を少し太くし、破線の長さと間隔、丸印と四角印の大きさを実際のスマートフォンで確認します。白黒印刷でも系列を追えるか、交差する付近でラベルと線が重ならないかを見直しましょう。

HueRollでは色のHEXコードを確認し、選択した色と白・黒とのコントラストを調べられます。青と緑同士、また任意の背景色との比率は別途確認し、最後は線種・印・文字ラベルを含めたグラフ全体で判断してください。