色のコントラストとは、文字や図形などの前景色と背景色の明るさの差を比率で表したものです。
差が小さい配色は、弱視のある人や加齢によって見え方が変化した人だけでなく、明るい屋外でスマートフォンを見る人にも読みにくさを生じさせます。
ただし、比率を満たすだけでは十分ではありません。
色の見分け方には個人差があるため、エラーや選択状態などの意味を色だけで伝えない設計も必要です。
色とコントラストが読みにくさを生む場面
配色の問題は、本文が読みにくい場合だけに現れるものではありません。
情報の意味や操作方法が色に埋もれると、利用者は必要な内容を見落としたり、次の操作を判断できなかったりします。
- 文字が背景に溶け込む：薄い灰色の文字を白い背景に置くと、文章や補足情報を判別しにくくなります。
- 色だけで状態を示す：入力エラーを赤色だけで表すと、何が間違っているのかを色から判断できない人に伝わりません。
- グラフを色分けだけで構成する：線や領域の形が同じだと、凡例とデータの対応を追いにくくなります。
- 操作部品の境界が見えない：入力欄の枠やフォーカス表示が背景と近い色では、操作できる場所や現在位置を把握しにくくなります。
色覚多様性は、色の感じ方や見分け方が一様ではないことを表す言葉です。
特定の色の組み合わせに頼るのではなく、文字、形、線、模様などを併用すれば、見え方の違いがあっても意味を受け取りやすくなります。
WCAG 2.2で確認する三つの基準
WCAG 2.2は、Webコンテンツのアクセシビリティを評価するための国際的なガイドラインです。
色とコントラストを確認するときは、達成基準1.4.1、1.4.3、1.4.11を分けて考えると、対象を取り違えにくくなります。
色を唯一の手がかりにしない
達成基準1.4.1「色の使用」では、情報、操作、応答の要求、要素の違いを色だけで示さないことが求められます。
たとえば、必須項目を赤いラベルだけで示すのではなく、「必須」という文字も添えます。
折れ線グラフでは、色に加えて線種、点の形、直接ラベルを使うと、各系列の対応が明確になります。
文字と背景のコントラストを確保する
達成基準1.4.3「コントラスト（最低限）」のLevel AAでは、通常の文字は背景に対して4.5:1以上、大きな文字は3:1以上が基準です。
大きな文字の目安は、通常の太さなら18pt以上、太字なら14pt以上です。
日本語を含むCJKフォントでは、それらに相当する大きさとして評価します。
| 対象 | 最低比率 | 確認する組み合わせ |
|---|---|---|
| 通常の文字 | 4.5:1 | 文字と、その直後にある背景 |
| 大きな文字 | 3:1 | 文字と、その直後にある背景 |
| 識別や理解に必要なUI部品、図形 | 3:1 | 必要な視覚情報と隣接色 |
3:1や4.5:1は合否を判定するしきい値であり、計算結果を丸めて合格扱いにはしません。
文字サイズや例外を含む詳しい確認方法は、サイト内のWCAG 2.2「1.4.3 コントラスト（最小）」の解説で確認できます。
UI部品と図形は必要な視覚情報を測る
達成基準1.4.11「非テキストコントラスト」の3:1は、すべてのボタンやリンクの外形に一律で適用する基準ではありません。
操作部品や状態を識別するために必要な視覚情報と、内容を理解するために必要な図形が対象です。
たとえば、入力欄を識別する唯一の手がかりが枠線なら、その枠線と隣接する背景の比率を確認します。
ボタン内の文字は文字のコントラストとして、状態を示すチェックマークや意味を担うアイコンは非テキストのコントラストとして評価します。
対象の切り分けや状態ごとの確認例は、サイト内のWCAG 2.2「1.4.11 非テキストコントラスト」の解説で扱っています。
配色を設計して確認する手順
- 色が担う役割を書き出す。
本文、リンク、エラー、必須項目、選択状態、フォーカス、グラフなど、意味や操作に関係する色を先に洗い出します。 - 前景色と背景色を組み合わせて測る。
単独の色ではなく、実際に隣り合う色の組み合わせでコントラスト比を確認します。背景画像、グラデーション、半透明色がある場合は、最も読みにくくなる部分も対象です。 - 色以外の手がかりを加える。
リンクには下線、エラーには明確な文言、グラフには線種やラベルを加えます。アイコンを使う場合も、アイコンだけに意味を任せず、必要に応じて文字を併記します。 - 状態ごとに確認する。
通常時だけでなく、ホバー、キーボードフォーカス、選択、入力エラーなど、利用者が実際に目にする状態を順に検査します。 - ツールの測定と画面確認を組み合わせる。
WebAIM Contrast Checkerなどで比率を測り、実機や異なる明るさの環境でも情報と操作位置を判断できるか確認します。
測定ツールが示すのは、指定した色同士の比率です。
「エラーを色だけで伝えていないか」「どの線がどのデータか分かるか」といった意味の伝わり方は、画面全体を見て判断します。
よくある問題と改善方法
| 問題 | 起こり得る困りごと | 改善方法 |
|---|---|---|
| 入力欄を赤い枠にするだけ | 色の違いからエラー箇所を判断できない | 「メールアドレスを入力してください」などの文言を対象の近くに示し、枠やアイコンは補助として使う |
| 本文中のリンクを色だけで区別 | リンクの位置を見つけにくい | 常時表示する下線など、色以外の見分け方を加える |
| グラフの系列を色だけで区別 | 凡例と線の対応を追えない | 線種、点の形、模様、直接ラベルを併用する |
| 薄い枠線だけで入力欄を示す | 入力できる範囲を識別しにくい | 識別に必要な枠線を隣接色に対して3:1以上にし、見えるラベルも置く |
| 白文字を背景画像に重ねる | 画像の明暗によって文字が読めなくなる | 文字の背後に単色の面や十分な濃さのオーバーレイを置き、最も条件の悪い部分で測る |
配色の組み合わせをさらに検討するときは、サイト内の色覚多様性に配慮した配色とコントラストのガイドも参考になります。
公開前に確認するチェックリスト
- 通常の文字と背景が4.5:1以上になっている
- 大きな文字の判定では、文字サイズと太さの両方を確認した
- 操作部品や図形は、識別や理解に必要な部分を隣接色と比較した
- エラー、必須、選択状態、グラフの違いを色だけで示していない
- リンクを下線など色以外の手がかりでも見分けられる
- ホバー、フォーカス、選択、エラーなどの状態を個別に確認した
- 背景画像やグラデーション上の文字を、最も読みにくい部分で測った
- 測定結果だけで終えず、実際の画面で情報と操作位置を確認した
配色をアクセシビリティの条件として扱う
色とコントラストは、仕上げ段階の見た目だけで決めるものではありません。
情報の意味、操作できる場所、現在の状態を伝える設計条件として、企画とデザインの段階から確認します。
文字の比率、UI部品と図形の比率、色以外の手がかりを分けて点検すれば、修正箇所と理由が明確になります。
その積み重ねが、見え方や利用環境の違いに左右されにくいWebサイトにつながります。