暖色系と寒色系のWEBサイトはどう見える？配色の違いを比較
WEBサイトを赤やオレンジ中心にすると温かく、青中心にすると涼しげに見えることがあります。ただし、色の印象は背景の明るさや写真、使う面積でも変わります。暖色系と寒色系のどちらがよいか迷ったら、訪問者に最初に見せたい内容から考えるのが近道です。この記事では街歩きツアーの予約サイトを同じレイアウトで2通りに配色し、印象の違いと読みやすさを比較します。
暖色系は温かみ、寒色系はすっきりした見え方の候補になる
暖色系は赤・オレンジ・黄色などを中心とする色、寒色系は青や青緑などを中心とする色です。ここでいう温かい・冷たいは色の見た目を説明する言葉で、画面の温度を示すものではありません。暖色はにぎわいや親しみやすさを表したい場面、寒色は情報を整然と見せたい場面の候補になりますが、その印象が誰にでも同じになるとは限りません。
たとえば歴史ある街並みを案内するツアーなら、赤茶の見出しはレンガや木材の写真とつながりを作れます。一方、青い見出しは時刻表や集合場所などの案内を整理して見せる候補です。写真自体に赤や青が多いと、文字やボタンが背景になじみすぎることもあります。色名だけで決めず、実際に使う写真と並べて確かめましょう。
同じ街歩きツアーの予約ページを暖色・寒色で比較
集合時間、料金、ルート紹介、写真、「ツアーを予約する」ボタンの位置は共通とし、色だけを変更します。色はHEX（先頭の#に数字とA〜Fの英字を6桁続けたコード）で示します。コントラスト比は、文字と背景など隣り合う色の明るさの差を表す数値です。
- 暖色系の案：ページ背景はクリーム系の#FFF9F1、本文は濃いグレー#292524で、コントラスト比は約14.50:1。見出しは赤茶#9A3412にすると背景との比は約6.98:1です。行程案内カードには淡いピーチ#FCE7D6を使い、濃いグレー#292524の文字と組み合わせて約12.67:1を確保します。予約ボタンは赤茶#9A3412、文字は白#FFFFFFで約7.31:1。街並みの素材感や人物写真と合わせたい場合の候補です。
- 寒色系の案：ページ背景は淡い青みの白#F3F8FF、本文は濃い青灰#1E293Bで約13.71:1。見出しには深い青#1E40AFを使い、背景との比は約8.17:1です。カードは淡い水色#DBEAFE、文字は濃い青灰#1E293Bで約11.99:1。予約ボタンは青#1D4ED8に白文字#FFFFFFを載せて約6.70:1です。地図や集合時刻などの実用情報を主役にしたい場合の候補です。
どちらも文字と背景の差を確保した例ですが、暖色だから予約されやすい、寒色だから信頼されるとは断定できません。両案を比べるときは色以外の文章、写真、ボタンの位置をそろえ、優先したい内容が自然に伝わるかを確認します。
カードの境界と申込ボタンを、実際の背景で確認する
両案ともカードとページ背景は近い明るさです。暖色案のカード#FCE7D6と背景#FFF9F1、寒色案のカード#DBEAFEと背景#F3F8FFは、どちらも約1.14:1の差しかありません。カード自体が押せる操作部品なら、この塗り分けだけに頼らず輪郭を付けます。例えば暖色案は赤茶#9A3412の枠線とカード#FCE7D6で約6.10:1、寒色案は深い青#1E40AFの枠線とカード#DBEAFEで約7.15:1になります。
WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字に4.5:1以上、規定の大きな文字に3:1以上のコントラスト比が必要です。操作に必要な境界などの非テキスト要素にも、隣接色と3:1以上が求められる場合があります。ボタンには「ツアーを予約する」と明記し、リンクには下線を加えるなど、色だけで意味を伝えないようにしましょう。
HueRollではHEXコードから関連色や配色候補を確認し、選択色と白・黒とのコントラストを比べられます。ただし、任意の2色の比較やAA・AAAの自動判定はできません。この記事の白・黒以外の組み合わせは別途計算した値です。最終的にはスマートフォンでの表示や写真との相性も含めて選びましょう。