赤と黒に合う差し色は？Webデザインで使う3色配色の選び方
赤と黒の組み合わせは、告知やブランド表現を力強く見せたいときに使えます。ただし、両方を大きな面積に使うと重く感じたり、赤い文字が黒に埋もれたりする場合があります。3色目には、明るさを補うアイボリー、注目点を作る黄系、印象を切り替える淡い水色が候補です。背景・文字・ボタンのどこに置くかまで決めて、配色を比較します。
赤と黒に足す1色は、まず役割から選ぶ
赤を見出しやブランドの目印、黒を文字や背景の軸と考えると、3色目に必要な役割が見えてきます。赤と黒に別の鮮やかな色を同じ面積で足すより、画面に不足している明るさや情報の強弱を補うことが大切です。
- アイボリー■#F7F2E8：広い背景を明るくし、黒い本文と赤い強調を整理したいとき。
- ゴールドイエロー■#F0C65A：暗い画面の中で購入・申込みなどのボタンを別の役割として目立たせたいとき。
- 淡い水色■#A9E2EC：赤と黒の強さに涼しげな変化を加え、操作箇所を分けたいとき。
以下のHEX（16進数を使ってWebの色を指定するコード）は具体例です。3色を均等に使うのではなく、背景を広く、赤と差し色を必要な箇所に絞って配置します。
Webページで試せる赤・黒・差し色の3色配色
1. アイボリーを加える：説明を読ませる告知ページ
ページ背景をアイボリー■#F7F2E8、本文とメニューの文字を黒に近い■#171717、見出しの一部と申込みボタンを深めの赤■#B92432にします。赤いボタンの文字もアイボリー■#F7F2E8にすれば、3色だけで背景・文字・操作を分けられます。
文字と背景の明るさの差を示すコントラスト比は、黒い本文とアイボリー背景で約16.07:1、赤いボタンとアイボリー文字で約5.60:1です。明るい余白を確保しつつ、赤に注目を集める構成です。
2. 黄系を加える：セールやキャンペーンの申込み導線
黒■#171717を主な背景に、明るい赤■#E64C51を短い見出しに、ゴールドイエロー■#F0C65Aを購入ボタンに使います。ボタン文字は黒■#171717にし、短い説明文はゴールドイエロー■#F0C65Aで黒背景に載せます。黒背景と赤文字のコントラスト比は約4.71:1、黄色いボタンと黒文字、黄色い説明文と黒背景はいずれも約11.04:1です。
赤と黄の両方を大きく敷くと注目点が分散しやすいため、赤は見出し、黄は説明文と購入導線に役割を分けます。赤い文字を黄色いボタンに載せる組み合わせは約2.34:1なので避けます。
3. 水色を加える：イベント・デジタル系の案内ページ
黒■#171717を背景に、赤■#E64C51を日付や短い見出し、淡い水色■#A9E2ECを申込みボタンと説明文に使います。水色のボタン文字を黒■#171717にする場合も、黒背景に水色の説明文を置く場合も、コントラスト比は約12.61:1です。
赤と水色を同じ広さの帯にするより、赤を告知の目印、水色を説明文と操作の目印として使うと、役割を見分けやすくなります。
赤の濃さと文字の組み合わせを最後に確認する
同じ赤でも背景によって適した濃さは変わります。深い赤■#B92432と黒■#171717は約2.87:1で、通常サイズの文字には不足します。一方、明るい赤■#E64C51なら同じ黒背景と約4.71:1です。ただし、その明るい赤をアイボリー■#F7F2E8の上で文字に使うと約3.41:1となるため、明るい背景には深い赤を選ぶなど調整が必要です。
WCAG 2.2のAA水準では、通常サイズの文字は原則4.5:1以上、大きな文字は3:1以上が基準です。操作部品や状態の識別に必要な非テキストの表示には、隣接色との3:1以上が求められます。色だけで申込みや選択状態を伝えず、文字や形も併用しましょう。
HueRollではHEX入力による色の調整や、選択色と白・黒とのコントラスト確認ができます。ただし任意の2色同士のコントラストは直接比較できないため、実際の背景との組み合わせは別途確認してください。差し色の候補を決めたら、画面全体で赤・黒・3色目の面積と文字の見え方を確認すると、目的に沿って配色を整えられます。