達成基準 1.4.6: コントラスト (高度) を理解する

達成基準 1.4.6 コントラスト (高度) (レベル AAA): テキスト及び文字画像の視覚的提示には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く:

大きな文字

サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 4.5:1 のコントラスト比がある。

付随的

テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。

ロゴタイプ

ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

意図

この達成基準の意図は、(コントラストを強化する支援技術を使用していない) 中度のロービジョンの人がテキストを読めるように、テキストとその背景との間に十分なコントラストを提供することである。読解力で評価すると、色覚異常ではない人にとって、色相及び彩度は文字の読みやすさにほとんど又は全く影響がない (Knoblauch et al.,1991)。色覚異常は、輝度コントラストに多少の影響を及ぼす可能性がある。したがって、WCAG 2.0 勧告では、色覚異常の人でもテキストと背景との間の適切なコントラストを持つように、色が主要因とならないような方法でコントラストを算出している。

装飾的及び情報を伝えないテキストは除外される。例えば、背景を作成するためにランダムな単語が使用され、かつその単語を意味を変えずに並べ替え又は置換できる場合、これは装飾的であり、この達成基準を満たす必要はない。

より大きい及びより広い文字ストロークを持つテキストは、より低いコントラストでも読みやすい。したがって、より大きいテキストに対するコントラスト要件は、より低い。これにより、コンテンツ制作者は、より大きいテキストに対して幅広い色の選択肢を使用することができ、ページ、特にタイトルのデザインに役立つ。18 ポイントのテキスト又は 14 ポイントの太字のテキストは、より低いコントラスト比を要求するのに十分な大きさであると判断される (関連リソースにある "The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large Print"を参照のこと)。「18 ポイント」と「太字」の両者は、異なるフォントでは異なる意味合いを持つこともあるが、極めて細い線のフォント又は特異なフォントを除き、十分である。非常に多くの様々なフォントがあるため、ここでは一般的な基準を用いることとして、用語集にて装飾的なフォント又は細い線のフォントに関する注記を付けている。

注記

この達成基準について評価する時には、文字サイズのポイント数は、ユーザエージェントから取得されるべきであり、又はユーザエージェントが行うフォントの計算基準に基づいて計算するべきである。ポイント数は、CSS3 Values で定義されている CSS の pt サイズに基づいている。ポイント数と CSS ピクセルの比は 1pt = 1.333px であり、したがって 14pt と 18pt は約 18.5px と 24px に相当する。

フォントの見た目を滑らかにするためにアンチエイリアス処理がされている際は、暗さ又は明るさを損なうことがある。それにより、実際のコントラストが引き下げられる可能性がある。フォントの線幅をより太くすれば、この問題を軽減することになるだろう (細い線のフォントでは文字の端の部分よりもむしろ細い部分を明るくすることができる)。大きめのフォントを用いて、ユーザエージェントのフォントスムージング機能をオンにして読みやすさをテストすることを推奨する。

画像編集アプリケーションによってデフォルトとなるピクセル密度が異なるため (例: 72 PPI 又は 96 PPI)、特定のサイズでテキストを提示する場合、画像編集アプリケーション内部からフォントのポイント数を特定することは信頼性に欠ける。サイズの大きな文字画像を作成する場合、コンテンツ制作者は画面に表示される画像の文字が、ブラウザによってレンダリングされる本文のテキストの標準サイズの 1.2em 及び 1.5em 又は 120% 及び 150% におおよそ相当することを確認すべきである。

この達成基準で言及されている 3:1 及び 4.5:1 のコントラスト比は、閾値として扱われることを意図している。算出されたコントラスト比を達成基準のコントラスト比と比較する場合、算出された値は丸めるべきではない(例えば、4.499:1 は 4.5:1 という閾値を満たさない)。

前述のテキストに対するコントラストの要件は、達成基準 1.4.5 で述べられているように、文字画像 (ピクセルでレンダリングされ、画像フォーマットで保存された文字) にも適用される。

この要件は、文字画像がテキストとして理解されることを意図した状況に適用される。たまたま道路標識が入った写真などの付随的なテキストはこの例外には含まれない。なんらかの理由で、すべての利用者に見えないように設計されているテキストも含まれない。企業のロゴなどの図案化されたテキストは、ページ上の機能の観点から取り扱われるべきであり、これは、テキストによる代替でコンテンツを含むことを保証するかもしれないし、保証しないかもしれない。ロゴ及びロゴタイプの範囲を超える企業の視覚的なガイドラインは含まれない。

この達成基準には、「意味のあるその他の視覚的なコンテンツを含む写真の一部分である」という例外がある。この例外は、特定の見た目にするためにテキストを置き換えるための文字画像から、テキストのある写真を区別することを意図している。

この達成基準はテキストだけに適用されるが、同様の問題は、チャート、グラフ、ダイアグラム、及び他のテキストベースでない情報で提示されるコンテンツにおいても生じることであり、達成基準 1.4.11 非テキストのコントラストでカバーされている。

コントラスト比を定めた論理的根拠

3:1 のコントラスト比は、標準的なテキスト及び視力における [ISO-9241-3] 及び [ANSI-HFES-100-1988] によって推奨されている最低限のレベルである。達成基準 1.4.3 で用いられる 4.5:1 のコントラスト比は、中度の弱い視力、先天的又は後天的な色覚異常、あるいは加齢に伴うコントラスト感度の衰えに起因する、コントラスト感度の低下を考慮している。

論理的根拠は、a) ANSI 標準規格 (American National Standards Institute: 米国の国家規格) における正常な観察者に対する最低限の許容可能なコントラストとして、コントラスト比 3:1 の採用、及びb)集団内では、20/40 (0.5) の視力は、おおよそ 1.5 のコントラスト感度低下と関連付けられているという経験的事実 [ARDITI-FAYE] に基いている。したがって、視力が 20/40 (0.5) の利用者は、「3 * 1.5 = 4.5:1」のコントラスト比を必要とするであろう。類似した実証的事実及び同じ論理に沿うと、視力が 20/80 (0.25) の利用者は、約 7:1 のコントラスト比を必要とすることになる。

色相は、色覚異常 (先天性及び後天性の両方) をもつ利用者によって、通常の目の見える利用者とは異なる色及び相対的な輝度コントラストを結果としてもたらすように、異なって知覚される。このため、有効なコントラスト及び読みやすさは、人々によって異なる。しかし、色覚異常は非常に多様であるため、定量的なデータに基づく (コントラストのための) 有効で一般的な色の組み合わせを規定することは、実現不可能である。十分な輝度コントラストを要求することは、色の知覚から独立したコントラストを要求することによって、これに対応している。幸いにも、輝度の寄与のほとんどは、分光応答で大部分が重なる中波長及び長波長の受容体からのものである。その結果、有効な輝度コントラストが一般的に、特定の色覚異常に関係なく計算できる。ただし、赤色を知覚しにくい 1 型 2 色覚の人の場合、暗い色 (一般に黒に見える) に対して主に長波長の色を用いることは除く (この理由のために、WCAG ワーキンググループは、黒の背景色に赤の前景色を使うことを避ける参考達成方法を提供している)。詳細については、[ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI] を参照のこと。

4.5:1 のコントラスト比は、約 20/40 (0.5) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、レベル AA に対して選択された。20/40 (0.5) は、80 歳前後の高齢者の典型的な視力として、よく報告される視力である。[[GITTINGS-FOZARD]]

7:1 のコントラスト比は、約 20/80 (0.25) の視力に等しい視覚損失をもつ利用者によって通常経験されるコントラスト感度の低下を埋め合わせをするため、レベル AAA に対して選択された。この程度の視覚損失を超える人は、通常、コンテンツにアクセスするために支援技術を使用する (そして、支援技術は通常、コントラストの強化と画面の拡大機能が組み込まれている)。したがって、7:1 のレベルは、一般に支援技術を使用していないロービジョンの利用者によって経験されるコントラスト感度の低下に対する補償を提供し、同様に色覚異常の利用者に対してもコントラストの強化を提供する。

注記

[ISO-9241-3] 及び [ANSI-HFES-100-1988] における計算は、本文のテキストのためのものである。それよりもはるかに大きいサイズのテキストに対しては、緩やかなコントラスト比が提供されている。

計算式に関する注記

RGB 値の非線形から線形への変換は、IEC/4WD 61966-2-1 [IEC-4WD] に基づいている。

コントラストの計算式 (L1/L2) は、[ISO-9241-3] 及び [ANSI-HFES-100-1988] 規格に基づいている。

ANSI/HFS 100-1988 規格では、L1 及び L2 の計算を含むために、周辺光からの寄与を必要とする。用いている 0.05 という値は、[IEC-4WD] の Typical Viewing Flare に基づいている。

この達成基準及びその定義では、ウェブコンテンツが光そのものを放たないという事実を反映するために、「輝度」ではなく、「コントラスト比」及び「相対輝度」という用語を用いている。コントラスト比は、コンテンツが表示されたときに生じる相対輝度の評価基準 (尺度) を与える。(比率なので無次元である)

注記

コントラスト比を用いてウェブコンテンツのコントラストを分析するツールの一覧は、関連リソースを参照のこと。

キーボードフォーカスを表示するための達成方法については、2.4.7 フォーカスの可視化も参照のこと。

メリット

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の達成方法 (又は、達成方法の組み合わせ) がある。

状況 A: 太字でないテキストが 18 ポイント未満、太字のテキストが 14 ポイント未満の場合:

  1. G17: テキスト (及び文字画像) とその背景の間に、少なくとも 7:1 のコントラスト比を確保する
  2. G148: 背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない
  3. G174: 利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する

状況 B: 太字でないテキストが少なくとも 18 ポイント以上、太字のテキストが少なくとも 14 ポイント以上の場合:

  1. G18: テキスト (及び文字画像) とその背景の間に、少なくとも 4.5:1 のコントラスト比を確保する
  2. G148: 背景色及び文字色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない
  3. G174: 利用者が十分なコントラストのある提示に切り替えられるように、十分なコントラスト比のあるコントロールを提供する

参考達成方法

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

重要な用語

支援技術 (assistive technology)

障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び/又はソフトウェア。

注記

支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。

注記

支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。

注記

主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。

この文書の文脈において重要な支援技術としては、以下のものが挙げられる:

  • 画面拡大ソフト及びその他の視覚的な表示に関する支援技術。視覚障害、知覚障害、及び読書困難などの障害のある人が、レンダリング後のテキスト及び画像の視覚的な読みやすさを改善するために、テキストのフォント、サイズ、間隔、色、音声との同期などを変更するのに使用している。
  • スクリーンリーダー。全盲の人がテキスト情報を合成音声あるいは点字で読み取るために使用している。
  • 音声変換ソフトウェア。認知障害、言語障害、及び学習障害のある人が、テキストを合成音声に変換するために使用している。
  • 音声認識ソフトウェア。何らかの身体障害のある利用者が使用することがある。
  • 代替キーボード。特定の身体障害のある人がキーボード操作をシミュレートするのに使用している (ヘッドポインタ、シングルスイッチ、呼気・吸気スイッチ、及びその他の特別な入力デバイスを使った代替キーボードを含む)。
  • 代替ポインティングデバイス。特定の身体障害のある人がマウスポインタとボタンの動きをシミュレートするのに使用している。
コントラスト比 (contrast ratio)

(L1 + 0.05) / (L2 + 0.05) ここでは、

  • L1 は、明るいほうの色の相対輝度である。そして、
  • L2 は、暗いほうの色の相対輝度である。
注記

コントラスト比は、1~21 の範囲になりうる (通常は、1:1~21:1 と記述される)。

注記

コンテンツ制作者は、テキストのレンダリング (例: フォントのスムージングやアンチエイリアス) に関する利用者の設定を制御できないため、アンチエイリアスをオフにした状態でテキストのコントラスト比を評価してもよい。

注記

達成基準 1.4.3 及び 1.4.6 の目的上、コントラストは通常の使用においてテキストがレンダリングされるときに指定されている背景色に対して測定する。もし背景色の指定がない場合は、背景色には白を想定する。

注記

背景色は、テキストが通常の使用においてレンダリングされるときに背景となるコンテンツの色として指定された色である。テキストの色は指定されているが背景色が指定されていない場合、利用者のデフォルトの背景色は未知であり、コントラストが十分かどうかを評価することができないため、失敗例となる。同じ理由で、背景色が指定されているがテキストの色が指定されていない場合も失敗例となる。

注記

文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、光彩のようになって、文字の内側の細部を塗りつぶしていれば、背景色として考慮されることになる。

注記

WCAG に適合しているか判断する場合は、典型的な提示において隣接するであろうと制作者が想定するコンテンツで指定された色の組み合わせについて評価しなければならない。制作者は、ユーザエージェントによる色の変更などのように通常とは異なる提示を考慮する必要はない。ただし、それが制作者のコードによって起こる場合は除く。

自然言語 (human language)

人間とコミュニケーションをとるために話される、書かれる、又は (視覚的もしくは触覚的な手段で) 手話にされる言語。

注記

手話も参照。

文字画像 (image of text)

特定の視覚的効果を得るために非テキスト形式 (例えば画像) でレンダリングされたテキスト。

注記

テキスト以外の部分が重要な視覚的コンテンツである場合、画像に含まれるテキストは該当しない。

写真に写っている人の名札にある人名。

サイズの大きな (テキスト) (large scale (text))

少なくとも 18 ポイント、又は 14 ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。

注記

特別に細い線のフォント、又は文字の形が分かりにくくなるような独特の見た目や特徴のあるフォントは、コントラストが低い場合に特に読みづらい。

注記

ここでいう文字サイズは、コンテンツが提供される際のサイズであり、利用者によるサイズ変更は含まれない。

注記

利用者が目にする文字の実際のサイズは、コンテンツ制作者が指定したサイズと利用者のディスプレイあるいはユーザエージェントの設定の両方に依存している。多くの主流となっている本文テキストで用いられるフォントにおいて、14 ポイントと 18 ポイントは、1.2em と 1.5em、又は、 (本文フォントが 100%であると仮定して) デフォルトサイズの 120%と 150%に、おおよそ同等である。しかし、制作者は、使用する特定のフォントについて、このことをチェックしておく必要がある。フォントが相対単位で定義されている時、実際に表示される文字サイズのポイント数は、ユーザエージェントによって計算される。この達成基準について評価する時には、文字サイズのポイント数は、ユーザエージェントから取得されるべきであり、又はユーザエージェントが行うフォントの計算基準に基づいて計算するべきである。ロービジョンの利用者については、自分で適切な設定を選択することを想定している。

注記

フォントサイズを指定せずにテキストを用いる際は、サイズを指定していないテキストに対して主要ブラウザで用いられる最小のフォントサイズをそのテキストのサイズとみなすのが妥当であろう。もし、レベル 1 の見出しが、主要なブラウザで 14 ポイントの太字あるいはそれ以上のサイズでレンダリングされるならば、それは「サイズの大きな」テキストであると考えてよい。相対的な拡大縮小は、同様の方法でそのデフォルトのサイズから算出することが可能である。

注記

半角の英数字のテキストにおける 18 ポイント及び 14 ポイントのサイズは、拡大印刷の最小サイズ (14 ポイント) と標準的な大きい文字サイズ (18 ポイント) に基づいている。例えば、CJK 言語のようなその他の文字については、「同等な」サイズはその言語での拡大印刷の最小サイズと拡大印刷でその次に大きな標準のサイズとなる。

訳注

日本語の全角文字の場合は、拡大教科書普及推進会議 第一次報告「第2章 拡大教科書の標準的な規格について」に基づき、22 ポイント又は 18 ポイントの太字を「同等な」サイズとみなすのが妥当である。

ポイント数と CSS ピクセルの比は 1 pt = 1.333 px であり、したがって 22 pt と 18 pt は約 29 px と 24 px に相当する。

プログラムによる解釈 (programmatically determined)

支援技術を含む様々なユーザエージェントが抽出でき、利用者に様々な感覚モダリティで提示できるような形のデータがコンテンツ制作者によって提供されたとき、そのデータがソフトウェアによって解釈されること。

マークアップ言語で、一般に入手可能な支援技術が直接アクセスできる要素と属性から解釈される。

非マークアップ言語の技術特有のデータ構造から解釈され、一般に入手可能な支援技術がサポートするアクセシビリティ API を通じて支援技術に提供される。

純粋な装飾 (pure decoration)

見栄えのためだけのもので、情報は提供せず、機能性も備えていないもの。

注記

テキストが純粋な装飾といえるのは、単語を並べ替え、又は置き換えても意図が変わらないときだけである。

背景にとても淡い文字で単語がランダムに並んでいる辞書の表紙。

相対輝度 (relative luminance)

最も暗い黒を 0 に、最も明るい白を 1 に正規化した色空間内の任意の点の相対的な明るさ。

注記

sRGB 色空間においては、色の相対輝度は、L = 0.2126 * R + 0.7152 * G + 0.0722 * B と定義されており、RG 及び B は以下のように定義される:

  • RsRGB <= 0.04045 の場合 R = RsRGB/12.92 、そうでない場合 R = ((RsRGB+0.055)/1.055) ^ 2.4
  • GsRGB <= 0.04045 の場合 G = GsRGB/12.92 、そうでない場合 G = ((GsRGB+0.055)/1.055) ^ 2.4
  • BsRGB <= 0.04045 の場合 B = BsRGB/12.92 、そうでない場合 B = ((BsRGB+0.055)/1.055) ^ 2.4

そして、RsRGB、GsRGB、及び BsRGB は、次のように定義される:

  • RsRGB = R8bit/255
  • GsRGB = G8bit/255
  • BsRGB = B8bit/255

^ という記号は、指数演算子である(計算式は、[SRGB] を参考にしている)。

注記

2021 年 5 月以前は、定義にある 0.04045 の値が異なっていた (0.03928)。これは、古いバージョンの仕様から取り込んだものであり、現在は更新されている。本ガイドラインの文脈における計算には、実質的な影響はない。

注記

ウェブコンテンツを閲覧するのに今日用いられているほとんどすべてのシステムは、sRGB 符号化を前提としている。コンテンツを処理して表示するのに別の色空間が用いられている事が分かっているのでない限り、コンテンツ制作者は sRGB 色空間を用いて検証するべきである。もしその他の色空間を用いるのであれば、達成基準 1.4.3 を参照。

注記

表示時にディザリングが発生する場合は、元の色の値が用いられる。元々ディザリングがかけられている色については、用いられている色の平均値を用いるべきである (R の平均値、G の平均値、及び B の平均値)。

注記

コントラストと閃光を検証する際に、この計算を自動で行うツールが利用できる。

注記

MathML を用いて相対輝度の定義を与える別のページでもこの計算式を表示できる。

手話 (sign language)

意味を伝えるために、手と腕の動き、顔の表情又は身体の姿勢の組み合わせを用いる言語。

テキスト (text)

プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。

ユーザエージェント (user agent)

ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。

ウェブコンテンツの取得、レンダリング及びインタラクションを支援する、ウェブブラウザ、メディアプレーヤ、プラグイン、及びその他のプログラム (支援技術も含む)。

ユーザインタフェース コンポーネント (user interface component)

コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。

注記

複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいう「コンポーネント」は、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。

注記

ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。

注記

ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインタフェース要素」とも呼ばれる。

アプレットには、コンテンツ内を行単位、ページ単位、又はランダムアクセスで移動するために用いられる「コントロール」がある。これらには、いずれも名前 (name) を割り当て、個別に設定できるようにする必要があるため、それぞれが「ユーザインタフェース コンポーネント」となる。


訳注: このページは、2022 年 9 月 2 日版の Understanding WCAG 2.1 の翻訳です。2022 年 9 月 2 日版の原文は WAIC の管理するレポジトリから入手可能です。