赤と白の配色で目立たせるには？告知バナーの色の比率

赤と白だけの告知バナーは、赤を大きく使えば必ず目立つとは限りません。赤い面が広すぎると、見出しもラベルも同じ強さに見え、何を先に読めばよいか分かりにくくなることがあります。大切なのは、白い余白と赤い強調面の比率を決め、文字の役割を分けることです。ここでは横長バナーを例に、面積の違いと文字色の選び方を具体的に比較します。

赤と白は「どこを読ませるか」で比率を決める

イベント案内など、開催内容・日時・会場をきちんと読ませたい場合は白を主役にし、赤は「申込受付中」などを示す短い領域に使うと整理しやすくなります。一方、一つの短い告知をすぐに伝えたい場合は、赤い面を広くする選択肢もあります。ただし、赤を増やす分だけ文字を絞り、白い面で詳細を補うのが基本です。

ここでいう75：25などの数字は、文字の画素数ではなく、バナー内の背景として見える大きな色面の目安です。余白や文字の量でも印象が変わるため、すべてのバナーに当てはまる固定の比率ではありません。

白75％・赤25％と、赤60％・白40％を比較する

例A：情報を読ませるセミナー告知。横長バナーの左側約75％を白■#FFFFFFにし、見出し「セミナー開催」と日時・会場をチャコールグレー■#252525で置きます。右側約25％を深い赤■#B3262Dの帯にして、白■#FFFFFFの「申込受付中」を短く配置します。白地で詳細を読み進めてもらい、赤い帯で申込み状況を知らせる構成です。情報量が多い場合に向いています。

例B：短い告知を先に見せるイベント案内。左側約60％を深い赤■#B3262Dにして、白■#FFFFFFの「今週末開催」を大きく配置します。右側約40％は白■#FFFFFFとし、チャコールグレー■#252525でイベント名・日時・参加方法を並べます。赤が主役でも、長い説明を赤地に詰め込まず、詳細の受け皿として白を残します。

この2例で使う深い赤■#B3262Dと白■#FFFFFFのコントラスト比は約6.50：1、チャコールグレー■#252525と白■#FFFFFFは約15.33：1です。WCAG（ウェブコンテンツを利用しやすくするための国際的なガイドライン）2.2では、通常サイズの文字は4.5：1以上、大きな文字は3：1以上が基準です。示した組み合わせはどちらも通常サイズの文字の数値基準を上回りますが、書体の太さや実際の表示サイズも確認してください。

強調したい情報と小さな表示で最終調整する

まず、最初に見てほしい要素を「見出し」「開催時期」「受付状況」などから一つ決めます。見出しが主役なら白い領域と余白を広く取り、赤を帯やラベルに限定します。赤を広く使う場合は、白文字を短くし、詳細は白い領域にまとめると情報の順番を作れます。

実際の掲載幅まで縮小して、文字が詰まらないか、赤い帯だけが目立ちすぎないかを確かめます。また、赤だけで「受付中」「終了」を区別せず、状態を示す文字も併記します。境界の印象は余白や配置でも調整できるため、赤と白を半分ずつ使う必要はありません。

HueRollでは赤のHEX（Webで色を表す16進数のカラーコード）を入力し、選択色と白・黒とのコントラストを確認できます。任意の2色の比較やWCAGの合否自動判定には対応していないため、完成したバナーでは、実際に隣り合う文字色と背景色の組み合わせを別途検証してください。