Grayスケールはどう作る？WEBサイトの文字・背景・線で使い分ける方法

WEBサイトの背景、本文、補足文字、区切り線に、その都度違うグレーを選んでいませんか。近い色が増えると、文字の読みやすさや部品の境界を管理しにくくなります。Grayスケール（グレースケール）とは、明るい灰色から暗い灰色までを段階にして、用途ごとに割り当てるための色の組です。ここでは市民講座の開催日程を探すページを例に、作り方を具体的に説明します。

先に背景・文字・線の役割を決め、必要な濃淡を選ぶ

最初に画面の要素を「大きな背景」「情報を載せる面」「本文と見出し」「補足文字」「境界線」に分けます。明るいグレーは広い背景や表の交互の行に使い、文字は十分に暗いグレーへ寄せます。線は、見た目を整える装飾用と、入力欄などを見つけるために必要なものを分けて考えます。

次に白い面を基準として、背景は白に近い2段階、文字は濃い2〜3段階、線は用途に合わせて2段階ほど試します。すべてを等間隔に並べる必要はありません。Gray-50やGray-800という番号は、この例で濃淡を整理するための名前であり、明るさの測定値や共通の規格ではありません。

今回は赤・緑・青の成分が等しい無彩色のグレーを選びます。実際のWEBサイトではわずかに青みなどを含むグレーを採用することもありますが、その場合も見た目の印象だけでなく隣接色とのコントラストを検証します。

市民講座の開催日一覧に7段階を割り当てる例

講座名・開催日・会場を並べ、開催月で絞り込めるページを想定します。HEXコードはWEBの色を16進数で指定する表記です。白 ■#FFFFFF の一覧表を基準に、次の7段階を組み合わせます。

ページの外側にGray-50 ■#FAFAFA、表の通常行に白 ■#FFFFFF、交互の行にGray-100 ■#F2F2F2 を使います。白とGray-50のコントラスト比は約1.04:1、白とGray-100は約1.12:1なので、このわずかな差だけを重要な区切りの手がかりにしません。見出しや余白、必要な枠線を併用します。

講座名と表の見出しにはGray-900 ■#252525、開催日や内容の本文にはGray-800 ■#3F3F3F を使います。白 ■#FFFFFF に対する比はそれぞれ約15.33:1、約10.53:1です。会場の補足文字をGray-600 ■#666666 にすると、白に対して約5.74:1、交互行のGray-100 ■#F2F2F2 に対しても約5.13:1です。

Gray-200 ■#DADADA は白 ■#FFFFFF に対して約1.40:1なので、見出しと余白で既に分かる場所の装飾的な線にとどめます。一方、開催月の検索欄のように輪郭が識別に必要な部品にはGray-400 ■#838383 を使います。この線は白 ■#FFFFFF に対して約3.79:1、交互行のGray-100 ■#F2F2F2 に対して約3.39:1です。

薄い線と薄い文字を混同せず、使う組み合わせを確認する

線として使える濃さでも、小さな文字に使えるとは限りません。Gray-400 ■#838383 と白 ■#FFFFFF の比は約3.79:1で、通常文字の基準には届きません。会場名や注記の文字には、今回のGray-600 ■#666666 など、背景に対して十分な差のある色を選びます。表の縞模様だけで行のまとまりを判断させず、行見出しや配置でも伝えてください。

WCAG（WEBコンテンツのアクセシビリティに関する指針）2.2のレベルAAでは、通常サイズの文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が基準です。操作部品を識別するために必要な輪郭などの非テキスト情報も、隣接色と3:1以上が求められます。一方、意味を持たない装飾的な線まで、すべて同じ基準で扱うわけではありません。

最初に7段階を用意しても、使わない段階は削って構いません。パソコンとスマートフォンで表や検索欄を確認し、背景を変更したら文字と線のコントラストも測り直します。掲載比率は不透明な単色同士の計算値で、ページ全体の基準適合を保証するものではありません。

HueRollではHEXコードの入力やティント・シェードなどの濃淡候補、選択した色と白・黒のコントラストを確認できます。ただし、任意の2色の直接比較やAA・AAAの自動判定には対応していません。作ったGrayスケールは実際に接する色の組み合わせでも確認しましょう。