シアンと黄色の配色例｜資料の見出しと強調に使うには？

シアンと黄色はどちらも明るく目を引く色ですが、資料の見出しと強調部分に同じ分量で使うと、どこが重要なのか伝わりにくくなります。色の役割を分けることを基本に、白い説明スライドと暗い表紙の2例で、使う場所と具体的な色を紹介します。

シアンは見出し、黄色は要点の強調に使う

シアンは青緑系の明るい色、黄色は黄系の明るい色です。HEX（16進数で画面上の色を指定するコード）では、鮮やかなシアンを■#00FFFF、黄色を■#FFFF00と表せます。しかし、この2色を白■#FFFFFFの上で細い文字に使うと、背景とのコントラスト比（明るさの差を表す数値）はシアンが約1.25:1、黄色が約1.07:1しかありません。

そこで、明るい資料ではシアンを暗く調整して見出しに、黄色を重要な数字や結論の背景に使います。暗い表紙なら明るいシアンを見出しに戻し、黄色を短い強調ラベルにできます。本文の文字は別の落ち着いた色に統一すると、役割が分かりやすくなります。

資料の目的別に見る2つの配色例

白背景の報告資料：見出しを濃いシアンにする

ページの背景は白■#FFFFFF、見出しは濃いシアン■#006B7C、本文は暗い青みのグレー■#24313Aにします。見出しと白のコントラスト比は約6.19:1、本文と白は約13.33:1です。鮮やかなシアンよりも見出しの文字を識別しやすい組み合わせです。

結論や主要な数値だけを淡い黄色■#FFF0A8の小さな囲みに置き、文字は同じ暗いグレー■#24313Aにします。この組み合わせの文字コントラスト比は約11.60:1です。ただし黄色の面と白背景の差は約1.15:1と小さいため、必要な囲みには濃い灰青■#586B72の枠線を付け、見出しや「要点」の文字でも区別します。

暗い表紙：明るいシアンを主役にする

提案資料の表紙なら、背景を深い青灰■#152B38、大きな見出しを明るいシアン■#43F0EBにします。この文字と背景のコントラスト比は約10.39:1です。発表者名などの補足文字を淡い白■#F4F7F8にすると、背景との比は約13.60:1になります。

日付や最も伝えたい一言には黄色■#FFE066の短いラベルを使い、ラベルの文字を濃い背景色■#152B38にします。文字とのコントラスト比は約11.23:1です。黄色の面をスライド全体に広げず、見出しから少し離れた場所へ置くと、2色が主役を奪い合いにくくなります。

見づらくなったときの調整と確認

鮮やかなシアン■#00FFFFと黄色■#FFFF00は、互いのコントラスト比も約1.17:1と小さく、色だけで隣接する情報を区別する用途には向きません。図表で使うなら直接隣り合わせにせず、線の種類、数字、ラベル、余白も組み合わせます。投影する資料では、明るい会議室や小さな画面での見え方も確認しましょう。

Web向けのWCAG 2.2（Webコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上が基準です。資料づくりでも色の明暗差を点検する目安になりますが、この比率だけで資料全体の読みやすさが決まるわけではありません。HueRollではHEXから関連色を探し、選択色と白・黒のコントラスト比を確認できます。任意の2色同士の比較はできないため、仕上げる配色は別途確認してください。