淡い背景色をWEBデザインで使うコツ｜文字が読みにくくならない色選び

TIPS

淡い背景色は画面の大きな面に使いやすい一方、文字やカードの境界まで薄い色でそろえると、読む場所が分かりにくくなります。大切なのは背景を濃くすることではなく、背景の淡さを残したまま、文字と操作部分に十分な明るさの差を付けることです。地域の防災講座の案内ページを例に、本文・補足文・持ち物カード・申込み操作の配色を考えます。

淡い背景には、読ませる文字を十分に濃くする

まず背景色を決め、見出し・本文・小さな補足文の順に文字色を選びます。文字色を背景と同じように淡くすると、色相（青や緑などの色の種類）が違っても明るさの差が不足します。コントラスト比とは、文字と背景の相対的な明るさの差を表す数値です。

見出しは大きさや太さでも強弱を付け、本文は一定の濃さを維持します。開催日時や対象年齢などの補足情報は、目立たせすぎないために細く薄い文字にするより、余白や配置で本文と区別すると読みやすさを保ちやすくなります。背景を複数使う場合、同じ文字色でも背景が変わればコントラスト比が変わる点に注意しましょう。

防災講座の案内ページで使う具体的な配色例

以下のHEXは、WEBの色を16進数のコードで表したものです。「講座の説明」「持ち物」「申込み」の各場所で、背景と文字・操作色の役割を決めます。

講座の説明：薄いクリーム色の背景

ページ背景は淡いクリーム色 ■#FFF9EF。見出しは深い青灰 ■#234451で、背景とのコントラスト比は約9.94:1です。
講座の概要や集合場所を説明する本文は濃いグレー ■#2E3842。背景 ■#FFF9EFとの比率は約11.39:1です。
開催日時などの補足文には少し落ち着いたグレー ■#56616Dを使用。背景 ■#FFF9EFに対して約6.03:1を確保します。

淡い色を広く使っても、見出しと本文の色をはっきり分ければ、説明の順番が伝わります。見出しだけを濃くして、長い本文を薄くすることは避けます。

持ち物リスト：薄いセージ色と白いカード

「持ち物を確認する」欄の背景は薄いセージグリーン ■#EDF5ED。見出しを深い緑 ■#215842にすると約7.44:1、説明文を濃い緑がかったグレー ■#2E4038にすると約9.90:1です。
注意事項の文字はグレー ■#56616Dにし、セージ背景 ■#EDF5EDと約5.68:1に保ちます。「飲料水」「携帯ラジオ」などの持ち物名は色だけで分類せず、項目として並べます。
項目を白いカード ■#FFFFFFにまとめる場合、カードとセージ背景 ■#EDF5EDの比率は約1.11:1しかありません。輪郭を必要とするデザインではグレーグリーン ■#6A8275の枠線を付けると、白いカード ■#FFFFFFとは約4.15:1、セージ背景 ■#EDF5EDとは約3.73:1の差を付けられます。

申込みエリア：主要ボタンだけ濃い色にする

「防災講座に申し込む」ボタンを深い青緑 ■#1D6556で塗り、文字を白 ■#FFFFFFにすると、文字とボタンの比率は約6.89:1です。ボタンとセージ背景 ■#EDF5EDは約6.20:1、クリーム背景 ■#FFF9EFでも約6.58:1です。補助の「開催場所を見る」は濃い青 ■#155D78の下線付きリンクにし、セージ背景 ■#EDF5EDとの比率を約6.58:1にして、主要操作との違いを示します。

文字を淡くする前に、置く背景と操作状態を再確認する

たとえば淡いグリーングレー ■#ADC0B0をセージ背景 ■#EDF5EDの文字に使うと、コントラスト比は約1.73:1です。また、少し濃いグレー ■#657382はクリーム背景 ■#FFF9EFでは約4.63:1ですが、セージ背景 ■#EDF5EDへ移すと約4.36:1になり、通常サイズの文字の基準を下回ります。文字色をそのまま使い回さず、グレー ■#56616Dなどに調整して各背景で確認しましょう。

ホバー（マウスを重ねた状態）では、青緑のボタンを濃い青緑 ■#164D40に変えても、白い文字 ■#FFFFFFと約9.68:1を確保できます。フォーカス（キーボードなどで操作対象になった状態）には、ボタンから少し離した濃い青 ■#194B62の輪郭を付ける方法があります。輪郭とクリーム背景 ■#FFF9EFは約9.01:1、セージ背景 ■#EDF5EDは約8.49:1です。

WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツのアクセシビリティ指針）のAA水準では、通常サイズの文字と背景に原則4.5:1以上、大きな文字には3:1以上のコントラスト比が必要です。入力欄の枠線やフォーカスなど、操作部品の識別に必要な非テキスト表示は隣接色との3:1以上が基準です。枠線の必要性は部品の役割によって異なります。スマートフォンでも、小さな補足文・カードの境界・ボタンの押しやすさを実際の画面で確かめてください。