ラベンダーとネイビーの組み合わせ｜背景と見出しに使う配色
ラベンダーとネイビーは、淡い紫と濃い青の明るさの違いを活かせる組み合わせです。ただし、どちらを背景にするかで、見出しの目立ち方やページ全体の雰囲気が変わります。オンライン読書会の告知バナーを例に、背景と見出しの役割を入れ替えた2案を比較し、本文や申込みボタンの色まで具体的に考えます。
背景を明るくするか暗くするかを先に決める
ラベンダーは紫に白を混ぜたような淡い色、ネイビーは暗い青として使います。色名には幅があるため、この記事では次の5色を例として固定します。HEX（ヘックス）は「#」と6桁の英数字で画面上の色を指定する形式です。
- ラベンダー：#E6DCF3 ― 淡い背景や濃い色の上の見出しに使用
- ネイビー：#223153 ― 見出しや濃い背景、ボタンに使用
- オフホワイト：#FAF9FC ― 案内文や日時を載せる面に使用
- 青みのある濃いグレー：#35415C ― 本文に使用
- 白：#FFFFFF ― 濃いボタン内の文字に使用
ネイビー #223153 を見出しにし、ラベンダー #E6DCF3 を広い背景にすると、明るい余白を保ちながら濃い文字を際立たせられます。反対にネイビーを背景に広く使い、ラベンダーを見出しにすると、暗い色面が画面の主役になります。色の印象は面積や周囲の色で変わるため、まず読ませたい文字の位置から決めましょう。
背景と見出しを入れ替えた2つのバナー例
例1：ラベンダーの背景にネイビーの見出し
- バナー全体の背景：ラベンダー #E6DCF3
- 「週末のオンライン読書会」の見出し：ネイビー #223153
- 開催日時を載せるカード：オフホワイト #FAF9FC
- 日時と説明文：濃いグレー #35415C
- 「参加を申し込む」ボタン：背景をネイビー #223153、文字を白 #FFFFFF
上部に大きな見出し、下部に日時とボタンを配置する案です。ラベンダーの上ではネイビーの文字を使い、カードの中は濃いグレーに統一します。背景を明るく保ちたい告知に向きますが、ラベンダーとオフホワイトは明るさが近いため、カードの境目が必要ならネイビーの細い枠線や十分な余白を足します。
例2：ネイビーの背景にラベンダーの見出し
- 上部の見出し帯：ネイビー #223153
- 見出し帯のタイトル：ラベンダー #E6DCF3
- 下部の日時・説明エリア：オフホワイト #FAF9FC
- 本文：濃いグレー #35415C
- 申込みボタン：背景をラベンダー #E6DCF3、文字と外枠をネイビー #223153
上部の濃い帯でイベント名を強調し、詳細は明るい下部エリアで読ませる構成です。ラベンダーを見出しとボタンに繰り返すと2つの領域に関連性が生まれます。ただし淡いボタンはオフホワイトの背景と溶け込みやすいため、外枠を付けて操作できる場所を見分けられるようにします。
文字のコントラストと淡い色の境界を確認する
コントラスト比は、文字と背景の明るさの差を数値化したものです。ネイビー #223153 とラベンダー #E6DCF3 は約9.74:1、濃いグレー #35415C とオフホワイト #FAF9FC は約9.71:1、白 #FFFFFF とネイビー #223153 は約12.87:1です。これらはWCAG（Webコンテンツを利用しやすくするための指針）のレベルAAで、通常サイズの文字に求められる4.5:1を上回ります。
一方、ラベンダー #E6DCF3 とオフホワイト #FAF9FC は約1.26:1で、色の差だけでは重要な境界を伝えにくい組み合わせです。例2のボタンを囲むネイビー #223153 とオフホワイト #FAF9FC は約12.27:1なので、枠線を目印にできます。枠だけに頼らず、ボタンの文言と余白でも役割を示しましょう。
スマートフォンでは見出し帯の高さやボタンの位置が変わるため、縮小した画面でも文章が読めて操作箇所が見つかるかを確認します。HueRollではHEXで色を調整し、選択した色と白・黒のコントラストを確認できます。ただし任意の2色同士の比較やAA・AAAの自動判定はできないため、実際の文字と背景の組み合わせは別の計算手段でも確認してください。