黒文字と濃いグレー文字はどう違う？WEB本文での使い分け

WEBの記事本文には黒文字と濃いグレー文字のどちらを使うべきでしょうか。黒は明るい背景との明暗差を大きくでき、濃いグレーはその差を少し抑えながら十分な文字コントラストを確保できます。ただし、濃いグレーなら必ず読みやすくなるわけではありません。地域の文化情報を紹介するインタビュー記事を例に、見出し・本文・補足文字の使い分けを比較します。

黒と濃いグレーの違いは、背景との明暗差にある

白い背景 ■#FFFFFF に黒 ■#000000 を置くと、コントラスト比は21.00:1です。コントラスト比は、文字色と背景色の相対的な明るさの差を数値で表すもので、数値が大きいほどその差が大きくなります。一方、濃いグレー ■#333333 と白 ■#FFFFFF は約12.63:1です。差は小さくなりますが、どちらも通常の文章に必要な4.5:1を十分に上回ります。

見出しを黒、本文を濃いグレーにすると、文字の役割を色でわずかに区別する設計ができます。ただし、黒を使うと必ず目が疲れる、濃いグレーなら長文を楽に読める、と一律には言えません。見出しの太さ・大きさ・余白も含め、記事全体の階層を整えます。黒と濃いグレーを反対に割り当てても、読みやすいページは作れます。

インタビュー記事の見出し・本文・補足文で比較する

地域の作家へのロングインタビューを掲載する記事ページを想定します。本文は白 ■#FFFFFF の上に置き、発言を引用する欄だけ薄いグレー ■#F4F5F6 の背景にします。HEXコードは、WEBの色を16進数の文字で指定する書き方です。背景を2種類にして、同じ文字色がどう変わるかを確認します。

記事タイトルには黒 ■#000000、質問と回答の本文には濃いグレー ■#333333 を使います。白背景 ■#FFFFFF ではそれぞれ21.00:1と約12.63:1です。見出しは文字サイズや太さでも区別し、本文だけを極端に薄い色へ変える必要はありません。

引用欄の薄い背景 ■#F4F5F6 に濃いグレー ■#333333 を載せても約11.57:1です。引用内容を別の色相で目立たせるのではなく、背景、余白、引用符などを組み合わせれば、文章を読む流れから分けられます。取材日や写真の説明は ■#585858 を使い、白 ■#FFFFFF と約7.11:1、引用欄 ■#F4F5F6 と約6.52:1です。

これに対して、文字を ■#777777 まで薄くすると、白 ■#FFFFFF に対して約4.48:1、引用欄 ■#F4F5F6 に対して約4.10:1です。どちらも通常文字に求められる4.5:1に届きません。特に写真の説明や取材日など小さめの文字を、重要度が低いからという理由だけで薄くしすぎないようにします。

文字の色は背景・サイズ・役割と一緒に決める

最初に本文をどの背景へ置くかを決め、長文に使う文字色を一つ選びます。次に見出しと補足文字の役割を分け、必要な範囲だけ濃さを調整します。読者に押してほしい関連記事のリンクなどは、本文色から少し変えるだけでなく、下線などで操作可能だと分かるようにします。

WCAG 2.2（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字は背景とのコントラスト比4.5:1以上、規定の大きな文字は3:1以上が必要です。比率がわずかに足りない場合も四捨五入で基準を満たしたことにはなりません。文字が細い場合やスマートフォンでは、数値だけでなく実際の表示も確認します。

HueRollでは選択色と白・黒とのコントラストを確認できますが、薄いグレーなど任意の2色を直接比較する機能やAA・AAAの自動判定はありません。色を決めたら、実際に組み合わせる文字・背景を別の方法でも検証しましょう。掲載した比率は不透明な単色同士の計算値で、記事全体の読みやすさを保証するものではありません。