ワインレッドに合う色は？上品に見せる配色例

ワインレッドと呼ばれる色には幅があります。この記事では、赤に少し紫や茶色の深みを感じる ■#722F37 を一例として扱います。ワインレッドは小さな面積でも存在感を出しやすいため、背景や補助色を明るく抑えると、濃さを活かしながら上品にまとめやすくなります。Webサイトの見出し、ボタン、バナーなどで使いやすい組み合わせを見ていきます。

ワインレッドには明るいニュートラルや低彩度色を合わせる

■#722F37 のような深い赤は、明るいアイボリーや淡いグレーなど、明度（色の明るさ）が高い色と合わせると輪郭がはっきりします。ワインレッドを見出しや主要ボタンに絞り、背景の面積を明るい色で広く取ると、濃色を増やしすぎずに強弱を作れます。

また、彩度（色の鮮やかさ）が高い色を周囲に多く置くより、くすみのあるピンクやセージなど低彩度の補助色を合わせるほうが、ワインレッドの深さを主役として見せやすくなります。色の印象は面積や周囲の色でも変わるため、用途に合わせて使う量を調整します。

上品に見せやすい3つの配色例

1. アイボリーとチャコールで端正にまとめる

背景をアイボリー ■#F7F3EF、本文をチャコール ■#2E292B、見出しや主要ボタンをワインレッド ■#722F37 にします。本文と背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約12.96:1、ワインレッドと背景は約8.74:1です。明るい余白を広く取れるため、ワインレッドを少量使うだけでも色の深さを見せやすい構成です。

2. くすみピンクで赤系のつながりを作る

補助セクションやカードの背景に、くすみピンク ■#E6D3D3 を使い、見出しや短い強調部分にワインレッド ■#722F37 を合わせます。2色のコントラスト比は約6.72:1です。同じ赤系のつながりを保ちながら、背景側を明るく穏やかにすることで、濃いワインレッドだけが前に出やすくなります。本文を載せる場合は、背景との組み合わせを別途確認した濃い文字色を使います。

3. セージとネイビーで赤系に寄せすぎない

背景を淡いセージ ■#DCE2D7、本文をネイビー ■#263247、アクセントをワインレッド ■#722F37 にすると、赤系だけでまとめる配色とは違う落ち着きを作れます。本文と背景は約9.76:1、ワインレッドと背景は約7.30:1です。セージは彩度を抑えた色なので、色相（赤・黄・緑・青など色みの違い）が離れていても強く競いにくく、商品紹介やサービス案内の補助セクションにも使いやすい組み合わせです。

濃色の面積と文字色を確認して使う

ワインレッドをボタンや濃い帯の背景にする場合、白 ■#FFFFFF とワインレッド ■#722F37 のコントラスト比は約9.65:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2が通常サイズの文字に求める4.5:1以上を満たします。一方、黒 ■#000000 とワインレッド ■#722F37 は約2.18:1なので、通常の文字には向きません。

装飾に落ち着いたゴールド ■#C6A56C を加える場合は、線や小さなアイコンなど少量に留めると、ワインレッドとの競合を抑えやすくなります。■#C6A56C と ■#722F37 のコントラスト比は約4.13:1で、通常サイズの本文文字に必要な4.5:1には届かないため、本文文字と背景の組み合わせとしては推奨しません。

HueRollでは ■#722F37 を6桁のHEX（Webで色を表す16進数コード）で入力し、ティント、シェード、補色、類似色、各種配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、この記事で示した2色間のコントラスト比は別途計算した値です。