WEBサイトの色にメリハリをつける方法｜明度差を活かした配色

WEBサイトの配色にメリハリを付けたいときは、色相を増やす前に「明るい色と暗い色の差」を見直す方法があります。HSL（Hue・Saturation・Lightness、色相・彩度・明度で色を表す方法）の明度を変えると、同じ色相でも背景・見出し・ボタンなどに役割を持たせやすくなります。ただし、HSLの明度差とWCAGのコントラスト比は同じものではありません。明度で階層を作り、文字の読みやすさは実際の色同士で別に確認することが大切です。

同じ色相でも、明度を変えると役割を分けやすい

たとえば色相220度・彩度70%を固定したまま明度だけを変えると、明度20%の濃い青 ■#0F2757、35%の青 ■#1B4498、50%の青 ■#2662D9、70%の明るい青 ■#7DA1E8、90%の淡い青 ■#D4E0F7 のように変化します。HSLでは明度0%が黒、100%が白、50%が基準となる明るさです。

この差を使い、濃い色を見出し、標準的な青を主要操作、淡い青を背景にすると、色相を増やさなくても階層を作れます。色数を増やすより、まず同じ色の明るさを分ける方が、統一感を保ちながらメリハリを付けやすい場合があります。

背景・本文・CTAに明度差を割り当てる

サービス紹介ページなら、背景をごく淡い青 ■#E9EFFB、本文をチャコール ■#1F2937、主要見出しを濃い青 ■#0F2757 にします。本文と背景のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約12.72:1、見出しと背景は約12.57:1です。

CTA（Call to Action、問い合わせや申込みなど次の行動へ進むための主要ボタン）は、中間の明度を持つ青 ■#2662D9 に白文字 ■#FFFFFF を合わせると約5.48:1です。WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）で通常サイズの文字に求められる4.5:1以上を満たします。背景は明るく、本文と見出しは暗く、主要操作はその中間というように明度の役割を分けると、同系色でも視線の順序を作れます。

明度差があっても、必要なコントラストは実測する

HSLの明度は色の調整に便利ですが、WCAGのコントラスト比は相対輝度から計算されます。そのため、HSLの明度差だけを見て「読みやすい」「基準を満たす」と判断しないようにします。たとえば淡い青 ■#D4E0F7 と背景 ■#E9EFFB の比は約1.15:1しかありません。重要なカード境界や操作状態を、このわずかな差だけで伝えるのは避けます。

境界が操作や識別に必要なら、より濃い青 ■#5281E0 を使うと、背景 ■#E9EFFB に対して約3.27:1になります。WCAGの非テキストコントラストでは、必要なUI部品や状態を識別する視覚情報に3:1以上が求められます。色だけで状態を伝えず、枠線、太さ、アイコン、ラベルなども併用してください。

HueRollでは選択色のHSLを確認でき、ティント・シェードや各種配色候補も表示できます。選択色と白・黒とのコントラスト比は確認できますが、任意の2色同士の比較やWCAGのAA・AAA自動判定には対応していません。明度差で配色を作った後は、実際に隣接する文字・背景・境界色の組み合わせを別途確認してください。