コーラルピンクとネイビーを合わせるコツ｜バナーの主役を決める

コーラルピンクとネイビーは、明るい暖色と暗い青を組み合わせる配色です。両方を大きな面積で使うと視線が分散することもあるため、バナーではどちらを背景の主役にするかを先に決めると整理しやすくなります。ここでは春の文具フェアの告知バナーを例に、主役を入れ替えた2つの案を比較します。

主役は背景の広さで決め、もう一方を見出しやボタンに使う

今回のコーラルピンクは■#F2A39D、ネイビーは■#1F3550を例にします。色名に共通する唯一のカラーコードがあるわけではありません。HEX（ヘックス）とは、画面上の色を「#」と6桁の英数字で指定する方法です。

この2色のコントラスト比は約6.24:1です。コントラスト比は隣り合う色の相対的な明るさの差を表す数値で、コーラルピンク■#F2A39Dの上にネイビー■#1F3550の文字を置いても、色を逆にしても同じ値になります。

明るく軽やかな背景を見せたいならコーラルピンクを広く使い、見出しや操作をネイビーで引き締めます。濃い背景で告知をまとめたいならネイビーを広く使い、コーラルピンクを申込みなどの小さな面に絞ります。2色を半分ずつ塗るより、色の担当をはっきりさせる考え方です。

春の文具フェアで主役を入れ替えた2種類のバナーを作る

例えば、新作ノートとペンを紹介する横長バナーなら、左側にフェア名・開催日・ボタン、右側に商品の写真を配置します。写真の周囲にはクリーム系■#FFF8F1を使い、文字を直接写真に重ねない構成とします。3色の役割を先に整理しておくと、背景を入れ替えても色を増やさずに済みます。

• コーラルピンクを主役にする案：左側の広い背景をコーラルピンク■#F2A39Dにし、フェア名と開催日をネイビー■#1F3550で表示します。申込みボタンもネイビー■#1F3550の面にして、文字にはクリーム系■#FFF8F1を使います。ボタン文字と面の比は約11.85:1、ボタンと周囲のコーラルピンクの比は約6.24:1です。商品の写真は右側の明るい領域にまとめます。
• ネイビーを主役にする案：左側の広い背景をネイビー■#1F3550にし、フェア名・短い説明はクリーム系■#FFF8F1で表示します。見出しと背景の比は約11.85:1です。申込みボタンをコーラルピンク■#F2A39Dに変え、ボタン文字をネイビー■#1F3550にすると約6.24:1を確保できます。コーラルピンクを各所に散らさず、主要な操作に絞ります。

どちらの案でも、開催日は「開催日」と文字で示し、ボタンには「参加を申し込む」など具体的な操作名を付けます。色だけで情報の種類や操作を伝えるのではなく、見出しの大きさや配置もそろえて比較しましょう。

文字の明るさと色の面積を最後に調整する

コーラルピンク■#F2A39Dに白■#FFFFFFの文字を重ねると、コントラスト比は約2.00:1にとどまります。また、クリーム系■#FFF8F1の上にコーラルピンク■#F2A39Dを文字色として使う場合も約1.90:1です。どちらも通常の文章には不足するため、コーラルピンクは淡い背景上の小さな文字ではなく、面や装飾に使い、説明文はネイビー■#1F3550にします。

WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が求められます。意味のある操作部品の視覚的な手がかりにも、隣り合う色との3:1以上が原則です。背景とボタン内の文字は、別々の組み合わせとして確認します。

クリーム系■#FFF8F1と白■#FFFFFFの差は約1.05:1なので、白い商品写真の余白と背景の境目は見えにくい場合があります。境界が必要なら写真の配置や余白を工夫し、スマートフォンでは文字と写真を縦に分けて確認します。HueRollではHEXコードと配色候補を調べ、選択色と白・黒のコントラストを比較できますが、任意の2色比較やWCAGの自動判定はできません。ここで示した2色の比率は別途計算しています。