ダークモードの文字色は白でいい？読みやすいコントラストの考え方

ダークモードの文字色は、真っ白にするべきでしょうか。暗い背景と白文字ははっきり区別できますが、見出しも本文も補足文も同じ白にすると、情報の強弱を付けにくくなります。白とオフホワイトの違い、背景ごとのコントラスト比、ボタンやリンクの注意点を具体例で確認します。

白文字は使えるが、役割ごとに明るさを調整する

ダークモードは暗い背景を中心にした画面表示です。真っ白な文字が不適切という決まりはありません。例えば白 ■#FFFFFF と暗い青灰 ■#171E28 のコントラスト比は約16.76:1で、文字と背景を大きく区別できます。HEXコードは、色を16進数で表す記法です。

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常の文字に4.5:1以上、規定の大きな文字に3:1以上のコントラスト比が必要です。コントラスト比は2色の明るさの差を表す数値で、比率が高いほど明暗の差が大きくなります。

白より少し明るさを抑えたオフホワイト ■#E7EDF3 でも、暗い背景 ■#171E28 との比は約14.21:1です。どちらも通常文字の基準を十分に超えますが、真っ白が常に最適、あるいはオフホワイトなら必ず目が疲れにくいとは断定できません。画面全体の明るさ、文字の太さ、利用環境も考慮して選びます。

例えば見出しを白、本文をオフホワイト、補足情報をさらに控えめな色にすれば、文章の優先順位を整理できます。ただし補足情報は薄くしすぎず、実際に置く背景との比を確認します。

暗い情報ページの見出し・本文・ボタンを配色する

架空のヘルプページを考えます。ページ背景は暗い青灰 ■#171E28、説明カードの背景は少し明るい ■#253141 とします。見出しを白 ■#FFFFFF にした場合、ページ背景との比は約16.76:1、カード背景との比は約13.17:1です。

本文にはオフホワイト ■#E7EDF3 を使います。ページ背景 ■#171E28 とは約14.21:1、カード背景 ■#253141 とは約11.17:1です。見出しと本文を色だけで分けようとせず、文字サイズと余白も合わせて調整します。

カード内の補足文は明るいグレー ■#AFC0CD にすると、カード背景 ■#253141 との比は約7.05:1です。本文より少し控えめでも文字の明暗差を保てます。補足文には日付や操作に必要な注意事項も含まれるため、背景になじませすぎないようにします。

本文中のリンクには明るい水色 ■#8BCCE6 を使うと、カード背景 ■#253141 との比は約7.45:1です。リンクは色だけで示さず下線を付けます。同じ水色 ■#8BCCE6 をボタン背景に使うなら、文字は濃い青 ■#132535 にすると約8.84:1です。白文字 ■#FFFFFF を載せると約1.77:1なので、この明るいボタンには適しません。

薄すぎる補足文と操作状態を見直す

例えば補足文を暗めの青灰 ■#73869B にすると、カード背景 ■#253141 との比は約3.52:1です。規定の大きな文字の3:1は超えますが、小さな補足文など通常文字の4.5:1には届きません。「見出しで読めたから本文も大丈夫」と判断せず、文字サイズごとに照合します。

カードとページ背景の明るさが近い場合は、余白や区切り線で領域を整理します。キーボード操作中のフォーカス表示、選択中のメニュー、ボタンの輪郭も周囲から識別できるか確認しましょう。操作に必要な非テキスト情報には、隣接色との3:1以上のコントラストが求められる場合があります。

マウスを重ねたとき（ホバー）の文字や、スマートフォンで折り返した説明文も確認します。写真や半透明の背景では重なる位置によって色が変わるので、不透明な単色同士の数値をそのまま当てはめられません。数値は指定した色の計算結果であり、画面全体の適合を保証するものではありません。

HueRollではHEXコードを入力し、色の濃淡や配色候補、選択色と白・黒とのコントラストを確認できます。ただし、任意の2色同士の比較やAAの自動判定はできません。ダークモードでも文字色を一律に決めず、見出し・本文・補足・操作の各役割と背景を組にして調整しましょう。