アイスブルーを使った配色｜涼しげなバナーの背景と見出し

アイスブルーは、氷を思わせる淡い青系の色です。夏のイベントや商品のバナーに使うと涼しげな雰囲気を作れますが、見出しまで白や薄い青にすると、背景に溶け込むことがあります。バナーでは背景と見出しに明るさの差を付け、写真と文字の置き場所も分けることが大切です。水族館の夏季イベントを例に、2つの配色パターンを比較します。

アイスブルーの背景には濃い青の見出しを合わせる

「アイスブルー」という名前には、すべての資料で共通する一つのHEXコードがあるわけではありません。この記事では明るいアイスブルーの例として■#D6F0FFを使います。HEX（ヘックス）は、画面上の色を「#」と6桁の英数字で指定する方法です。

この背景に深いブルーグレー■#234559で見出しを置くと、コントラスト比は約8.60:1です。コントラスト比は、2色の相対的な明るさの差を示す数値です。説明文のチャコールブルー■#314652もアイスブルー■#D6F0FFに対して約8.35:1あります。青系でそろえながら、文字だけを十分に濃くする組み合わせです。

反対に、アイスブルー■#D6F0FFに白■#FFFFFFの見出しを載せると約1.18:1しかありません。涼しげな印象を優先して文字まで薄くするのではなく、濃い色を見出しに使うことから考えましょう。

水族館の夏季イベントバナーを2つの背景で比べる

例えば「夏の夜の水族館」という企画を告知する横長バナーなら、左にイベント名と日時、右に館内の写真を置く構成が考えられます。色は次の役割に分けます。

• 淡い背景を主役にする案：左側の広い面をアイスブルー■#D6F0FFにし、イベント名はブルーグレー■#234559、短い説明はチャコールブルー■#314652で表示します。日時のラベルには少し濃い淡青■#BFE6FFとブルーグレー■#234559の文字を使い、文字とラベルの比を約7.73:1にします。右側には写真を置き、文字を写真に重ねないようにします。
• 濃い見出し帯を主役にする案：全体を明るいオフホワイト■#F7FBFDにし、上部の見出し帯だけ深いブルーグレー■#234559に変えます。帯の文字にはアイスブルー■#D6F0FFを使い、約8.60:1の差を確保します。日時や会場の説明にはオフホワイト■#F7FBFDの上でチャコールブルー■#314652を使い、約9.48:1の差を取ります。

チケット案内のボタンは、淡い背景の案なら濃い青緑■#145E73の面に白■#FFFFFFの文字を合わせる方法があります。文字とボタンの比は約7.30:1、ボタンとアイスブルー■#D6F0FFの背景の比は約6.17:1です。写真や日時よりも操作する場所をはっきり示せます。

淡い色の境界とスマホでの見え方を調整する

アイスブルー■#D6F0FFと日時ラベルの淡青■#BFE6FFは約1.11:1、オフホワイト■#F7FBFDと淡青■#BFE6FFでも約1.26:1と、面同士の差が小さめです。ラベルの境界が必要な場合は、くすんだ青灰■#5C7889の枠線を添えます。枠線はアイスブルーと約3.95:1、少し濃い淡青と約3.55:1、オフホワイトと約4.48:1です。線を増やしすぎず、余白だけで分けられる場所は線を省いても構いません。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。スマートフォンでは写真を上、文字を下に並べるなど、見出しの背景色が途切れないように調整します。細い文字や写真上の文字は、計算上の比率だけでなく実際の画面でも確認してください。

HueRollではHEXコードを調整し、選択した色と白・黒のコントラストを比較できます。ただし任意の2色同士の比較やWCAGの自動判定には対応していません。今回のアイスブルーと各文字色・枠線の比率は、別途計算して確認したものです。