パステルカラーとくすみカラーはどう違う？WEBでの使いやすさを比較

パステルカラーとくすみカラーは、どちらも柔らかい雰囲気を作る色として紹介されますが、同じものではありません。パステルは明るく淡い色、くすみカラーは灰色味を含む鮮やかさを抑えた色として使われることが多く、写真や文字との組み合わせが変わります。ここではアロマキャンドルの定期便を紹介するWEBページを例に、同じ紫系で2つの色調を比較します。

パステルは明るさ、くすみカラーは灰色味が違いを作る

パステルカラーは白を多く混ぜたような明るい淡色を指すことが多く、くすみカラーは灰色を含んだような鮮やかさの低い色を指します。ただし、どちらにも全色共通の厳密な分類基準はありません。くすみカラーにも明るいものがあり、単純に「暗いパステル」と考えないほうがよいでしょう。

違いを数値で比べるには、HSL（色相＝色の種類、彩度＝色の鮮やかさ、明度＝色の明るさを表すカラー形式）が役立ちます。たとえば、パステルラベンダー■#E6D0F0と、くすんだモーブ■#AB96B6は、ともに色相が約280度の紫系です。前者は彩度約52％・HSL明度約88％、後者は彩度約18％・HSL明度約65％で、色の種類が近くても明るさと灰色味が異なります。

そのため、パステルを大きな背景に使うと軽い色面として見えることがあり、くすみカラーは商品写真の周囲に落ち着いた色面を作りたいときの候補になります。印象は写真の色、使う面積、周囲の余白によっても変わるため、どちらが上品・親しみやすいと一律には決められません。

同じキャンドル定期便ページを2つの色調で比較する

商品写真、説明、価格、申込みボタンの位置は変えず、冒頭の紹介エリアの色を切り替えます。両案ともページの基本背景はほぼ白■#FCFAFC、本文は濃いグレー■#302B35で、文字とのコントラスト比は約13.28:1です。コントラスト比は、隣り合う色の相対的な明るさの差を表す数値です。

• パステル案：紹介エリアの背景を淡いラベンダー■#E6D0F0にし、見出しを深い紫■#3B2545、説明文を濃いグレー■#302B35にします。背景と見出しの比は約9.53:1、本文との比は約9.62:1です。広めの淡色面に商品写真と短い紹介文を置き、明るさを残す組み合わせです。
• くすみ案：同じ紹介エリアを灰色味のあるモーブ■#AB96B6に変えます。見出しは深い紫■#3B2545、説明文は濃いグレー■#302B35をそのまま使い、それぞれ約5.06:1、約5.10:1を確保します。色の主張を抑え、ラベルや容器の写真を中心に見せたいときの候補です。

「定期便を見る」ボタンは両案とも深い紫■#603972に白文字■#FFFFFFを組み合わせ、文字との比を約9.03:1にします。ボタンと紹介エリアの背景との差は、パステル■#E6D0F0上で約6.30:1、くすみカラー■#AB96B6上で約3.34:1です。同じボタンでも周囲の色が変わるため、押せる部分として見つけやすいかを画面全体で確かめます。

淡い色を文字にせず、境界と写真との関係を確認する

パステルラベンダー■#E6D0F0やくすんだモーブ■#AB96B6の上に白文字■#FFFFFFを置いた場合、コントラスト比はそれぞれ約1.43:1、約2.70:1です。WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAで通常サイズの文字に求められる4.5:1に届きません。規定の大きな文字には3:1の基準がありますが、この例の白文字はその基準にも届かないため、濃い文字を選びます。

また、ほぼ白のページ背景■#FCFAFCと紹介エリアの差は、パステル■#E6D0F0で約1.38:1、くすみカラー■#AB96B6で約2.60:1です。紹介エリア内のカードが操作できる要素なら、色面の違いだけに頼らず、枠線や明確なラベルを加えましょう。たとえば枠線を濃い紫■#563762にすると、パステル■#E6D0F0との比は約6.91:1、くすみカラー■#AB96B6との比は約3.67:1です。

HueRollではHEX（#に続く6桁の16進数で色を示すコード）を入力して関連色や濃淡を探し、選択色と白・黒のコントラストを確認できます。ただし任意の2色の比較やAA・AAAの自動判定はできません。この記事の白・黒以外の組み合わせは別途計算しています。写真を重ねる場合はその部分の明るさも変わるため、実際の表示とスマートフォンの画面で最終確認しましょう。