青と赤をグラフに使うには？色とラベルで系列を分ける

青と赤をグラフの2系列に使うなら、線の色だけでなく、実線・破線、点の形、系列名のラベルを組み合わせることが大切です。色の違いが見えにくい人や、スマートフォンの小さな画面でも、どの数値がどの系列に属するか追いやすくなります。ここでは架空の申込み件数を使い、折れ線グラフと棒グラフでの分け方を紹介します。

青と赤を使うときは、背景との差と系列の名前を決める

系列とは、同じ項目について日付などに沿って並べた数値のまとまりです。今回は「PCからの申込み」を青■#215E9B、「スマホからの申込み」を赤■#B54343とし、グラフ背景を白■#FFFFFFにします。HEX（ヘックス）は、Webで色を指定する「#」と6桁の英数字によるカラーコードです。色はこの例の提案値で、PCに青、スマホに赤という決まりがあるわけではありません。

青■#215E9Bと白■#FFFFFFのコントラスト比は約6.69：1、赤■#B54343と白■#FFFFFFは約5.46：1です。コントラスト比は2色の相対的な明るさの差を表します。どちらの線も白い背景との差はありますが、青■#215E9Bと赤■#B54343の相互の比は約1.23：1と近いため、線が交差する場所では色だけに頼れません。

青は実線と丸印（●）、赤は破線とひし形（◆）を組み合わせます。凡例には単に「青」「赤」と書かず、「PC」「スマホ」というデータの名前を付けます。

申込み件数の折れ線グラフを色・線種・ラベルで整理する

例えば、Webサイトの申込み件数を曜日別に比べるとします。次の数字は説明用に作った架空のデータで、実際の計測結果ではありません。

折れ線グラフでは、PCを青■#215E9Bの実線に丸印、スマホを赤■#B54343の破線にひし形の点で表します。火曜から水曜にかけて線が交差しても、線種と記号から追える構成です。右端には「PC 28件」「スマホ 27件」と直接書き、近すぎて重なる場合はラベルの位置を上下にずらして短い引き出し線で結びます。

同じ数値を曜日ごとの集合棒グラフにする場合も、各棒の近くに「PC」「スマホ」の表示を残し、必要に応じて模様や数値を付けます。凡例を離れた場所に置いて色だけを照合させるより、棒や線と名前の対応を近くに示すことが重要です。

線のコントラストと、数値を伝える別の方法も確認する

WCAG（Webコンテンツを利用しやすくするための指針）2.2では、内容の理解に必要なグラフの線などは、原則として隣り合う色と3：1以上のコントラストが求められます。また、色だけを情報の唯一の伝達手段にしないことも定められています。今回の青と赤は白背景に対してどちらも3：1を上回りますが、線を極端に細くしたり、交差部分を色だけで区別したりしないようにします。

系列名・数値・曜日の文字には濃いチャコール■#253041を白■#FFFFFFの上で使い、文字のコントラスト比は約13.31：1です。通常サイズの文字に求められる4.5：1以上を満たします。グラフの数値を読むための表も併記すると、色や線種に頼らず具体的な値を確認できます。スマホ幅では系列名の重なりや点の大きさを確認してください。

HueRollではHEX入力で色を調整し、選択した色と白・黒とのコントラストを確認できます。ただし、青と赤など任意の2色を直接比較したり、WCAGの合否を自動判定したりはできません。グラフで使う線・文字・背景の比率は別途計算して確かめましょう。