白背景に濃いグレー文字を使う方法｜WEB本文の色を整えるポイント
WEBページの背景を白に決めた後、本文の文字をどの程度濃いグレーにするか迷うことがあります。黒に近いグレーなら文字をはっきり見せられますが、薄くすれば必ず読みやすくなるわけではありません。大切なのは、実際の文字の太さや大きさ、見出しや補助文字との関係を含めて判断することです。ここでは架空の木製ラック組み立てガイドを例に、白背景は変えず、本文のグレーだけを調整する手順を紹介します。
白い背景を固定し、本文・見出し・補助文字の役割を決める
まず背景を白に固定すると、比較するのは文字の濃さだけになります。例えば「板の向きをそろえる」「ネジを仮止めする」「水平を確かめる」の3工程を説明するページでは、長い説明文を本文として読み、工程名を見出しで探し、道具に関する短い補足を必要に応じて確認します。この3種類の情報を、すべて別の色で飾る必要はありません。
基本は本文に濃いグレーを使い、見出しは本文より大きく太くします。見出しだけを少し濃いグレーにする方法もありますが、文字色が似ていても大きさと余白で階層を作れます。補足文字は本文より少し控えめにしても、読み取る必要のある説明なら背景との明るさの差を確保します。
WEB制作ではCSS（文字の色や背景色などの見た目を指定する仕組み）のbackground-colorで背景、colorで文字色を指定できます。背景だけ、または文字色だけを決めるのではなく、この2つを組み合わせて確認するのが基本です。
白背景で2種類の濃いグレーを比較する
色はHEX（「#」に続く0～9とA～Fの6桁で指定するカラーコード）で示します。コントラスト比は、文字と背景の相対的な明るさの差を示す数値です。両案とも背景を白#FFFFFF、見出しを濃いグレー#242424に固定します。見出しと白背景のコントラスト比は約15.52:1です。
案A：説明が詰まった手順書には濃いグレーを試す
同じ組み立て手順を、濃いグレー#353535の本文で表示する案です。白#FFFFFFとのコントラスト比は約12.27:1になります。ネジの向きや仮止めの順番を数段落で説明する場面を想定し、まず文字の形を判別しやすい濃さから確認します。数値が高いから誰にとっても最適という意味ではなく、文字の太さや行の長さも合わせて見ます。
見出しは引き続き濃いグレー#242424とし、白#FFFFFFとの比は約15.52:1です。見出しと本文を近い色にそろえる分、見出しの太さ・サイズ・上側の余白を変えて、工程の切り替わりを示します。補助説明だけ別の薄い色にしなくても、行の配置で区別できます。
案B：本文だけ少し柔らかなグレーにする
同じページで本文をやや明るいグレー#4C4C4Cにした場合、白#FFFFFFとの比は約8.59:1です。見出しと背景は案Aから変えず、本文の濃さだけを比較します。短い説明文を同じ幅・文字サイズ・行間で並べ、文字が細く感じないか、見出しとの区別がつくかを確かめましょう。
道具についての補足には、さらに少し柔らかなグレー#5B5B5Bを使う案もあります。白#FFFFFFとの比は約6.79:1です。ただし「ネジは最後に本締めする」のような作業に必要な条件は、薄い色だけで弱く見せず、本文と同じ濃さで書く方法も検討してください。情報の重要度と色の濃さを機械的に結び付けないことが大切です。
一方、かなり薄いグレー#999999にすると、白#FFFFFFとのコントラスト比は約2.85:1です。通常サイズの文字に必要な4.5:1に届かないため、工程の説明や必要な注記には使いません。
文字の太さ・リンク・スマホ表示を含めて仕上げる
本文のグレーを決める際は、実際に使用する書体・文字サイズと一緒に比べます。例えば16～18px程度の本文と、本文より少し太い見出しから試すことはできますが、これは固定の正解ではありません。px（ピクセル）はWEB上で文字や余白の寸法を指定する単位です。太さが細い書体では、同じカラーコードでも見え方が異なることがあります。
「部品一覧を見る」のようなリンクを置くなら、普通の本文と区別できるよう深い青#235C78の文字と下線を組み合わせます。白#FFFFFFとのコントラスト比は約7.31:1です。クリックできる場所を色だけで伝えず、下線やキーボードで選んだときの表示でも区別しましょう。
スマートフォンでは説明が複数行に折り返すため、段落の間隔や行間を確かめます。白背景のまま、案Aと案Bを同じ実機条件で比較し、表示倍率を上げても文章が切れたり重なったりしないかを確認してください。本文の色を頻繁に変えるより、1つの本文色を基本として使い、見出しやリンクに必要な役割だけを分ける方が整理しやすくなります。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景のコントラスト比に原則4.5:1以上、大きな文字に3:1以上が求められます。ここで提案した本文・見出し・補足・リンクの文字色は、白との組み合わせで通常文字の基準を上回ります。数値は不透明な単色同士の計算結果なので、写真の上や半透明の面では別途確認が必要です。白背景に合う濃いグレーは、色の印象だけで決めず、同じ文章を実際の文字設定で読み比べて選びましょう。