ペールカラーに合う色は？やさしく見せる配色例

ペールカラーは幅のある言葉ですが、この記事では白に近い明るさで彩度を抑えた淡い色として扱います。やさしく見せたいときは、淡色を増やすだけでなく、本文や操作に使う濃色を少数に絞ると全体を整理しやすくなります。具体例には、ペールセージ■#DDE8E2、ペールラベンダー■#E9E1EC、オフホワイト■#FAF8F4、チャコール■#31373A、くすみブルーグレー■#53656Bを使います。

ペールカラーには、濃い文字色とくすんだアクセントを合わせる

淡い色同士は明るさが近くなりやすいため、本文まで淡色にすると情報の階層が弱くなります。そこで、本文と主要見出しにはチャコール■#31373Aを使います。オフホワイト■#FAF8F4とのコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.39:1、ペールセージ■#DDE8E2上でも約9.62:1、ペールラベンダー■#E9E1EC上でも約9.46:1です。

アクセントには、鮮やかすぎないブルーグレー■#53656Bを使います。オフホワイト上の文字では約5.75:1、白文字■#FFFFFFをブルーグレー背景に置く場合は約6.10:1です。淡色のやさしさを残しつつ、リンクや主要操作だけを少し濃くすると視線を誘導しやすくなります。

オンライン語学スクールでは、淡色をコース面と補助面に分ける

オンライン語学スクールのコース一覧ページを例にすると、ページ背景を■#FAF8F4、コース名と説明文を■#31373Aにします。「日常会話」「ビジネス英語」などのコースカードはペールセージ■#DDE8E2、受講者の声や学習サポートの補助面はペールラベンダー■#E9E1ECにします。

「コース詳細を見る」のリンクや「体験レッスンを予約」ボタンにはブルーグレー■#53656Bを使います。ペールセージ上では約4.86:1、ペールラベンダー上では約4.78:1なので、通常サイズの文字にも使えます。ボタン背景にする場合は白文字■#FFFFFFとの比率が約6.10:1です。

コースの種類や選択状態を背景色だけで示すのは避けます。たとえば淡い緑と淡い紫でコースを分ける場合も、「日常会話」「ビジネス」などの文字ラベルや見出しを必ず併記します。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）では、色だけを情報伝達の唯一の視覚的手段にしないことが求められています。

WCAG 2.2では、通常サイズの文字に4.5:1以上のコントラスト比が必要です。また、操作や情報理解に必要な非テキスト情報には、隣接色との3:1以上が基準になります。

やさしく見せるなら、淡色同士の境界を情報の手掛かりにしない

ペールセージ■#DDE8E2とオフホワイト■#FAF8F4の比率は約1.18:1、ペールラベンダー■#E9E1ECとオフホワイトは約1.20:1、2つのペールカラー同士は約1.02:1です。そのため、クリックできるカードや入力欄などで境界そのものが操作に必要な場合は、淡色の差だけに頼らず、ブルーグレー■#53656Bの枠線や明確なラベルを加えます。

白文字■#FFFFFFをペールセージ上へ置く場合も約1.26:1しかないため、淡いボタン背景に白文字を重ねるのは避けます。ペールカラーは面として広く使い、文字と操作はチャコールやブルーグレーで支えると、やさしさと情報の明確さを両立しやすくなります。

HueRollでは■#DDE8E2などを入力し、補色・類似色や配色候補、選択色と白・黒とのコントラストを確認できます。任意の2色同士の比較やWCAGのAA・AAA適合の自動判定には対応していないため、この記事で示した2色同士の比率は別途計算した値です。