WEBデザインでグレーを使い分ける方法｜背景・文字・境界線の配色

WEBデザインでグレーを使うときは、1つのグレーを背景・文字・境界線へ使い回すのではなく、役割ごとに明るさを分けると情報を整理しやすくなります。この記事では、色相を持たないニュートラルなグレーだけを使い、背景は明るく、文字は濃く、境界線は用途に応じて中間の濃さにする考え方を説明します。重要なのは「グレーなら何でもよい」ではなく、隣り合う色とのコントラストを役割ごとに確認することです。

背景・本文・補助文字でグレーの濃さを分ける

まず、ページ背景を明るいグレー ■#F7F7F7、主要な本文を濃いグレー ■#333333、補助説明を中間のグレー ■#666666 に分けます。本文と背景のコントラスト比（前景と背景の相対的な明るさの差を示す数値）は約11.79:1、補助文字と背景は約5.36:1です。

WCAG（Web Content Accessibility Guidelines、Webアクセシビリティのガイドライン）では、通常サイズの文字に4.5:1以上のコントラストが求められます。補助情報を少し薄いグレーにしたい場合も、見た目だけで明るくせず、実際の背景との比を確認します。文字の重要度を下げるためにコントラストまで不足させる必要はありません。

カードと入力欄では、装飾の境界線と必要な境界線を分ける

カードの背景を白 ■#FFFFFF、ページ背景を ■#F7F7F7 にすると、その差は約1.07:1しかありません。カードが余白や見出しだけで十分に区切れるなら、この小さな色差を装飾として使うことはできます。しかし、入力欄のように境界そのものが部品の存在を識別するために必要な場合は、薄いグレーだけに頼らないようにします。

たとえば入力欄を白 ■#FFFFFF にし、境界線をグレー ■#8A8A8A にすると、白との比は約3.45:1、ページ背景 ■#F7F7F7 との比も約3.22:1です。WCAGの非テキストコントラストでは、必要なUI部品や状態を識別する視覚情報に隣接色との3:1以上が求められます。

薄い境界線は装飾に限定し、操作や文字には十分な差を残す

薄いグレー ■#D6D6D6 と白 ■#FFFFFF の比は約1.45:1です。区切りがなくても内容を理解できる装飾的な罫線には使えますが、入力欄や選択状態を識別する唯一の手掛かりには向きません。必要な境界には、より濃いグレーや枠線の太さ、アイコン、ラベルなどを併用します。

主要CTA（Call to Action、問い合わせや申込みなど次の行動へ進むためのボタン）を濃いグレー ■#333333、文字を白 ■#FFFFFF にすると約12.63:1です。グレー中心のUIでも、背景・本文・補助文字・装飾線・必要な境界・主要操作の役割を分ければ、色数を増やさずに階層を作れます。

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