このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
コントラストは判読性の基盤です。字形がどれほど美しく描かれ、ゆとりのある字間で組まれ、快適なサイズで設定されていても、背景からくっきりと分離しなければ意味をなしません。2005年の時点では、「明るい地に濃い文字、そして両者の間に十分な差を」という以上のことはほとんど言えませんでした。今日ではコントラストは測定可能でテスト可能なものとなり、多くの法域で法律に組み込まれています。そして測定手法そのものが本格的な研究の対象となっています。
WCAG 2.x のコントラストモデル
Web Content Accessibility Guidelines 2.x は、コントラストを2色の相対輝度の比として定義しており、1:1(同一)から21:1(純白に純黒)までの範囲を取ります。これを適用する達成基準は3つあります。
- 1.4.3 コントラスト(最低限)、レベルAA — 本文は4.5:1に達しなければなりません。大きなテキスト(おおよそ24ピクセル、または太字で19ピクセル)は3:1まで下げることができます。
- 1.4.6 コントラスト(高度)、レベルAAA — 本文は7:1、大きなテキストは4.5:1。中程度のロービジョンの読者を想定した基準です。
- 1.4.11 非テキストのコントラスト、レベルAA — インターフェイス部品や意味を持つグラフィックに3:1。入力欄の枠線、フォーカスインジケーター、アイコン、図表の要素などが対象です。
計算式が及ばないところ
WCAG 2.x の計算式は物理的な尺度であって知覚的な尺度ではなく、その限界は今やワーキンググループ自身によって十分に文書化されています。この比率は極性を対称に扱います。つまり黒地に白と白地に黒を同一のスコアにしますが、目は両者を同一には知覚しません。フォントのウエイトとサイズについては、粗い「大きなテキスト」という単一の閾値でしか扱えず、16ピクセルの細いライト書体と同じ比率の太字書体とでは読み心地が大きく異なります。さらに範囲の暗い側の端では、人間の観察者が弱いと判断する色の組み合わせを合格にし、許容できると読める組み合わせを不合格にすることがあります。
APCA という研究の方向性
WCAG 3.0 に向けたドラフト作業には、候補となる後継手法、Accessible Perceptual Contrast Algorithm(APCA)が含まれています。これは W3C の視覚コントラスト研究を通じて開発されたものです。2.x のモデルとは3つの重要な点で異なります。純粋な輝度ベースではなく知覚ベースであること。極性を認識し、暗地に明と明地に暗を別々にスコアリングすること。そして閾値がフォントサイズとウエイトに応じてスケールするため、繊細なヘアラインの書体はしっかりした本文用書体よりも厳しい基準で評価されることです。
APCA は依然としてドラフト段階の方向性であり、適合基準ではありません。当面の実践的な立場はこうです。WCAG 2.x に適合し、そのうえで APCA 的な考え方 — ウエイトとサイズが重要であり、極性が重要である — をデザイン判断の層として重ねることです。
コントラストは高ければ良いとは限らない
コントラストを最大まで上げるダイヤルのように扱いたくなるのは自然なことです。ロービジョンの多くの読者にとって、最大限のコントラストは実際に助けになります。しかし無視できない少数の読者にとっては害になります。非常に高いコントラスト — とりわけ純黒地に純白の文字 — はハレーション、つまり字形の周囲に生じるにじみや光のもやを引き起こします。乱視や光過敏のある読者では特に顕著です。ディスレクシアや視覚ストレスのある読者の中には、真っ白な地に真っ黒な文字はきつく感じると報告し、オフホワイトの面にほぼ黒の文字といった、わずかに和らげた地を好む人もいます。
ここでの教訓は、コントラストを最低基準より下げることではありません。コントラスト要件が定めるのは床であり、優れたタイポグラフィは天井に向かって突き進むのではなく、その床より上の範囲で仕事をするということです。温かみのあるオフホワイトに非常に濃いグレーのようなほぼ黒の文字は、AAAに余裕をもって合格し、#000 に #FFF よりも穏やかに読めます。さらに良いのは、読者自身に選ばせる仕組みです。prefers-contrast メディアクエリは、ユーザーがオペレーティングシステムに対してより高い(あるいは低い)コントラストを求めたことを報告し、スタイルシートは文字色を強め、枠線を太くし、装飾的な半透明効果を取り除くことで応答できます。Windows の強制カラーモードはさらに進んで、ユーザー自身のパレットで置き換えます。デザインはこれと戦うのではなく、受け入れられるように作るべきです。
意味を色相だけに担わせない
男性のおよそ12人に1人、女性ではそれよりずっと少ない割合の人が、何らかの色覚多様性を持っています。最も一般的なのは赤と緑の区別の困難です。WCAG 1.4.1(色の使用)は彼らのために存在します。色は意味を補強してもよいが、単独で意味を担ってはならない、というものです。本文と色相だけで区別されたリンクは多くの読者には見えません — 下線を併用してください。赤い枠線だけで示されるエラー状態には、アイコンやメッセージも必要です。系列が色相だけで区別されるグラフには、ラベル、パターン、あるいは直接の注記が必要です。
これは古くからの印刷の原則が新しい装いをまとったものです。20世紀の情報デザイナーたちは、コピー機で複写しても判読できる地図こそが優れた地図であることを知っていました。ページがグレースケールで見られるかもしれないという前提でデザインしてください。一部の読者にとっては、実質的にそうなのですから。
この章が新しく設けられた理由
このガイドラインの初版が書かれた当時、WCAG 2.0 はまだ公開されておらず、引用できる数値的なコントラスト要件も、それをテストするブラウザーのツールも、読者がコントラストの好みを伝えるためのメディアクエリも存在しませんでした。その後の20年間で、4.5:1 という基準、その法的採用、計算式への一連の批判、そして WCAG 3.0 ドラフトの中で形を成しつつある知覚ベースの後継手法が生まれました。コントラストは好みの問題から測定の問題へと移り — そしてさらに有益なことに、測定はどうあるべきかという議論へと進んだのです。
CSSでは
:root {
--ink: #1f1a13;
--paper: #f6f1e7; /* ≥ 4.5:1 against ink (WCAG 1.4.3) */
--accent: #b03a10; /* check at the size and weight it's used */
}
@media (prefers-contrast: more) {
:root { --ink: #000; --paper: #fff; }
}推奨事項
- WCAG 1.4.3(本文で4.5:1)を絶対的な床として満たすこと。読者層が高齢者やロービジョンに偏る場合は 1.4.6(7:1)を目指すこと。
- 1.4.11 を適用すること。フォーカスインジケーター、入力欄の枠線、意味を持つアイコンには周囲に対して3:1が必要です。
- 細い書体やライトな書体は、比率だけが示すよりも厳しく判断すること。ウエイトとサイズは実効的なコントラストを変えます。
- 長文の読書では純黒地に純白を避けること。柔らかいオフホワイトに非常に濃いグレーは、適合性を犠牲にすることなくハレーションを軽減します。
- 色相だけに意味を担わせないこと — リンクには下線を、状態にはラベルを、グラフには注記を。
prefers-contrastをサポートし、強制カラーモードは上書きするのではなく受け入れること。- WCAG 3.0 ドラフトにおける APCA の動向を追いつつ、今日は 2.x に適合すること。