ボルドーとアイボリーの配色例｜見出しと余白で印象を整える

ボルドーとアイボリーは、深い赤紫と明るい白系の色を組み合わせる配色です。両方を広い面に使うより、ボルドーを見出しや案内の目印に絞り、アイボリーを余白として残すと、写真や文章の並びを整えやすくなります。ここでは焼き菓子店の季節限定ギフトを紹介するWebページを例に、背景・見出し・カード・ボタンの色を具体的に決めていきます。

ボルドーを見出しに、アイボリーを余白に使う

ボルドーはワインを思わせる深い赤紫、アイボリーはわずかに黄みを含む白系の色を指します。どちらも色名だけで厳密な数値が一つに決まるわけではありません。この記事ではボルドーを■#702A43、アイボリーを■#FAF5E9の例として扱います。HEX（ヘックス）はWebの色を「#」と6桁の英数字で指定する方法です。

アイボリー■#FAF5E9の上にボルドー■#702A43の見出しを置くと、文字と背景のコントラスト比は約9.19:1です。コントラスト比は、2色の相対的な明るさの差を示します。本文に使う濃いチャコール■#373035も、同じ背景に対して約11.79:1あります。見出しに色み、本文に落ち着いた濃さを割り当てると、色数を増やさず情報の順序を伝えられます。

ただし、アイボリーを使ったからといって余白が自動的に生まれるわけではありません。見出しの前後や写真の周囲に何も置かない空間を設けることが大切です。濃い色は小さな範囲に使い、明るい背景の面積を広めに残す構成から始めましょう。

焼き菓子のギフト紹介ページでの配色例

例えば、商品写真、ギフトの内容、配送日の案内、予約ボタンを載せるページなら、色を次の役割で使い分けます。色見本はそれぞれの背景色の上にHEXコードを表示しています。

• 最初の案内：背景はアイボリー■#FAF5E9、商品名の見出しはボルドー■#702A43にします。写真と見出しの間に広めの余白を取り、説明文はチャコール■#373035で短く添えます。
• 商品カード：カードを白■#FFFFFF、周囲をアイボリー■#FAF5E9にします。この2色のコントラスト比は約1.09:1なので、色の差だけでは区切りが弱くなります。カード間の間隔を空け、商品名をボルドー■#702A43、価格をチャコール■#373035にして内容を整理します。
• 配送日の補足欄：淡いローズベージュ■#F0E4DFの背景に、チャコール■#373035の文字を置きます。文字との比は約10.31:1ですが、補足欄とアイボリー■#FAF5E9の差は約1.14:1です。背景だけに頼らず「お届け予定」などの見出しを付けます。
• 予約の操作：ボルドー■#702A43のボタンにアイボリー■#FAF5E9の文字を載せます。両色の比は約9.19:1です。ボタンを一つの主要操作として配置し、ほかの案内まで同じ濃い色で囲まないようにします。

この例では、ボルドーをすべての背景へ広げるのではなく、商品名と予約の目印に共通して使っています。見る場所と読む場所を分けることで、アイボリーの広い余白が活きます。

淡い色の境界と小さな文字を見直す

カードの輪郭が必要な場面では、濃いくすみローズの枠線■#80636Bも候補です。白■#FFFFFFのカードに対して約5.36:1、周囲のアイボリー■#FAF5E9に対して約4.93:1あります。ただし、すべてのカードに濃い枠を付けると画面が細かく分断されるため、余白や見出しだけで区別できる場所では線を省いて構いません。

一方、少し明るいローズ色■#A46D7Cをアイボリー■#FAF5E9の上で小さな補足文字にすると、比率は約3.82:1で通常の文字には不足します。WCAG（Webコンテンツを利用しやすくするための指針）2.2のレベルAAでは、通常の文字に4.5:1以上、大きな文字に3:1以上が原則です。小さい日付や価格も、背景と十分に差のある文字色を選びましょう。

スマートフォンでは、見出しが2行になっても前後の余白がつぶれないか、予約ボタンが写真や説明と近づきすぎないかを確認します。HueRollではHEXで色を調整し、選択した色と白・黒とのコントラストを比べられます。ただし任意の2色同士の比較やWCAGの自動判定には対応していません。ここで示した組み合わせの比率は別途計算しています。