白文字を使っていい背景色は？WEBデザインのコントラストを考える

白文字は、濃い背景に載せると見出しやボタンをはっきり見せられます。しかし、青やオレンジなどの色が付いているだけでは、白文字が読みやすいとは限りません。背景の明るさや文字サイズによって適切な組み合わせは変わります。WEBサイトで使いやすい配色と、避けたい例をコントラスト比で比べます。

白文字に適した背景色は明るさの差で決める

最初に確認するのは、文字と背景の明るさの差です。例えば白 ■#FFFFFF の文字と濃いネイビー ■#24364A の背景は、コントラスト比が約12.34:1です。HEXコードは色を16進数で指定する表記で、ここでは文字と背景の色を組み合わせて比較します。

WCAG（Web Content Accessibility Guidelines、WEBコンテンツを利用しやすくするための指針）2.2のAA（適合レベルの一つ）では、通常の文字は背景と4.5:1以上、規定の大きな文字は3:1以上のコントラスト比が必要です。色相（青や赤など色の種類）が違っていても、明るさが近ければ十分な差になりません。

白文字を使うと決めたら、先に背景候補を並べて比率を確かめます。基準を満たした後に、サービスの内容や周囲の写真、使う面積に合わせて選びましょう。数値を満たすことと、実際の画面で読みやすく感じることは同じではないため、文字の太さや大きさも合わせて確認します。

濃い青・緑・暖色を使った配色例

サービス紹介の大きな見出しには、濃いネイビー ■#24364A の背景に白 ■#FFFFFF の文字を置く方法があります。比率は約12.34:1です。広い面を濃色にした場合、周囲の本文まで同じ背景にする必要はありません。説明エリアは白などの明るい面に切り替え、情報のまとまりを分けられます。

濃いネイビーの見出しエリアに置く申込みボタンには、淡いゴールド ■#F3C97A を背景、ネイビー ■#24364A を文字として使う例があります。ボタン文字と背景の比は約7.90:1で、ボタンの色面とネイビーの周囲にも十分な明るさの差を確保できます。白文字をすべての要素に使うより、ボタンの位置を区別しやすい構成です。

案内バナーなら、深い青 ■#1D5871 と白文字 ■#FFFFFF の組み合わせが約7.82:1です。完了メッセージの見出しには、深い緑 ■#1E675C と白文字 ■#FFFFFF で約6.67:1という例も考えられます。ただし「完了」を色だけで伝えず、見出しやチェックマークを添えます。

温かみを加えたい短いボタンでは、赤茶 ■#A7502B に白文字 ■#FFFFFF を載せると約5.49:1です。ボタンの周囲を白 ■#FFFFFF にすれば色面の位置も分かりやすくなります。実際の用途では、ボタン名で操作を明示し、色だけをクリックの手掛かりにしないようにします。

明るい背景では白文字を無理に使わない

背景が少し明るくなるだけでも結果は変わります。オレンジ系の ■#B45C35 に白文字 ■#FFFFFF を合わせると約4.64:1で通常文字の4.5:1をわずかに上回りますが、余裕は大きくありません。さらに明るいオレンジ ■#CF7445 では約3.37:1となり、通常文字のAA基準を満たしません。規定の大きな文字なら3:1の条件を満たしますが、小さなボタン文字などにはそのまま使えません。

淡い黄色 ■#F3C97A の背景では、白文字 ■#FFFFFF との比は約1.56:1です。この場合、背景を暗くするだけでなく、文字を濃いネイビー ■#24364A に変える方法があります。濃い文字と黄色の比は約7.90:1で、通常文字にも使える組み合わせになります。

写真やグラデーションの上に白文字を置くと、背景が場所によって変わります。半透明の色を重ねる場合も、実際に合成された背景で文字のコントラストを測り直しましょう。スマートフォンでは文字の折り返し位置も変わるため、最も明るい部分に文字が重なっていないか確認します。

HueRollではHEXコードから色の濃淡や配色候補、選択色と白・黒のコントラストを確認できます。ただし任意の2色間の比較やAAなどの適合レベルの自動判定には対応していません。文字の用途と背景をセットで検証し、白文字が適さない場所では文字色の変更も選択肢にしてください。