グレーと黄色の配色に何色を足す？資料に使うアクセントの選び方

グレーと黄色の資料にもう1色加えるなら、濃い青緑が候補になります。グレーは通常の情報、黄色は確認してほしい要点、青緑は結論や注目データというように役割を分けられるからです。ただし、3色を同じ面積で使うと、どこを先に見ればよいか迷うことがあります。月次の施策報告スライドを例に、色の使う場所と量を具体的に考えます。

3色目には濃い青緑を選び、黄色と役割を分ける

例えば、通常のデータに落ち着いたグレー■#66727B、補足に淡い黄色■#FFF1BB、特に見せたい結果に濃い青緑■#1F6071を使います。黄色が明るい暖色なのに対し、青緑は暗めの寒色なので、役割を分けると画面に強弱を付けられます。どの色が最適かは資料の目的やブランドカラーによって変わりますが、今回は青緑を3色目として試します。

ここで示すHEX（ヘックス）は、Webや画面上の資料で使える、「#」と6桁の英数字による色の指定方法です。白い背景■#FFFFFFに青緑■#1F6071の文字を載せたときのコントラスト比は約7.07:1です。コントラスト比は2色の明るさの差を表し、数値が高いほど差が大きくなります。通常の文章に使うチャコール■#303841と白背景の比は約11.88:1です。

黄色■#FFF1BBは白■#FFFFFFと比べると約1.13:1しかないため、重要な棒グラフの色としてそのまま使うより、要点を示す背景に向いています。グラフ上で目立たせる部分は、白背景に対して約7.07:1の青緑■#1F6071に任せる考え方です。

月次報告スライドでの3色の配置例

架空のWebサイト改善施策を報告する資料を考えます。各ページで色の意味を変えず、表紙、成果比較、次の施策という順番で使います。

• 表紙と要約：白■#FFFFFFを背景にし、タイトルはチャコール■#303841、日付などの補足は濃いグレー■#535E69にします。補足文字と白の比は約6.62:1です。結論を一文だけ黄色■#FFF1BBの帯に置き、文字はチャコール■#303841にします。黄色と文字の比は約10.49:1です。
• 成果を比べる棒グラフ：背景を白■#FFFFFF、通常の棒をグレー■#66727B、今回注目する棒を青緑■#1F6071にします。白との比はそれぞれ約4.93:1、約7.07:1です。棒の上には数値と項目名を記し、色だけで系列を見分けさせないようにします。
• 課題と次の施策：課題の説明を黄色■#FFF1BBの欄にまとめ、チャコール■#303841で具体的な内容を書きます。最後の結論欄は青緑■#1F6071の背景に白■#FFFFFFの文字を置くと約7.07:1です。黄と青緑を同じ大きさの見出し帯で並べ続けず、優先する内容に使い分けます。

資料の全ページで「通常＝グレー」「要点の補足＝黄色」「結論と注目データ＝青緑」を統一しておくと、ページごとに色の意味を読み直さずに済みます。色の配分に固定の正解はありませんが、白い余白を広く残し、青緑は数値や結論など少数の場所に使うと整理しやすくなります。

淡い黄色の境界とグラフの見分けやすさに注意する

白■#FFFFFFと黄色■#FFF1BBの境界は約1.13:1と小さいため、黄色い欄が埋もれる場合はグレー■#66727Bの枠線を加えます。この枠線と黄色の比は約4.36:1です。黄色い欄には「要点」「確認事項」などの見出しを付け、色だけで役割を伝えないようにします。

画面で表示する資料を作る際は、WCAG（Webコンテンツの利用しやすさに関する指針）2.2のレベルAAも参考になります。通常の文字には原則4.5:1以上、内容の理解に必要なグラフの線や形には隣接色と3:1以上が求められます。スライドを投影したときは線が細く見える場合があるため、数値ラベルや線の太さも確かめましょう。

HueRollではHEXコードを調整し、配色候補や選択した色と白・黒のコントラストを確認できます。ただし、任意の2色の比較やWCAGの自動判定には対応していません。グレー・黄色・青緑のような組み合わせは、実際に隣り合う2色を別途計算して検証します。