明るい背景に暗い文字から始める理由
最初の案では、明るい背景に暗い文字を置くと迷いにくくなります。ただし、「白と黒ならいつも快適」「明るさだけ見れば十分」という意味ではありません。文字サイズ、太さ、色覚、表示状態も読みやすさに関わります。
たとえるなら、霧の中の標識です。標識と周囲が似た明るさなら輪郭を見つけにくく、差があれば見つけやすくなります。ただし、この例が表すのは背景との差だけです。色覚や文字サイズは説明できないため、実物のコントラスト比と表示環境で確かめます。
最初から色相の相性を考えすぎると、読むための差と、雰囲気の好みが混ざります。先に明暗差を確保し、その後でブランドの色へ寄せると、何を守りながら調整しているかが分かります。アクセシビリティの最初の3点でも、コントラストを入口の1つとして扱っています。
見た目ではなく、比率を測る
WCAG 2.2の達成基準1.4.3では、通常の文字は背景とのコントラスト比4.5:1以上、大きな文字は3:1以上が原則です。文字サイズの条件やロゴなどの例外は、W3Cのコントラスト（最低限）の解説で確認できます。
色を選んだら、前景色と背景色をコントラスト計測ツールへ入力します。目を細める、白黒で見る、といった方法は候補を見つける補助にはなりますが、測定の代わりにはなりません。
測る色はCSSの指定値だけとは限りません。半透明の文字、背景画像、グラデーション、重なったレイヤーでは、実際に合成された色を確認します。写真上の文字は背景が一様ではないため、文字の背後で最も差が小さくなる部分を調べます。判定が難しければ、文字の背後へ単色の帯や面を置き、測れる組み合わせへ変えます。
身近な例を3つの組み方で見る
| 組み方 | 標準にする場面 | 注意点 |
|---|---|---|
| 明るい背景＋暗い文字 | 長い本文、一般的な案内 | 文字を薄くしすぎない |
| 暗い背景＋明るい文字 | 短い見出し、暗いテーマ | 細い文字や長文を実機で確認 |
| 色つき背景＋十分に差のある文字 | ラベル、ボタン、告知 | 状態ごとに比率を測る |
写真の上へ文字を置くと、場所によって背景色が変わります。文字の背後に単色の面を敷く、写真を暗くする、文字位置を変えるなど、最も差が小さい場所でも読めるようにします。
本文では色を1組だけ測って終わらず、リンクと訪問済みリンクも見分けられるか確認します。入力欄ならラベル、入力文字、補足、エラーの4役があります。役割を薄さだけで表すと、補足やエラーが読めなくなるため、位置、アイコン、文言も組み合わせます。純黒と濃いグレーの迷いは、真っ黒な文字の選び方で同条件の比較に分けられます。
色だけでは効かない場合
エラーを赤、成功を緑にするだけでは、色が区別しにくい人や白黒表示で意味が伝わりません。「エラー」「完了」と書く、アイコンを添える、形や位置も変える、といった別の手がかりを併用します。
ボタンは通常時だけでなく、ホバー、フォーカス、無効、押下後の状態も測ります。背景色が変わる状態を見落とすと、通常時だけ基準を満たしても操作中に読めなくなります。
状態の確認表を作ると、通常時だけの合格を防げます。
| 要素 | 平常時以外に見る状態 | 色以外の手がかり |
|---|---|---|
| リンク | 訪問済み、フォーカス | 下線、輪郭 |
| ボタン | ホバー、押下、無効 | 文言、形、進行表示 |
| 入力欄 | 入力中、エラー、完了 | ラベル、エラー文、アイコン |
色覚だけでなく、白黒印刷、屋外の反射、画面の明るさ低下でも色差は変わって見えます。特定の見え方を想像だけで代弁せず、複数の表示条件と実際の利用者による確認を組み合わせます。
自分の実物で3状態を点検する
今日のワーク：色ペアを測って比べる
今使っている本文、ボタン、補足文から1つずつ選びます。
- 前景色と背景色のコントラスト比を測ります
- スマホの実寸と明るい場所で読みます
- 通常時・選択時・無効時など、状態が変わる箇所も確認します
基準を下回ったら、まず文字を濃くするか背景を明るくし、再測定します。
数値を満たしても細い書体や小さな文字が読みにくいことはあります。測定を最低線にして、利用者と実機で読み心地を仕上げます。
印刷物では、画面上の色指定と刷り上がりが一致しない場合があります。校正紙を実寸で確認し、読む距離や照明もそろえます。Webでは文字を拡大し、折り返した後も背景面からはみ出さないかを見ます。「基準値を満たした」と「その媒体で読み続けられる」は別の確認です。
デザインシステムへ色を登録するなら、「薄いグレー1」のような見た目の名前だけでなく、本文、補足、境界線、無効状態など用途を記録します。同じ色でも背景が変われば比率が変わるため、文字色単体ではなく、使用できる背景との組を定義します。新しい背景を足したときは、既存の本文やリンクをそのまま流用できるか再測定します。
確認結果には、前景色、背景色、比率、文字サイズ、太さ、状態、確認日を残します。これなら「前に通った色」という記憶ではなく、条件を再現できます。写真を差し替えた場合は色コードが同じでも背景が変わるので、もう一度確認します。
利用者テストでは、色名や好みだけを尋ねず、どの文字を見落としたか、リンクを見つけられたか、エラーから復帰できたかを観察します。明るい室内で読める案が屋外でも同じとは限りません。端末の明るさや拡大率を変え、重要な情報から優先して試します。
ダークテーマを用意する場合は、ライトテーマの色を機械的に反転しません。本文、面、境界線、リンク、状態色を役割ごとに組み直し、両テーマで測ります。利用者がテーマを切り替えた後も、入力途中の状態やフォーカスが見えることまで確認します。
色を変更した後は、本文以外の図表や画像内文字も検索します。古い色が画像に焼き込まれていれば、CSSだけを更新しても残るためです。メールやPDFへ同じ配色を展開する場合も、それぞれの表示・印刷条件で測り直します。共通のブランド色は出発点であり、すべての媒体で同じ組み合わせが使える保証ではありません。
測定結果には、確認した状態と背景も記録します。
読める色は、測ってから選ぶ
迷ったら明るい背景に暗い文字から始め、通常文字4.5:1以上、大きな文字3:1以上を原則として測ります。暗い背景や色つき背景も、同じ基準で比較できます。
色名や感覚だけで決めず、比率、実寸、状態の3つで確認する。この順番なら、見た目の好みと読めることを両立しやすくなります。