赤を基調にしたWEBサイトの配色｜強い印象を整える色の使い方
赤を基調にしたWEBサイトは、イベントやブランドの個性を強く見せたいときの選択肢です。しかし、背景も見出しもボタンも赤で統一すると、何が重要なのか分かりにくくなることがあります。この記事では落ち着いた赤#BE3643を例に、色を使う面積と役割を整理し、強い印象を保ちながら読みやすい配色にする方法を紹介します。HEXとは、WEB上の色を16進数で指定するコードです。
赤は見せ場にまとめ、読む場所には明るい背景を使う
最初に決めるのは、赤をどこに置くかです。ページ上部の案内や大会名など、印象を伝えたい場所に赤をまとまって使い、参加条件や当日の案内などの長い文章は明るい背景へ切り替えます。赤を全面に広げるより、濃い面と明るい面の切り替えで情報の順序を作ります。
たとえば、赤#BE3643の背景に白#FFFFFFの文字を載せると、コントラスト比は約5.53:1です。コントラスト比は文字と背景など、隣接する色の相対的な明るさの差を表す数値です。色相（赤・青などの色み）に加え、明度（色の明るさ）の差を確認すると、色の強さだけに頼らず文字を区別できます。
赤はエラーメッセージなどにも使われるため、ブランドの赤が「警告」を意味しているように見えないかも確認しましょう。予約や申込みの重要なボタンは、周囲の赤と見分けられる別の明るさの色を使い、ラベルでも操作の内容を伝えます。
市民マラソン大会の申込みページに使う配色例
大会の紹介、開催日、コース、参加費、エントリー（参加申込み）を載せるページを想定します。赤を大会の象徴として残しながら、申込みに必要な情報を明るい面に整理します。
- ページ上部：落ち着いた赤#BE3643を背景に、白#FFFFFFで大会名と短い説明を表示します。文字と背景のコントラスト比は約5.53:1です。
- 上部の「エントリーする」ボタン：淡いゴールド#F7D99Aをボタンの背景に、濃いチャコール#293039を文字に使います。文字とボタンは約9.74:1、ボタンと周囲の赤#BE3643は約4.04:1です。
- 開催日・参加費の説明：温かみのあるオフホワイト#FAF8F4を広く使い、チャコール#293039で文章や数字を書きます。文字と背景は約12.56:1です。
- 種目や参加費のカード：白#FFFFFFのカードにチャコール#293039で内容を表示します。文字は約13.32:1ですが、カードの白#FFFFFFと周囲のオフホワイト#FAF8F4の差は約1.06:1です。間隔と枠線でもカードを区切ります。
- カード・入力欄の境界：グレイッシュパープル#77757Cの線なら白#FFFFFFに対して約4.55:1、オフホワイト#FAF8F4に対して約4.29:1です。
- 集合場所・持ち物の案内：淡いローズ#FBE9ECの背景にチャコール#293039の文字を合わせます。文字との比率は約11.40:1、境界用のグレイッシュパープル#77757Cとは約3.89:1です。
- 詳細エリアの申込みボタン：深いブルー#205167を背景に、白#FFFFFFで「エントリーする」と表示します。文字とボタンは約8.63:1、周囲のオフホワイト#FAF8F4とボタン面は約8.13:1です。
ページ上部では赤と淡いゴールドで大会らしい見せ場を作り、詳細エリアでは明るい背景と濃いブルーのボタンに切り替えます。ボタンの色が変わっても、同じ「エントリーする」というラベルで操作の役割をそろえます。
赤の主張を調整し、警告や入力エラーと区別する
画面が強すぎると感じた場合は、新しい色を増やす前に、赤い背景が続く範囲を減らします。淡いローズ#FBE9ECとオフホワイト#FAF8F4の差は約1.10:1なので、面の色だけでは情報を区切りにくく、見出しや余白、必要な線を追加します。薄い赤#EAAAB0は白#FFFFFFの上で約1.93:1しかないため、重要な小さな文字や状態アイコンに使うのは避けます。
WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAでは、通常サイズの文字と背景に4.5:1以上、大きな文字には3:1以上のコントラスト比が求められます。入力欄の輪郭など、操作や状態を識別するために必要な非テキスト情報は、隣接色との3:1以上が基準です。入力エラーは単に赤くするだけでなく、「メールアドレスを確認してください」などの文言を添えましょう。
スマートフォンでも、赤い背景に置いた文字の大きさ、申込みボタンの位置、写真上の文字を確認します。HueRollで確認できるコントラストは、選択色と白・黒との比較に限られます。任意の2色間の比較やAA・AAAの自動判定はできないため、この記事の色同士の比率は別途計算しました。