WEBサイトで暖色を使う方法｜赤・オレンジ・黄色をまとめる配色

赤・オレンジ・黄色などの暖色をWEBサイトで使うと、色相（赤・青・緑などの色みの違い）を近く保ちながら、華やかさや変化を付けられます。ただし、すべてを同じ鮮やかさで使うと、見出し・背景・ボタンの役割が競い合いやすくなります。この記事では、赤 ■#DC2626、オレンジ ■#F97316、黄色 ■#FACC15 を例に、暖色だけでも情報の優先順位が分かる配色を考えます。

暖色は、3色を同じ強さで並べず役割を分ける

まず、赤 ■#DC2626 を主要なブランド色、オレンジ ■#F97316 を補助的な強調、黄色 ■#FACC15 を小さなアクセントというように用途を決めます。近い色相だからといって、3色を同じ面積で使う必要はありません。

大面積の背景には、淡いクリーム ■#FFF7ED、淡い赤みの背景 ■#FEF2F2、淡い黄色 ■#FEFCE8 のような低彩度・高明度の色を使い、本文はチャコール ■#1F2937 に固定すると整理しやすくなります。本文色のコントラスト比は、それぞれ約13.83:1、13.42:1、14.19:1です。

サービスページでは、赤を主要操作、オレンジを補助、黄色を強調に使う

たとえばサービス紹介ページなら、主要CTA（Call to Action、問い合わせや申込みなど次の行動へ進むためのボタン）は濃い赤 ■#B91C1C、文字は白 ■#FFFFFF にします。この組み合わせは約6.47:1です。補助的なボタンには濃いオレンジ ■#C2410C と白文字 ■#FFFFFF を使うと約5.18:1です。

黄色 ■#FACC15 は、バッジや料金の強調など小さな面積に使い、文字をチャコール ■#1F2937 にすると約9.59:1です。一方、黄色 ■#FACC15 に白文字 ■#FFFFFF を載せると約1.53:1しかありません。明るい暖色だから白文字が合うとは限らないため、実際の背景色との組み合わせで確認します。

暖色だけでも、明度差と面積でメリハリを付ける

暖色系で統一しても、色相の違いだけでは重要度が伝わりにくい場合があります。背景は淡く、本文は濃く、主要ボタンは暗い赤、補助操作は暗いオレンジ、黄色は小さな強調というように、明度と面積で階層を作ります。特に選択中・未選択、リンク・本文、通常・エラーなどの違いは、色だけに頼らず、下線、太字、枠線、アイコン、ラベルも併用します。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）では、通常サイズの文字に4.5:1以上のコントラストが求められます。暖色同士はまとまりを作りやすい一方、明るいオレンジや黄色では白文字との明暗差が不足しやすいため、隣接する色を実際に確認することが大切です。

HueRollでは補色・類似色・各種配色候補を確認でき、選択色と白・黒とのコントラストも表示できます。ただし、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していません。暖色パレットを作った後は、本文・ボタン・バッジなど実際に組み合わせる2色を別途確認してください。