スチールブルーの配色例｜図表の強調色と補助色を決める

売上や問い合わせ数を図表にまとめるとき、すべての棒や線を同じ強さで塗ると、見てほしい数値が伝わりにくくなります。スチールブルーを強調色に決め、比較対象に落ち着いた補助色を使えば、色数を増やさずに情報の優先順位を作れます。架空の月別データを使って、棒グラフ・折れ線グラフ・表への使い分けを考えます。

スチールブルーを主役にする図表の色の決め方

今回のスチールブルーは■#4682B4です。CSS（Webページの見た目を指定する仕組み）の色名steelblueに対応する色で、HEX（16進数でWebの色を表すコード）で指定できます。鮮やかすぎない青を、今回注目してほしい棒や線に割り当てます。

• 強調色：スチールブルー■#4682B4。注目する月の棒や、主役の折れ線に使用。
• 補助色：グレー■#6B7280。比較対象の棒や前年の折れ線に使用。
• 図表の背景：白■#FFFFFF。棒・線の輪郭を確認しやすい余白に使用。
• 数値・項目名：濃いブルーグレー■#273445。背景上の文字を独立して読める色にする。

比較の情報まで目立たせる必要がなければ、まず「何を一つ強調するか」を決めましょう。青とグレーの明るさは近いため、色の違いだけで系列を区別するのではなく、数値ラベルや線の形も併用します。

図表の配色例：棒グラフ・折れ線グラフ・表

棒グラフ：最新月だけをスチールブルーにする

問い合わせ件数の架空の例では、4月38件・5月42件を補助色■#6B7280、注目する6月57件だけをスチールブルー■#4682B4にします。背景は白■#FFFFFF、月と件数の文字は濃いブルーグレー■#273445です。棒の長さに加え、数値を直接書くため色が見分けにくくても比較できます。

青い棒と白背景のコントラスト比は約4.11:1、グレーの棒と白背景は約4.83:1です。棒の間に余白を設け、重要な値を文字でも示します。

折れ線グラフ：強調色と補助色で線種も変える

今年と前年を比較するなら、今年をスチールブルー■#4682B4の実線と丸印、前年をグレー■#6B7280の破線とひし形にします。次は線種を示した凡例の例です。実際のグラフでも各線の近くに系列名を表示すると、凡例を往復せず確認できます。

この2色同士のコントラスト比は約1.18:1なので、線の色だけで区別する設計は避けます。線が交差する箇所では印の形や直接ラベルが特に役立ちます。表であれば、注目行の左端や見出しの一部にスチールブルーを使い、数値の本文は濃い文字色のままにすると、強調箇所を絞れます。

文字・罫線と図形のコントラストを確認する

白背景■#FFFFFFにスチールブルー■#4682B4を文字として使うと約4.11:1で、通常サイズの文字には不足します。数値ラベルには濃いブルーグレー■#273445（白との比は約12.63:1）を使うか、青系の文字が必要なら濃い青■#2D608A（約6.66:1）へ調整します。色付きの棒に小さな白文字を重ねる方法も、同じ理由で避けます。

WCAG（Web Content Accessibility Guidelines：Webコンテンツの利用しやすさに関する指針）2.2のAA（適合レベルの一つ）では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が目安です。情報理解に必要なグラフの棒や線など、文字以外の図形には、隣接する色との3:1以上が求められます。薄い罫線■#D9E1E8と白背景■#FFFFFFは約1.32:1なので、これだけを重要な境界やデータの目印にしないでください。

HueRollではHEXを入力して色を調整し、選択色と白・黒とのコントラストを確認できます。ただし、スチールブルーと補助色のような任意の2色同士の比較や、AA適合の自動判定はできません。この記事の組み合わせは別途計算したものです。完成した図表では、色・線種・数値ラベルをまとめて見直しましょう。