コントラスト比4.5:1とは — WCAGの色基準を解説

コントラスト比とは — 数値の意味

コントラスト比とは、文字色と背景色の「相対的な明るさ(輝度)の差」を数値で表したものです。最小の1:1(まったく同じ色)から最大の21:1(白背景に黒文字)までの範囲で表され、数値が大きいほど文字がくっきり読み取れることを意味します。

重要なのは、これが「見た目の印象」ではなく計算で一意に決まる数値だという点です。文字色と背景色のカラーコードが決まれば、コントラスト比は誰が計測しても同じ値になります。つまり、デザイナーの主観に頼らず、機械的に合否を判定できる基準なのです。

コントラスト比が重要なのは、ロービジョン(弱視)の人や高齢で視力が低下した人が文字を読み取るための前提条件だからです。加えて、屋外の強い日差しの下でスマートフォンを見る、低品質なモニターで作業するといった状況では、誰にとっても低コントラストの文字は読みにくくなります。コントラスト対応は、特定の利用者だけでなく全ユーザーの可読性を底上げする施策です。

WCAGの基準 — 4.5:1と3:1の使い分け

ウェブアクセシビリティの国際基準WCAG 2.1は、達成基準1.4.3「コントラスト(最低限)」(レベルAA)で次のように定めています。

「4.5:1」という数字は、視力低下によって失われるコントラスト感度を補える水準として設定されたものです。大きい文字は細部の判別がしやすいため、基準が3:1に緩和されています。なおWCAG 2.1では、アイコンやフォームの枠線など文字以外のUI要素にも3:1以上を求める達成基準1.4.11(非テキストのコントラスト)が追加されており、ボタンの枠線や入力欄の境界にも注意が必要です。WCAG全体の要件はWCAG 2.1 AA実装ガイドで整理しています。

コントラスト比の確認方法

コントラスト比は計算式が公開されており、無料のツールで簡単に確認できます。代表的な方法は3つです。

1. カラーコードを指定して確認する — WebAIMの「Contrast Checker」などのオンラインツールに文字色と背景色のカラーコードを入力すると、コントラスト比とAA/AAAの合否が即座に表示されます。デザイン段階の配色検討に向いています。
2. ブラウザの開発者ツールで確認する — Chrome DevToolsで文字要素を検証すると、カラーピッカーにコントラスト比とAA基準の充足状況が表示されます。実装済みページの個別確認に便利です。
3. 診断ツールでページ全体を一括確認する — 1・2の方法は「1箇所ずつ」の確認になるため、サイト全体の点検には自動診断ツールが現実的です。コントラスト比を含め、まず押さえるべき観点は30項目チェックリスト(PDF)にまとめています。

基準を満たさない場合の改善方法

診断で違反が見つかった場合の改善アプローチは、優先度の高い順に次のとおりです。

• 文字色を濃くする(背景色を明るくする) — 最も確実な方法です。薄いグレーの本文(#999999など)は白背景で4.5:1を満たしません。#767676が白背景で4.5:1を満たすおおよその下限であり、それより濃い色に調整します。
• 配色の組み合わせを変える — 色付き背景に色付き文字を重ねている場合は、どちらかを白または濃色に寄せます。画像の上に文字を置く場合は、半透明の下地(スクリム)を敷いてコントラストを確保します。
• 文字サイズ・太さで基準を切り替える — デザイン上どうしても淡い色を使いたい見出しなどは、約24px以上(太字なら約18.7px以上)にすれば基準が3:1に緩和されます。ただし本文への適用はできません。
• カラーパレットとして再設計する — 場当たり的な修正を繰り返すと配色が崩れます。ブランドカラーを基点に「本文用」「注釈用」「ボタン用」など役割別に基準を満たす色を定義し、デザインシステムとして固定するのが根本対策です。

コントラスト比は、基準が数値で明確・確認がツールで簡単・修正がCSSで完結という、アクセシビリティ対応の中でも最も費用対効果の高い項目です。まずは30項目チェックリスト(PDF)で点検すべき観点を確認し、違反箇所から着実に改善していきましょう。対応全体の順序は進め方5ステップの記事を参考にしてください。