見出しと本文の文字色は変えるべき？WEB記事を読みやすくする配色
WEB記事の見出しと本文は、必ず別の文字色にする必要があるのでしょうか。見出しだけ色を変えると区切りを示しやすくなる一方、色を増やすほど読みやすくなるわけではありません。文字の大きさや太さ、見出し前後の余白でも違いを付けられます。ここでは架空の街歩き記事を例に、同じ色でそろえる案と、見出しだけ色を変える案を比較します。
見出しと本文は同じ色でもよい｜変える目的を先に決める
記事が短く、見出しの数も少ないなら、見出しと本文の文字色をそろえても構いません。見出しを本文より大きく、太くし、前後の余白を広げれば、文章の区切りを示せます。色に頼りすぎずに構造が伝わるため、配色を増やしたくないページにも向いています。
一方、いくつもの話題が続く長い記事では、大きな見出しだけを別の濃い色にする案があります。例えば本文を濃いグレー、見出しを深い青緑にすると、読み進める際に次の話題の始まりを探す目印になります。ただし、見出しごとに赤・青・緑と変えたり、文字色の差だけで見出しの階層を表したりしないようにします。
判断するときは、同じ文章を使って2案を並べてみてください。文字色が同じでも見出しを探せるなら、無理に変更する必要はありません。逆に区切りが埋もれるなら、見出し色だけでなく太さや余白も一緒に見直します。
同じ街歩き記事で比較する2つの文字色の組み合わせ
架空の「川沿いの古い橋を巡る」という街歩き記事を例にします。両案とも背景は温かみのあるオフホワイト#F8F6F1、本文色は濃い青灰色#273641で固定します。HEXとは、「#」に続く0〜9とA〜Fの6桁で色を指定するコード形式です。コントラスト比は、文字と背景の相対的な明るさの差を表します。この本文と背景の比は約11.50:1です。
案A：見出しと本文を同じ濃い色でそろえる
短い散策案内なら、「橋の由来」「歩く順番」「立ち寄り場所」の見出しも濃い青灰色#273641にします。オフホワイト#F8F6F1とのコントラスト比は本文と同じ約11.50:1です。文字色を変えなくても、見出しと本文には次のような違いを付けられます。
- 本文の文字は16px程度、記事内の大見出しは26px程度を出発点にし、見出しを太字にします。px（ピクセル）はWEBで文字や余白の大きさを指定する単位です。
- 小見出しは20px程度にして、見出しの階層が大きさでも分かるようにします。数値はいずれも固定の正解ではありません。
- 見出しの上には本文中の段落間より広い余白を取り、次の文章とひとまとまりになるよう下側を調整します。
この案では、見出しと本文が同じ色でも、サイズ・太さ・配置が違いを伝える役割を担います。まずこの状態で区切りが分かるかを確認すると、必要以上に色を増やさずに済みます。
案B：大見出しだけ深い青緑に変える
散策の歴史や見どころを詳しく書く長い記事なら、大見出しだけを深い青緑#1E5961に変える方法があります。オフホワイト#F8F6F1の背景とのコントラスト比は約7.32:1です。本文には引き続き濃い青灰色#273641を使い、背景#F8F6F1との比は約11.50:1に保ちます。小見出しは本文色と共通にして太さやサイズで区別すると、文字色が増えすぎません。
「歩く前の確認」などの短い補足欄を淡い青緑#EAF2EFに置く場合は、その上の本文色#273641が約10.91:1、深い青緑の見出し#1E5961が約6.94:1です。補足欄とページ背景#F8F6F1の色差は約1.05:1と小さいため、欄の見出しと周囲の余白も残します。
色を分ける前後で確認する読みやすさのポイント
文字色を変える場合も、見出しの大きさや太さは保ちます。すべての見出しを同じ青緑で塗るより、大見出しに限定し、小見出しは濃い本文色のままにするなど、階層ごとの役割を決めましょう。青緑の見出しがリンクに見える場合は、実際のリンクに下線を付けるなど、クリックできる場所を色以外でも区別します。
例えばリンクを青#185E82にするなら、オフホワイト#F8F6F1上でのコントラスト比は約6.56:1です。リンクには下線も付け、見出しと混同しないようにします。スマートフォンでは見出しが複数行になりやすいため、色だけでなく改行や余白によって本文とのつながりが崩れていないか確認してください。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。ここで示した値は不透明な単色同士で計算したものです。実際のページでは文字サイズ・太さ・リンクの見た目や、背景が写真に変わる箇所も確認しましょう。見出し色を変えるかどうかは、色数ではなく、記事を読み進めるときの区切りが伝わるかで決めることが大切です。