チャコールグレーと水色の配色例｜暗い背景と明るいアクセント

チャコールグレーの暗い背景に水色を合わせるときは、見出し・説明文・グラフ線・操作ボタンに別々の役割を持たせると、明るいアクセントを活かせます。ただし、暗い背景で目立った水色を明るいカードへそのまま移すと、境界が分かりにくくなる場合があります。架空の雨量ダッシュボードを例に、暗いグラフ面と明るい詳細欄を使い分ける配色を考えます。

チャコールグレーには明るい水色を合わせ、文字色を分ける

チャコールグレーは木炭を思わせる濃い灰色で、色見本によって青みや紫み、数値に違いがあります。この記事では青みのある暗いグレー■#36454Fと、明るい水色■#9ED7EFを作例として使います。色名の唯一のカラーコードという意味ではありません。HEX（ヘックス）はWebの色を「#」と6桁の英数字で指定する形式です。

水色■#9ED7EFとチャコールグレー■#36454Fのコントラスト比は約6.33:1です。コントラスト比は、隣り合う2色の相対的な明るさの差を表します。この組み合わせなら、暗いグラフに必要な線や短い数値ラベルを水色で表示できます。

見出しにはオフホワイト■#F4F8FBを使うと、チャコールグレーに対して約9.27:1、日時などの補足文には淡い青灰■#CBD7DEを使っても約6.75:1です。水色をすべての文字に使うのではなく、グラフの重要な線と一つの操作に絞ると、見出しを先に読める構成にできます。

雨量ダッシュボードの暗いグラフと淡い詳細カードを作る

架空の雨量確認ページを想定します。画面上部に「雨量の推移」とグラフ、下部に観測期間や使い方の説明を配置します。実際の雨量データを示すものではなく、色と情報の置き方を検討するための画面例です。

• 暗いグラフを主役にする案：グラフ面をチャコールグレー■#36454Fにし、見出しをオフホワイト■#F4F8FB、時間帯の説明を淡い青灰■#CBD7DEにします。雨量の変化を示す折れ線は明るい水色■#9ED7EFで表示し、背景との比を約6.33:1にします。「グラフを拡大」のボタンも水色■#9ED7EFの面にチャコールグレー■#36454Fの文字を合わせると、文字とボタンの比は約6.33:1です。線には「雨量の推移」などの文字ラベルを添えます。
• 明るい詳細カードを使う案：グラフの下のページ背景をオフホワイト■#F4F8FBにし、その中に淡い水色■#E8F5FAの詳細カードを置きます。両方の面の比は約1.04:1と小さいため、カードの輪郭が必要なら青灰■#5B7280の線を加えます。線は詳細カードと約4.53:1、周囲のオフホワイトと約4.72:1です。カードの文字はチャコールグレー■#36454Fで約8.90:1、小さなグラフ線は濃い青■#215B78にすると約6.66:1を確保できます。

この詳細欄に「詳しいデータを見る」ボタンを加えるなら、濃い青■#215B78の塗りに白■#FFFFFFの文字を置く案があります。ボタン文字との比は約7.41:1、ボタン面と淡い水色の周囲は約6.66:1です。暗いグラフと明るいカードでは、同じ水色を無理に使い続けないことがポイントです。

淡い背景では水色の線を濃くし、情報を色だけに頼らない

暗い背景で使った明るい水色■#9ED7EFを詳細カード■#E8F5FA上のグラフ線にそのまま使うと、両者の比は約1.41:1しかありません。オフホワイト■#F4F8FB上でも約1.47:1です。重要な折れ線には、先ほどの濃い青■#215B78など、背景との差を確保した色を選びます。

また、水色■#9ED7EFのボタンに白■#FFFFFFの文字を置くと約1.56:1で、通常の文字の基準には不足します。暗いグラフ上では水色のボタンとチャコールグレーの文字を組み合わせ、明るいカードでは濃い青のボタンと白文字を合わせるようにします。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上が必要です。また、データの意味を理解するために必要なグラフ線や操作部品の手がかりは、隣接する色と原則3:1以上が求められます。グラフが複数の系列を示す場合は、色だけで区別せず線種・点・系列名も付けましょう。細い線は表示環境によって弱く見えるため、太さも実画面で確かめます。

HueRollではHEXコードを入力して色を調整し、配色候補や選択した色と白・黒のコントラストを確認できます。ただし、任意の2色同士の比較やWCAGの自動判定には対応していません。ここで紹介した文字・グラフ線・カード境界の比率は別途計算して確認しています。