長文コンテンツに合う背景色は？読み疲れしにくいWEB配色の考え方
数千文字にわたるWEB記事では、どんな背景色を使えば最後まで読み進めやすいのでしょうか。真っ白な背景と少し色味のある背景にはそれぞれ使いどころがありますが、特定の色なら必ず読書の疲れが減るとは言い切れません。本文の背景を一貫させ、文字との明るさの差や行間を整えることが大切です。ここでは架空の古書修復の作業記録を例に、白と温かみのあるオフホワイトを比較します。
長い文章の背景色は、読む領域で一貫させる
長文の背景は、ページ全体を目立たせる色ではなく、文章を読むための広い面に使います。例えば「本の状態を調べる」「表紙を補修する」「作業後の記録をまとめる」と続く架空の記事なら、3つの章の本文背景を基本的に同じ色にします。見出しが変わるたびに背景を交互に塗るより、読者が同じ読み面を追える構成から考えましょう。
章の区切りは、まず見出しの大きさと上下の余白で示します。撮影条件や使用した道具などの短い補足だけ、別の淡い背景に置く方法もあります。長文の大部分を占める背景と、必要な場所だけに使う補足の背景は役割を分けます。これはセクションごとに違う色を割り当てる設計とは異なる考え方です。
背景色を決めるときは、文字色も必ず一緒に選びます。白から淡いベージュに変えたとしても、本文が薄いグレーでは読みにくくなる場合があります。逆にコントラストを十分に確保しても、行が長すぎたり文字が詰まっていたりすれば読み進めにくくなります。背景色だけで読みやすさを判断しないことが出発点です。
白背景とオフホワイトを同じ長文で比較する
ここではHEX（「#」に続けて0～9とA～Fの6桁で色を表すコード）を使います。コントラスト比は、文字とその背景の相対的な明るさの差を表す数値です。2案とも本文の文章・文字サイズ・横幅をそろえて、背景色による違いを比べます。
案A：白い読み面に濃い文字を組み合わせる
- 本文背景を白#FFFFFF、文字を濃い青灰色#293A43にします。文字と背景のコントラスト比は約11.79:1です。
- 章の見出しは深い青緑#235960にし、白#FFFFFFとの比を約7.87:1にします。見出しの役割は色だけに任せず、太さと余白でも区別します。
- 本の状態を示す短いメモ欄には淡い緑灰色#EDF3EFを使い、文字は濃い緑灰色#304F49にします。このメモ内の文字と背景は約7.98:1です。
白い読み面は、本文・写真・余白の関係をそろえやすい出発点です。ただし、画面の明るさや周囲の照明、読む人の好みによって快適さは異なります。白を選んだだけで目の疲れが増えるとも、減るとも断定できません。
案B：少し温かみのある背景で読み面を作る
同じ文章を、温かみのあるオフホワイト#F8F6F0に載せる案もあります。本文の濃い青灰色#293A43とのコントラスト比は約10.91:1、見出しの深い青緑#235960との比は約7.28:1です。文字色を変えずに背景だけを替えるため、2案の違いを比べやすくなります。
白#FFFFFFとオフホワイト#F8F6F0の背景同士のコントラスト比は約1.08:1です。この小さな違いを「誰にとっても楽」と決めつけず、同じ段落を複数画面で見比べてください。なお、淡い緑灰色#EDF3EFのメモ欄を置く場合は、背景同士の差だけで区切ろうとせず、「作業メモ」という見出しや余白を付けます。必要な境界線として灰緑色#5B776Bを使うなら、メモ背景#EDF3EFとの比は約4.35:1です。
一方、本文を薄い灰緑色#ADB9B2にすると、オフホワイト#F8F6F0上では約1.88:1しかありません。淡い背景に淡い文字を合わせると、読みやすい印象を狙っていても通常サイズの文章のコントラストが不足します。
行の長さ・余白・スマホ表示も一緒に確認する
長い文章の読みやすさは色だけでは決まりません。本文を16～18px程度、行間を文字サイズの1.6～1.8倍程度から試し、横幅が広すぎて次の行の始まりを見失わないか確かめます。px（ピクセル）はWEB上の長さを指定する単位です。これらは設計上の出発点であり、誰にでも最適な寸法という意味ではありません。
スマートフォンでは、読み面の横幅が狭くなるため、同じ背景色でも1画面に見える文字量が変わります。見出し・本文・メモ欄が自然に続くか、文字を拡大したときに切れたり重なったりしないかも確認します。背景色を章ごとに変えるより先に、行の折り返しや段落間の余白を整えましょう。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上です。また、利用者が文字間隔や行間を変更しても内容が欠けないことが求められます。ここに示した比率は不透明な単色同士の計算値で、写真の上や透明な背景では再確認が必要です。背景色を選ぶときは、長い文章を同じ読み面で追えるか、文字と余白を含めて比べることが大切です。