セール表示に赤を使うときのコツ｜ECサイトで強すぎない配色

セール表示に赤を使う場合は、ページ全体を赤くするより、値引きの要点だけに絞る方が扱いやすくなります。ここではセール用の深い赤 ■#B42318 を例に、白 ■#FFFFFF や淡い赤 ■#FFF1F0、濃い本文色 ■#2B2B2B と組み合わせ、ECサイトで強くなりすぎない配色を考えます。赤は「安さ」や「緊急性」を一律に生む色ではなく、面積・明度・周囲の色との関係で見え方が変わるため、役割を限定して使うのが基本です。

セール表示は強調範囲を絞る

赤 ■#B42318 を使う場所は、「10%OFF」「SALE」「期間限定」など短い情報に絞ります。ページ背景を白 ■#FFFFFF、本文をダークグレー ■#2B2B2B にすると、赤 ■#B42318 を小面積のアクセントとして分けやすくなります。コントラスト比（前景色と背景色の相対的な明るさの差を示す数値）は、赤 ■#B42318 と白 ■#FFFFFF で約6.57:1、ダークグレー ■#2B2B2B と白 ■#FFFFFF で約14.16:1です。

セールカード全体まで赤 ■#B42318 で塗ると、商品写真・価格・購入ボタンより強く見える場合があります。カード面はペールレッド ■#FFF1F0 にし、ラベルや値引き後価格だけを赤 ■#B42318 にすると、同系色のまとまりを保ちながら強調範囲を狭くできます。赤 ■#B42318 とペールレッド ■#FFF1F0 の比は約5.98:1です。

価格・割引率・購入操作の役割を分ける

商品カードでは、通常価格をグレー ■#667085、セール価格を赤 ■#B42318、背景を白 ■#FFFFFF とする例があります。グレー ■#667085 と白 ■#FFFFFF は約4.97:1、赤 ■#B42318 と白 ■#FFFFFF は約6.57:1です。通常価格を取り消し線だけでなく「通常価格」、値引き後を「セール価格」と文字で示すと、色を見分けにくい場合でも意味を理解しやすくなります。

割引バッジを赤 ■#B42318 の背景にするなら、文字を白 ■#FFFFFF にすると約6.57:1です。一方、購入ボタンまで同じ赤 ■#B42318 にすると、割引情報と主要操作の役割が競合することがあります。購入ボタンはサイトで主要操作に使っている別の色を使う、または赤 ■#B42318 を使う場合でも面積・位置・ラベルで「購入」と「割引」を明確に分けます。色だけでSALE状態を伝えず、「20%OFF」「期間限定」などの文字も併記します。

鮮やかな赤を使う前に文字コントラストを確認する

純色の赤 ■#FF0000 は白 ■#FFFFFF に対して約4.00:1で、WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）2.2が通常サイズの文字に求める4.5:1以上を満たしません。大きな文字では3:1以上が基準ですが、価格や注記のような通常サイズの文字では、赤を少し暗くして赤 ■#B42318 のような候補にすると余裕を持たせやすくなります。

WCAG 2.2では、色を情報伝達の唯一の手段にしないことも求められます。また、操作に必要な境界や状態表示などの非テキスト情報には、隣接色との3:1以上が基準です。淡い赤 ■#FFF1F0 と白 ■#FFFFFF の比は約1.10:1なので、この差だけを入力欄やボタンの境界として使うのは避けます。

HueRollでは、候補色を3桁または6桁のHEX（Webで色を表す16進数コード）やカラーピッカーで調整し、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していないため、セール表示で実際に隣接する背景・文字・境界の組み合わせは別途確認します。