アクアブルーと白のバナー配色｜背景と見出しをどう分ける？

アクアブルーと白のバナーは、背景と見出しの役割を分けると情報を整理しやすくなります。ただし、明るいアクアブルーに白文字を置くと、文字が背景に埋もれやすくなります。この記事では「海辺の朝市」を告知するバナーを例に、白を広く使う案とアクアブルーを広く使う案を比較し、見出し・日時・ボタンの配色を具体的に説明します。

背景は白とアクアブルーのどちらを主役にする？

アクアブルーは水を連想させる明るい青緑系の色名です。今回は英語の色名調査で「aqua blue」として集計された■#02D8E9を例に使います。HEX（ヘックス）はWebで色を6桁の英数字で指定するコードです。色名だけでどの色見本も同じ数値になるわけではないため、制作する際はコードを共有しましょう。

開催日時や場所など文字が多いバナーなら、白■#FFFFFFを大きな背景にし、アクアブルー■#02D8E9は短い案内帯に使う方法があります。短い告知を先に目立たせたい場合は、アクアブルーを背景全体に広げてもよいでしょう。ただしアクアブルー■#02D8E9と白■#FFFFFFのコントラスト比は約1.75:1です。コントラスト比とは、隣り合う色の明るさの差を数値で示したものです。色みが違っても、数値が小さいと文字やカードの境界は見分けにくくなります。

そこで、どちらの背景でも見出しや本文は濃紺■#183B4Bにします。濃紺と白■#FFFFFFは約11.89:1、濃紺とアクアブルー■#02D8E9は約6.80:1です。配色の主役を2色に絞りつつ、文字を読むための暗い色を加える考え方です。

海辺の朝市バナーで背景と見出しを組み立てる2案

案1：白背景で開催情報を詳しく見せる。白■#FFFFFFをバナー全体に敷き、「海辺の朝市」の見出しと説明文を濃紺■#183B4Bにします。文字と背景の比は約11.89:1です。開催日時をアクアブルー■#02D8E9の細い帯にまとめ、濃紺■#183B4Bで文字を載せると約6.80:1になります。帯の色だけで意味を伝えず、「日時」などのラベルも付けます。

「出店案内を見る」ボタンは白背景の上に濃紺■#183B4Bで配置し、白■#FFFFFFの文字を載せます。ボタン内の文字とボタン背景、ボタンと周囲の白背景は、どちらも約11.89:1の差があります。文字が多い構成では、アクアブルーの面積を控えめにして見出しと情報を優先します。

案2：アクアブルー背景で短い告知を先に見せる。アクアブルー■#02D8E9をバナー全体に敷き、「海辺の朝市、開催」と短く書いた見出しを濃紺■#183B4Bにします。文字と背景は約6.80:1です。日時や場所は白■#FFFFFFのカードに分け、文字を濃紺■#183B4Bにすると約11.89:1になります。

白いカードとアクアブルーの差は約1.75:1なので、輪郭には青灰色■#376A75の枠を使います。枠と外側のアクアブルー■#02D8E9は約3.45:1、内側の白■#FFFFFFとは約6.03:1です。「会場を確認する」ボタンはアクアブルーの上に濃紺■#183B4Bの背景で置き、白■#FFFFFFの文字を載せます。ボタン内の文字と背景の比は約11.89:1、ボタンと周囲のアクアブルーとの比は約6.80:1です。

白文字・写真・カードの境界を最後に点検する

アクアブルー■#02D8E9に白■#FFFFFFの文字を直接載せると、コントラスト比は約1.75:1です。大きな見出しでも十分ではありません。白文字を使う場合は、濃紺■#183B4Bなど暗い単色の背景を文字の後ろに置き、改めて比を確認しましょう。

WCAG 2.2（Webコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字に原則4.5:1以上、大きな文字に3:1以上が必要です。操作に必要な部品の境界など、文字以外の重要な表示にも隣接色との3:1以上が必要な場合があります。写真やグラデーションを使うと文字の後ろの色が場所によって変わるので、単色同士の計算だけで判断しないようにします。

HueRollではHEX入力で色を選び、選択色と白・黒とのコントラスト比を確認できます。ただし任意の2色同士の比較やAAの自動判定はできません。完成時には見出し、カードの枠、ボタンが接する背景色を別途確かめましょう。