赤に合う色は？強すぎない配色の作り方

赤は視線を集めやすい一方、広い面積に使ったり、周囲にも鮮やかな色を重ねたりすると、画面全体が強く見えることがあります。赤と呼ばれる色には幅があるため、この記事では一例として ■#C83B3B を基準にします。赤の存在感を残しながら、Webサイトの背景、文字、見出し、ボタンを落ち着いて組み合わせる方法を紹介します。

赤には明るいニュートラルと低彩度色を合わせる

■#C83B3B のような赤を強く見せすぎないためには、赤そのものを薄くするだけでなく、周囲の色と使う面積を調整するのが効果的です。背景はアイボリー、淡いブルーグレー、ベージュなど明度（色の明るさ）が高い色を広く取り、赤は見出し、主要ボタン、短いラベルなど役割を絞って使います。

補助色も高彩度の色を増やすより、彩度（色の鮮やかさ）を抑えた色を選ぶと、赤との競合を減らしやすくなります。赤を主役として残しつつ、本文や情報整理には濃いグレー、ネイビー、ブラウンなどを使うと、重要な場所だけに赤を集中できます。

強く見せすぎない3つの配色例

1. アイボリーとチャコールで赤を小さく効かせる

背景を暖かいアイボリー ■#FFF8F3、本文をチャコール ■#2B2727、見出しや主要ボタンを赤 ■#C83B3B にします。本文と背景のコントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は約14.04:1、赤と背景は約4.82:1です。明るい面を広く保てるため、赤をページ全体へ広げなくても十分に役割を持たせやすい構成です。

2. 淡いブルーグレーで赤との距離を作る

背景を淡いブルーグレー ■#E8EEF1、本文をネイビー ■#2B3A46、主要ボタンを赤 ■#C83B3B にします。本文と背景は約9.98:1です。ボタン文字を白 ■#FFFFFF にすると、白と赤のコントラスト比は約5.07:1です。また、赤いボタンと周囲のブルーグレーは約4.33:1あり、色相（赤・黄・緑・青など色みの違い）が離れていても、背景側の彩度を抑えることで赤だけを目立たせやすくなります。

3. ベージュとブラウンで温かさを残す

背景をベージュ ■#EFE3D4、本文をダークブラウン ■#3C342D、主要ボタンを赤 ■#C83B3B にすると、寒色を使わずに赤の強さを整理できます。本文と背景は約9.65:1、赤いボタンと背景は約4.01:1です。白 ■#FFFFFF をボタン文字に使えば赤との比率は約5.07:1です。赤を通常サイズの本文文字としてベージュ上に置く場合は約4.01:1で4.5:1に届かないため、その用途には使わないようにします。

赤を使う面積と文字のコントラストを確認する

赤を強く見せすぎないためには、色数だけでなく面積も重要です。背景や大きなセクションまで赤で埋めるより、主要ボタン、重要な見出し、短い強調部分などに限定すると、どこを見るべきかを示しながら画面全体の圧迫感を抑えやすくなります。

■#C83B3B を背景に使う場合、白 ■#FFFFFF とのコントラスト比は約5.07:1で、WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2が通常サイズの文字に求める4.5:1以上を満たします。一方、黒 ■#000000 と赤は約4.14:1なので、通常サイズの文字には十分ではありません。

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