WCAG 2.2の達成基準1.4.3「コントラスト（最小）」は、テキストや画像内の文字と背景のあいだに、読み取りやすい明るさの差を確保するための基準です。
通常のテキストでは4.5:1以上、大きなテキストでは3:1以上のコントラスト比が目安になります。
この基準は、見え方に制約のある人や、加齢によって小さな文字を読み取りにくくなった人の負担を減らします。
HTMLやCSSを学び始めた人でも確認できるように、基準の意味、配色の考え方、測定から修正までの流れを順に説明します。
WCAG全体の位置づけを先に確認したい場合は、WCAG 2.2の概要と取り組み方も参照してください。
コントラスト比の意味
コントラスト比とは、文字などの前景色と背景色の明るさを比べた数値です。
数値が大きいほど両者の明るさの差が大きく、文字を背景から見分けやすくなります。
「4.5:1」は色コードの差を表すものではありません。
見た目の印象だけで合否を決めず、実際に使う前景色と背景色を測定ツールへ入力して確認します。
| 対象 | 必要なコントラスト比 | 判断の目安 |
|---|---|---|
| 通常のテキスト | 4.5:1以上 | 大きなテキストに当てはまらない本文やラベル |
| 大きなテキスト | 3:1以上 | 18ポイント以上、または14ポイント以上の太字 |
| 装飾目的の文字や表示されない要素 | 例外 | 本文や操作に必要な情報ではないことを確認 |
大きな文字だけ基準が緩和されるため、文字サイズを確認せずに3:1を使うことはできません。
対象がどちらか迷う場合は、通常のテキストとして4.5:1以上を確保すると判断しやすくなります。
文字色と背景色を一組で設計する
文字色だけを決めても、背景色との組み合わせが不明ならコントラスト比は確定しません。
前景色と背景色を一組として指定し、その組み合わせを測定します。
| 組み合わせ | 問題点と対応 |
|---|---|
| 明るい灰色の文字と白い背景 | 明るさの差が小さくなります。文字色を濃くするか背景色を調整し、変更後の比率を測定します。 |
| 黒い文字と白い背景 | 明るさの差が大きく、基準を満たす組み合わせです。サイトの配色へ置き換える場合は、実際の色コードでもう一度測定します。 |
CSSでは、文字色と背景色を同じセレクターで管理すると組み合わせを追いやすくなります。
本文の基本配色や高コントラスト用の配色を共通化すれば、ページごとの指定漏れも見つけやすくなります。
一方の色だけを指定すると、ブラウザやサイト側で設定されたもう一方の色との組み合わせが変わる可能性があります。
文字色だけでなく、対応する背景色も明示してください。
リンクテキストも背景との組み合わせで確認する
リンクの色も、リンクが置かれる背景色に対して測定します。
たとえば、白い背景に明るい青色を置いたリンクは、十分な差を確保できない場合があります。
リンク色を濃くするなどの調整を行ったら、見た目だけで終わらせず、変更後の色コードでコントラスト比を確認します。
背景画像の上に文字を置く場合
背景画像には明るい部分と暗い部分が混在するため、文字の位置によってコントラストが変わります。
白い文字を置くだけでは、画像の明るい部分と重なったときに読みにくくなります。
この場合は、画像と文字のあいだに半透明の暗い色を重ね、文字との明るさの差を保ちやすくします。
背景色を画像の下に指定するだけでは、画像が不透明な部分の文字とのコントラストは変わりません。
画像を差し替えると明暗の位置も変わるため、最終的な判定は実際に表示される画像と文字の組み合わせで行います。
測定から改善までの手順
- 対象を洗い出す：本文、見出し、リンク、ラベル、画像内の文字など、読者が読む文字を確認します。
- 色を取得する：前景色と背景色のRGB値または16進数の色コードを調べます。
- 比率を測定する：WebAIM Contrast Checkerやブラウザの開発者ツールへ色を入力します。
- 基準と照合する：通常のテキストは4.5:1以上、大きなテキストは3:1以上かを確認します。
- 色を調整する：基準を下回る場合は文字色か背景色を変更し、同じ手順でもう一度測定します。
色の選択をページごとに繰り返すより、基本となる組み合わせを先に決めてCSSで共通化すると、確認する対象を整理しやすくなります。
配色全体の考え方は、ウェブアクセシビリティのコントラストと色設計で詳しく確認できます。
実装前後のチェックリスト
- 通常のテキストは4.5:1以上になっているか。
- 3:1を適用した文字は、大きなテキストの条件を満たしているか。
- 文字色と背景色を一組で確認したか。
- リンクの色を実際の背景色に対して測定したか。
- 背景画像の明暗が変わっても文字を読み取れるか。
- 色を変更した後に、測定ツールでもう一度確認したか。
読みやすい配色を継続して確認する
達成基準1.4.3への対応は、文字色を一度選んで終わる作業ではありません。
前景色と背景色の組み合わせを測定し、基準を下回る箇所を修正してから、実際の表示でも読みやすさを確認します。
通常のテキストは4.5:1以上、大きなテキストは3:1以上という基準を起点に、本文、リンク、背景画像上の文字を順に点検してください。
当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。