ウェブサイトの文字が「読みにくい」と感じられる背景には、多くの場合、文字色と背景色の間の輝度差、つまり「コントラスト比」の不足があります。W3C(World Wide Web Consortium)が策定するWCAG(Web Content Accessibility Guidelines)は、このコントラスト比を数式で厳密に定義し、満たすべき基準値を定めています。
この記事では、WCAG公式ドキュメントの原文に基づき、コントラスト比の計算方法と基準値、その基準がどのような根拠で決まっているのか、そしてよくある実装ミスを整理します。
コントラスト比は「相対輝度」の比で決まる
WCAGにおけるコントラスト比は、色の見た目の印象に頼らず数値で厳密に定義されており、その正体は「相対輝度」という値の比です。相対輝度は、最も暗い黒を0、最も明るい白を1として、Web標準の色空間における赤・緑・青の値から次の式で計算されます。
L = 0.2126×赤 + 0.7152×緑 + 0.0722×青
ここで使う赤・緑・青の値は、8ビットの色情報(0〜255)をディスプレイのガンマ特性に応じて補正した値に変換してから使います。8ビット値を255で割って0〜1に正規化した後、値が0.04045以下であれば12.92で割り、それより大きければ(値+0.055)÷1.055を2.4乗するという計算を、赤・緑・青それぞれに適用します。
なお、この0.04045という閾値は、2021年5月より前の仕様では0.03928という値になっていました。これは古い草案版の数値がそのまま残っていたためで、仕様の更新にあわせて現在の値に修正されています。8ビットの色を扱う実務上の計算結果に違いが出ることはほとんどないため、過去にこの数値で計算していたとしても心配は不要です。
2つの色の相対輝度が求まったら、コントラスト比は次の式で算出されます。
コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)
L1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です。この式に加えられている「0.05」は、実際のディスプレイが周囲の光を反射するために完全な黒(輝度0)を表示できない、という現実の視聴環境を補正するための値です。この式により、コントラスト比は同一色の1:1から、黒と白の21:1までの範囲で算出されます。
WCAGが定める基準値
WCAGは、テキストの種類とアクセシビリティのレベル(標準・トリプルA)に応じて、満たすべきコントラスト比の下限を定めています。
| 基準 | 通常テキスト | 大きな文字 |
|---|---|---|
| レベルAA(最低限) | 4.5:1 | 3:1 |
| レベル・トリプルA(高度) | 7:1 | 4.5:1 |
ここでいう「大きな文字」とは、18ポイント以上、または14ポイント以上の太字テキストを指します。文字のストロークが太く大きいほど、多少コントラストが低くても判読しやすくなるため、緩和された基準が設定されています。また、ボタンや入力欄の枠線といった非テキストのUI要素についても、レベルAAでは3:1以上のコントラスト比が求められます。
基準値はどのように決まったのか
「3:1」「4.5:1」「7:1」という数値は、恣意的に決められたものではありません。3:1は、標準的なテキストと正常な視力を持つ人にとって許容される最低限のコントラストとして、既存の国際規格に基づいています。
4.5:1という数値は、視力の低下がコントラスト感度にどう影響するかを調べた視覚科学の研究をもとにしています。視力が「20/40」(標準的な視力検査で0.5に相当)まで低下したユーザーは、正常な視力の人と比べて約1.5倍のコントラスト感度の低下を経験するとされ、正常視力の基準である3に1.5を掛けた4.5という数値が導かれています。この「20/40」という視力は、80歳前後の高齢者に一般的に見られる視力水準として報告されており、高齢化が進む社会でウェブサイトの可読性を保つうえで重要な基準になっています。7:1という数値も同じ考え方で、さらに視力が低下した「20/80」の水準を補償するために設定されています。
また、コントラストの計算が「輝度」に基づいている点にも理由があります(色相そのものは基準にしていません)。色覚特性を持つ人にとって、特定の色の判別が難しくても、明暗の差を感じ取る力はおおむね正常に機能します。輝度の差を基準にすることで、個々の色覚特性を細かく考慮しなくても、実効的な見やすさを評価できる仕組みになっています。
よくある実装ミス
背景画像の上に直接文字を置く
背景画像とテキストの輝度差が不十分な場合、画像の線や模様が文字の形と重なって判読が難しくなります。特に、黒いテキストが画像内の暗い領域と重なる部分でコントラストが局所的に失われ、その部分だけ文字が読めなくなるという問題が起こりがちです。対策としては、文字の周囲にハイコントラストな縁取り(ハロー効果)を加えたり、背景画像との重なりが不規則にならないよう配置を工夫したりする方法があります。
前景色だけ指定して背景色を指定し忘れる
文字色だけを指定して背景色の指定を省略すると、ユーザーがOS側で独自の背景色を設定していた場合に、意図しない組み合わせで表示され、コントラストが崩れることがあります。文字色と背景色は必ずセットで指定するのが安全です。
非テキストのUI要素で薄いグレーを多用する
デザイン性を優先して、チェックボックスの枠線やフォーカスを示す枠線を薄いグレーにすると、背景とのコントラスト比が3:1を下回り、要素の存在自体が視認できなくなることがあります。ボタンや入力欄など操作可能な要素の境界線は、周囲の背景に対して十分なコントラストを確保する必要があります。
確認は画面の見た目ではなくCSSの数値で行う
コントラスト比を確認する際、画面に表示された文字のピクセルをスポイトツールで直接測定するのは避けるべき方法です。フォントのアンチエイリアス処理によって、文字の輪郭が背景色と混ざり合い、実際に指定した色よりも見かけ上のコントラストが変わって見えることがあるためです。WCAGは、画面の描画結果ではなく、HTML・CSSで指定した前景色と背景色の数値をもとに評価することを基本としています。色の数値を入力するだけでコントラスト比を自動計算してくれるツールが複数公開されているため、実装段階でこうしたツールを使って数値を確認する運用が実務的です。
次世代の評価方法として検討が進む知覚コントラストの新算出法
現行のWCAG 2系のコントラスト計算式には限界も指摘されています。特に、背景が暗い色のダークモードや、極端に細いフォントを使った場合、計算上は基準を満たしていても人の目には読みにくく感じられることがあります。この課題に対応するため、次世代規格であるWCAG 3の作業草案では、知覚的な見えやすさを重視した新しいコントラスト評価方法の検討が進められています。
この新しい評価方法はまだW3Cの正式な勧告ではありませんが、文字のサイズや太さを計算そのものに組み込み、明るい背景に暗い文字を置く場合と、暗い背景に明るい文字を置く場合とで異なる計算式を使うなど、より人の見え方に近い評価を目指しています。今後の動向次第では、コントラストの考え方そのものが見直される可能性がある分野として、注目しておく価値があります。
自社のマーケティング課題を根本から解決しませんか？
ウェブサイトから要素を引き算し、訪れた人が迷わず次の一歩に進む形へ組み直す。初回60分のオンラインで御社のサイトを一緒に読み、どこから直すべきかをお伝えします。手順をまとめた無料の診断と解説動画もご用意しています。
初回は無料・60分・オンライン完結・その場で契約のお願いはいたしません
