WCAG 3.0で変わるコントラスト比。新基準「APCA」が目指す視覚のリアリティ
ウェブアクセシビリティのガイドラインにおいて、テキストの「読みやすさ」を決定づける重要な指標がコントラスト比です。現在広く使われている国際規格である WCAG 2.0(および 2.1 / 2.2)では、「4.5:1」や「7:1」といったシンプルな数値基準が用いられてきました。
しかし、この従来のコントラスト計算式には、人間の実際の見え方と大きく乖離しているという重大な課題がありました。次世代のアクセシビリティ基準である「WCAG 3.0」の草案では、これに代わる全く新しいコントラスト評価アルゴリズム APCA (Advanced Perceptual Contrast Algorithm) が導入されようとしています。なぜ基準が変わるのか、そして新しい「APCA」とは何なのか、その核心を解説します。
従来の「コントラスト比」が抱えていた数学的な罠
これまでの W3C (World Wide Web Consortium) 推奨式は、純粋な物理的輝度の比率を計算するだけの非常に単純なものでした。しかし、人間の脳の視覚処理システムは、物理的な光の量(輝度)をそのままリニアに認識しているわけではありません。
従来の数式では、以下のような「見え方の矛盾」が発生していました。
- 背景色と文字色の逆転バグ: 黒背景にオレンジ色の文字を置いたときと、オレンジ色の背景に黒文字を置いたとき、従来の式では「同じコントラスト比」として算出されます。しかし人間の目には、明らかに「オレンジ背景に黒文字」の方が圧倒的に読みやすく見えます。これは、人間の目が「明るい背景の上の黒」に対して、エッジのコントラストを鋭敏に検出するためです。
- 暗い色同士の過小評価: ダークモードのような輝度が低い(暗い)領域では、物理的な輝度差がわずかであっても、人間の目は十分に文字を識別できます。従来の計算式は、この暗所での知覚感度(網膜の適応状態)を考慮していないため、ダークモードのデザインに対して不必要に高いコントラスト(不自然に明るい文字)を要求し、結果として目が疲れやすいデザインを強いていました。
新基準「APCA」の革新性:知覚コントラスト(Lᶜ)
APCA は、これまでの物理的な輝度比の代わりに、人間の目の知覚特性をモデル化した**「知覚コントラスト(Perceptual Contrast / Lᶜ)」**という新しいスコアを用います。APCA の特徴は、以下の3つの要素を包括してコントラストを算出する点にあります。
- 空間周波数(フォントの太さとサイズ): 文字が「太くて大きい」ほど、多少コントラストが低くても読めます。逆に「細くて小さい」文字は、高いコントラストが必要です。APCA は、フォントサイズやウェイトと一体化したマトリックスとして合格基準(Lᶜ値)を設定します。
- 背景と前景色(文字)の輝度極性(Polarity): ライトモード(ポジティブ)とダークモード(ネガティブ)で計算式自体を切り替え、背景の明るさに応じた網膜の適応状態を数式に反映します。
- 周囲の環境光とディスプレイ特性: 実質的なディスプレイのガンマ特性に即した、非線形な色変換(べき乗計算)を用いて輝度を算出します。
APCA の算出結果は、Lᶜ 0 から Lᶜ 108(最大はおよそ Lᶜ 120 程度)までの数値で表されます。例えば、一般的な本文テキスト(フォントサイズ 16px、レギュラーウェイト)を読みやすく表示するには、最低でも Lᶜ 60 以上、推奨として Lᶜ 75 以上が必要と定義されています。
実践:Figmaなどのデザインツールでの向き合い方
現在、APCA は WCAG 3.0 の公式規格として議論が進められており、正式な確定まではまだ時間がかかります。しかし、Figma などのデザインツールでは、コミュニティプラグインとして「APCA Contrast Checker」や、標準アクセシビリティツールである Stark がいち早く APCA 対応を開始しています。
デザイナーが今から取り組めるアクションは以下の通りです。
- ダークモードの見直し:
従来の WCAG 2.1 基準をパスするために不自然に浮き上がらせていたダークモードの文字色を、APCA の
Lᶜ 60〜75基準で再検証し、より目に優しく統一感のあるオフホワイトに調整します。 - フォントサイズと色の連動管理: 「このグレーは 14px 以上の太字にのみ使用する」といった、サイズとウェイトに応じたデザインシステムのトークン設計を行います。APCA はサイズとコントラストを切り離さないため、より強固なデザインルールが構築できます。
アクセシビリティとは、数値を機械的にクリアすることではなく、「すべての人に情報を正しく届けること」です。人間の目に忠実な APCA は、その理想に一歩近づくための画期的なイノベーションと言えるでしょう。
お役立ち情報
- APCA Contrast Calculator (英語)
APCAのコントラスト比をブラウザ上でシミュレーションできる公式のオンライン計算ツールです。フォントサイズやウェイトごとの見え方も視覚化できます。 - W3C - WCAG 3.0 草案 (英語)
現在策定が進められている次世代のウェブアクセシビリティ規格「WCAG 3.0」の公式仕様書(ドラフト)です。APCAの導入経緯なども記載されています。 - Digital Agency - ウェブアクセシビリティ導入ガイドブック(日本語)
日本のデジタル庁が公開している、ウェブアクセシビリティの基本方針や実践手順をわかりやすく解説した日本語の公式ガイドブックです。
出典: