ボルドーとグレーの配色例｜落ち着きとメリハリの作り方
ボルドーとグレーは、色数を増やさずに落ち着いた雰囲気を作りたいときの組み合わせです。ただし、両方を暗くすると画面が沈み、ボルドーを広く使うと重く感じられることもあります。Webサイトの告知バナーを例に、背景・見出し・本文・ボタンの役割を分け、メリハリを作る方法を紹介します。
広いグレーで整え、ボルドーを要所に置く
ボルドーは、赤に深みを加えたような色です。グレーを広い背景に、ボルドーを見出しや申込ボタンなどの注目させたい部分に使うと、強い色同士を競わせずに情報の優先順位を作れます。
グレーは一色に固定せず、明るい色を余白や背景に、濃い色を本文に割り当てます。ボルドーと濃いグレーを同じ面積で並べるよりも、明るい背景を間に置いたほうが、それぞれの輪郭が分かりやすくなります。
色を選ぶ際のHEX（「#」と6桁の英数字で色を表すコード）は、完成画面の組み合わせとして決めましょう。単独で好みの色でも、隣の色や使う面積によって見え方は変わります。
告知バナーで比べる2つの配色例
例1：明るいグレーを背景にして上品にまとめる
- 全体の背景：明るいグレー #F2F0F1
- 情報を載せるカード：白 #FFFFFF
- 見出し・申込ボタンの背景：ボルドー #7A243B
- 本文：チャコールグレー #353238
- 補足文：中間のグレー #68636A
- ボタン内の文字：白 #FFFFFF
淡い背景の上に白いカードを置き、ボルドーは見出しと一つの重要なボタンに絞ります。通常の説明文は濃いグレーで統一すると、視線を集めたい部分だけに赤みが残ります。補足文も薄くしすぎず、本文との強弱を文字サイズや配置でも調整します。
例2：濃いグレーの見出し帯で引き締める
- 上部の見出し帯：チャコールグレー #353238
- 見出し帯の文字：白 #FFFFFF
- 下部の案内エリア：明るいグレー #F2F0F1
- 下部の見出しとボタン：ボルドー #7A243B
- 下部の本文：チャコールグレー #353238
上部で内容を示し、下部で詳細や申込みへ案内する構成です。ボルドーは暗い見出し帯に重ねず、明るい案内エリアに置きます。暗いグレーとボルドーを直接隣接させると色の境界が弱いため、明るい面を挟むのがポイントです。
メリハリを保つための確認ポイント
色のコントラスト比は、隣り合う色の明るさの差を示す数値です。例1のボルドー #7A243B と白 #FFFFFF は約9.80:1、明るいグレー #F2F0F1 とチャコールグレー #353238 は約11.12:1、同じ背景と補足用グレー #68636A は約5.17:1です。いずれも、通常サイズの文字に対するWCAG（Webコンテンツのアクセシビリティ指針）のレベルAAの目安4.5:1を上回ります。
一方、ボルドー #7A243B とチャコールグレー #353238 は約1.29:1しかありません。この2色だけで重要な境界や文字を表現しないようにします。文字の太さや大きさ、実際の背景色、ボタンの押下時・選択時の見え方も確認してください。
HueRollでは、選んだ色と白・黒のコントラスト比を確認できます。ボルドーとグレーのような任意の2色同士の比率はHueRollでは直接比較できないため、別のコントラスト計算手段で確かめましょう。色の落ち着きだけでなく、文字を読む場所と操作する場所が明確に見えることを優先します。