暗い背景に長文を載せるときの文字色｜読みやすさを保つ配色
暗い背景に長いWEB記事を載せる場合、本文の文字は真っ白にするべきでしょうか。白い文字は十分な明暗差を作れますが、見出しも本文もすべて同じ色では文章の構造をつかみにくくなる場合があります。一方、落ち着いた印象にするため灰色の文字を暗くしすぎると、意味のある説明が読みにくくなります。ここでは架空のラジオ番組制作記録を例に、本文・見出し・補足文・リンクの文字色を暗い背景に合わせて考えます。
暗い背景では、長い本文に使う文字色を先に決める
「台本を整える」「収録時の環境音を確認する」「編集内容を振り返る」という章が続く、架空の制作日誌を想定します。数千文字を読むページなら、章が変わるたびに背景や本文色を切り替えず、同じ読み面を保つ方法があります。長文に使う本文色を決め、その後で見出しや録音日時などの補足、資料へのリンクに必要な色を割り当てます。
暗い背景の上には、白に近い色や明るいグレーを使えます。ただし、文字と背景の明暗差が大きいほど必ず快適に読めるという決まりはありません。文字の太さ、画面の明るさ、読む人の見え方も関係するため、十分なコントラストを確保したうえで、同じ長さの文章を見比べます。
見出しは本文より明るくしてもよいですが、文字サイズ・太さ・上下の余白でも章の始まりを示します。短い補足も記事の意味を左右する情報なら極端に暗くしません。実際のリンクは文字色に加えて下線を付け、色だけでクリックできることを表さないようにします。
濃い青灰色とチャコールの読み面を2案で比較する
以下の色はHEX（「#」と、その後に続く0～9とA～Fの6桁で表す色コード）です。コントラスト比は、文字色と背景色などの相対的な明るさの差を示す数値です。ここでは不透明な単色同士で計算し、長い本文を載せる2種類の配色例を比べます。
案A：深い青灰色に白に近い本文を合わせる
- 本文背景を深い青灰色#1E2A36、本文色を白に近い淡い青灰色#E9EEF2にすると、コントラスト比は約12.49:1です。
- 「台本を整える」の見出しは白#FFFFFFにし、同じ背景#1E2A36に対して約14.59:1です。見出しは太さと前後の余白でも区切ります。
- 録音日時などの補足は明るい灰青色#C3D2DDで、背景#1E2A36との比は約9.43:1です。資料を開くリンクは淡い水色#A8DDF3と下線で示し、同じ背景#1E2A36との比は約9.93:1です。
「編集メモ」だけを少し異なる暗い背景#2D3B48で囲むなら、文字を淡い青灰色#D8E4EBにし、約8.86:1を保ちます。ただし、本文背景#1E2A36とメモ背景#2D3B48の比は約1.27:1と小さいため、見出しと余白を付けて内容を区別します。色面の差だけを情報の区切りにしません。
案B：暗いチャコールに柔らかな明るいグレーを使う
青みを抑えた暗いチャコール#29282Cを背景にし、本文に温かみのある明るいグレー#DEDAD8を使う案もあります。文字と背景のコントラスト比は約10.55:1です。見出しは淡い白#F9F5F2にして約13.51:1、補足は明るい灰色#C3BAB9で約7.70:1になります。リンクは淡い水色#ACD7EFと下線で示し、背景#29282Cとの比は約9.57:1です。
こちらのメモ欄を少し別の暗色#37353Aにするなら、本文と同じ明るいグレー#DEDAD8の文字は約8.73:1です。ただし本文背景#29282Cとメモ背景#37353Aの差は約1.21:1とわずかなので、欄名や余白も加えます。
逆に、暗めの灰青色#75828Cの文字では、深い青灰色の背景#1E2A36と約3.70:1、チャコール#29282Cと約3.72:1にとどまります。どちらも通常サイズの文字に必要な4.5:1を下回るため、意味のある補足や本文には適しません。
長文の行間・幅・スマホ表示まで揃えて確認する
2案を比べるときは、同じ数段落を同じ書体・文字サイズ・行の長さで表示します。例えば本文16～18px、行間を文字サイズの1.6～1.8倍程度から試せます。px（ピクセル）はWEB上で文字や余白の大きさを表す単位です。これらは設計の出発点であり、WCAGがその行間をすべてのWEB記事に指定しているという意味ではありません。利用者が文字間隔や行間を変更しても、文章が欠けたり重なったりしないかも確かめます。
暗い読み面だけで記事を最後まで読ませる必要があるかも、用途に応じて検討してください。明るい表示を選べるサイトなら、同じ記事を明るい読み面でも提供する方法があります。ただし暗い配色なら必ず目が疲れにくい、白に近い文字は必ず疲れる、といった効果は断定できません。スマートフォンでは本文の折り返しが増えるため、段落の間隔と見出しの前後の余白を確認します。
WCAG（WEBコンテンツのアクセシビリティに関する指針）のレベルAAでは、通常サイズの文字と背景に原則4.5:1以上、大きな文字に3:1以上のコントラスト比が必要です。ここで推奨した本文・見出し・補足・リンクの文字色は、それぞれの背景との比を確認しています。写真上の文字や半透明の背景では実際の表示色で計算し直してください。暗い背景の長文では、色数を増やすより、読み面の一貫性と文字の明暗差、読み進めやすい余白を整えることが大切です。