高彩度と低彩度はどう見える？WEBデザインの印象を比較
WEBサイトで色を選ぶとき、色の種類だけでなく「どれくらい鮮やかにするか」でも画面の雰囲気は変わります。赤みのある色でも、鮮やかなものとくすんだものでは、ボタンや商品写真との関係が異なります。ここでは高彩度と低彩度の違いを同じ色相で比べ、生活雑貨の特集ページを例に、使いどころと文字のコントラストを確認します。
高彩度は色の主張を出し、低彩度は周囲になじませやすい
彩度は、色の鮮やかさの程度を表します。高彩度は色味を強く感じやすく、低彩度は灰色に近づいた落ち着いた見え方になりやすいものです。ただし、見た人の印象は色の面積や周囲の写真、背景色によっても変わるため、どちらが優れているという関係ではありません。
違いを確かめるため、CSS（WEBページの見た目を指定する仕組み）で使うHSL形式を基準にします。HSLは色相（色の種類）・彩度・明度（色の明るさを表す値）の3つで色を表す方法です。色相15度、HSLの明度42％を共通にし、彩度85％の赤橙を#C63E10、彩度25％のくすんだ赤橙を#865E50として比べます。2色は色相とHSL明度をそろえていますが、人が感じる明るさや文字とのコントラスト比が同じになるわけではありません。
同じ生活雑貨の特集ページを2つの彩度で比較する
商品写真、説明文、購入案内の配置は変えず、アクセント色だけを切り替えると違いを捉えやすくなります。両案に共通する配色は、ページ背景を温かみのある白の#FFF9F4、本文を濃いグレーの#292524、説明カードの背景を淡いベージュの#F6ECE5とします。本文とページ背景のコントラスト比は約14.53:1、カード上でも約13.04:1です。
- 高彩度案：新商品の案内や「商品を見る」ボタンを鮮やかな赤橙の#C63E10で示します。ボタン文字は白の#FFFFFFで、文字とボタンのコントラスト比は約5.12:1。ページ背景の#FFF9F4とボタン色の差は約4.91:1です。写真が控えめな場合、短い訴求を目立たせる候補になります。
- 低彩度案：同じ位置のボタンをくすんだ赤橙の#865E50に変え、文字は同じ白の#FFFFFFにします。文字とのコントラスト比は約5.63:1、ページ背景の#FFF9F4との差は約5.39:1です。自然素材の写真や長い紹介文に合わせ、色の主張を抑えたい場合の候補になります。
両案とも必要な操作を色と「商品を見る」という文言で示せます。鮮やかなほうが常に読める、というわけではありません。実際、この例では低彩度のボタンのほうがページ背景とのコントラスト比は高くなっています。彩度とコントラスト比は別の指標です。
面積と隣接色を調整し、文字の読みやすさも確かめる
高彩度の#C63E10を広い背景や複数のバッジに繰り返すと、特集ページ全体で強調する場所が増えてしまいます。強い色は一つの主要操作や短い見出しに絞り、写真や余白を邪魔しないか確認しましょう。一方、低彩度の#865E50を使う場合も、ボタンの大きさや輪郭、配置が弱いと操作に気づきにくくなります。
色を小さな文字に使うときは、置く背景にも注意が必要です。淡いベージュのカード背景#F6ECE5の上で、高彩度色の#C63E10を通常サイズの文字にするとコントラスト比は約4.40:1で、WCAG 2.2（WEBコンテンツのアクセシビリティ指針）のレベルAAが求める4.5:1を下回ります。低彩度色の#865E50なら同じ背景で約4.84:1です。通常の本文は濃いグレーの#292524を使い、色は装飾や見出しなど役割を定めて使うと整理しやすくなります。
HueRollではHEX（#に続く6桁の16進数で表すカラーコード）を入力し、選択色の関連色や白・黒とのコントラストを確認できます。ただし、任意の2色のコントラスト比較やWCAGの自動判定には対応していません。ここに記載した背景との組み合わせの数値は別途計算したものです。彩度を決めたあとも、実際に隣り合う色と文字サイズで確認しましょう。