より十分なコントラスト:
達成基準 1.4.6 を理解する
1.4.6 より十分なコントラスト: テキスト及び画像化された文字の視覚的な表現には、少なくとも 7:1 のコントラスト比がある。ただし、次の場合は除く: (レベルAAA)
大きな文字: サイズの大きなテキスト及びサイズの大きな画像化された文字には、少なくとも 4.5:1 のコントラスト比がある。
付随的: テキスト又は画像化された文字において、次の場合はコントラストの要件は該当しない。アクティブではないユーザインタフェース・コンポーネントの一部である、装飾だけを目的にしている、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
ロゴタイプ: ロゴ又はブランド名の一部である文字には、コントラストの要件はない。
この達成基準の意図
この達成基準の意図は、(コントラストを強化する支援技術を使用していない)中度のロービジョンの利用者がテキストを読めるように、テキストとその背景とのコントラストを十分に確保することである。色弱ではない利用者にとっては、読解力によって評価されるように (Knoblauch et al., 1991)、色相及び彩度が文字の読みやすさに影響を与えることはほとんど又は全くない。色弱は、輝度コントラストに多少の影響を及ぼす可能性がある。そのため、この勧告では、色弱の利用者にとってもテキストと背景のコントラストが十分になるように、色が主要因とならないような方法でコントラストを算出している。
装飾を目的にしていて、情報を何も伝えていないテキストは対象外である。例えば、背景でランダムに使われている語句があり、その語句を並び替えたり置き換えたりしても意味が変わらないのであれば、それは装飾を目的にしたものであり、この達成基準を満たす必要はない。
サイズの大きいテキスト及び文字の線幅が広めのテキストは、低めのコントラストでも読みやすい。そのため、サイズの大きいテキストに対するコントラスト要件は、低めになっている。そのため、コンテンツ制作者は、特にタイトルなど、ページのデザインにサイズの大きいテキストを用いる際は、より多くの色の中から選ぶことができる。18 ポイントのテキスト又は太字で 14 ポイントのテキストが、低めのコントラストで十分なサイズの大きさとしている(「関連リソース」にある "The American Printing House for the Blind Guidelines for Large Printing and The Library of Congress Guidelines for Large Print" を参照のこと)。「18 ポイント」及び「太字」は、異なるフォントでは異なる意味合いを持つこともあるが、特別に細い線のフォント又は文字の形が分かりにくくなるような独特の見た目や特徴のあるフォントについては対象外とする。とても多くの様々なフォントがあるため、ここでは一般的な基準を用いることとして、用語集にて装飾的なフォント又は細い線のフォントに関する注記を付けている。
注記: フォントの見た目を滑らかにするためにアンチエイリアス処理がされている際は、暗さ又は明るさを損なうことがある。それにより、実際のコントラストが引き下げられる可能性がある。フォントの線幅をより太くすれば、この問題を軽減することになるだろう(細い線のフォントでは文字の端の部分よりもむしろ細い部分を明るくすることができる)。大きめのフォントを用いて、ユーザーエージェントのフォント・スムージング機能をオンにして読みやすさをテストすることを推奨する。
また、前述のテキストに対するコントラストの要件は、達成基準 1.4.5 で述べられているように、画像化された文字(ピクセルで描画され、画像フォーマットで保存された文字)にも適用される。
この要件は、画像化された文字が情報を伝えることを目的としている状況に対して適用される。例えば、写真の中にたまたま入っていた街頭の標識にあるような付随的なテキストは、対象外である。また、何らかの理由で、すべての利用者が視覚的に確認できないことを意図しているテキストも対象外である。企業ロゴのようにデザインされた文字は、代替えテキストを含んでいてもいなくてもページ上ではその機能として扱われるべきである。ロゴやロゴタイプを超えて企業の視覚的なガイドラインには例外は含まれない。
この達成基準には、「意味のあるその他の視覚的なコンテンツを含む写真の一部分である」という例外がある。この例外は、文字の写っている写真と、特定の見た目にするためにテキストと置き換えられた画像化された文字とを区別することを意図している。
この達成基準は、テキスト(文字)だけに適用されるが、図表やグラフで提示されるデータにも似たような問題が起こる。そのようなデータでも、色のコントラストを十分に確保すべきである。
コントラスト比を定めた論理的根拠
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 の視力は、おおよそ 1.5 のコントラスト感度低下と関連付けられているという経験的事実がある[ARDITI-FAYE]。したがって、視力が 20/40 の利用者は、「3 * 1.5 = 4.5:1」のコントラスト比を必要とするであろう。類似した実証的事実及び同じ論理に沿うと、視力が 20/80 の利用者は、約 7:1 のコントラスト比を必要とすることになる。
色相は、色弱の利用者(先天的及び後天的の両方)によって知覚のされ方が様々なため、色及び相対的な輝度コントラストが色弱ではない利用者とは異なる。このため、有効なコントラスト及び読みやすさは、色弱の利用者に対しては異なったものになる。しかし、色弱は多様であるため、(コントラストのために)量的なデータに基づいて有効で一般的な色の組合せを規定することは、適切であるとはいえない。十分な輝度コントラストを要求することで、色の知覚に依存しないコントラストを要求し、この問題に対応している。幸いにも、輝度の寄与のほとんどは、分光感度において大部分が重なる中波長及び長波長の受容体からくるものである。その結果は、有効な輝度コントラストが一般的に特定の色弱に関係なく計算できるということである。ただし、赤色を知覚しにくい1型2色覚の利用者の場合、暗い色(一般的に黒のようである)に対して主に波長の長い色を用いることは除く(この理由から、WCAG ワーキンググループは、黒の背景に赤の前景を使うことを避けるという参考にすべき実装方法を提供している)。より詳細な情報は、[ARDITI-KNOBLAUCH] [ARDITI-KNOBLAUCH-1996] [ARDITI] を参照のこと。
レベル AA で 4.5:1 のコントラスト比を選択したのは、20/40 程度まで視力の低下した利用者におけるコントラスト感度の低下を補うためである(20/40 は約 4.5:1 という計算になる)。また、20/40 は、80歳前後の高齢者の標準的な視力として、よく報告される視力である [GITTINGS-FOZARD]。
レベル AAA で 7:1 のコントラスト比を選択したのは、20/80 程度まで視力の低下した利用者におけるコントラスト感度の低下を補うためである。より視力の弱い利用者は、通常は支援技術を使用して、コンテンツを利用している(その支援技術には、コントラスト増強と画面拡大の機能が搭載されている)。そのため、7:1 というコントラスト比は、一般的に支援技術を使用していないロービジョンの利用者のコントラスト感度の低下を補い、同様に色弱の利用者に対してもコントラストを向上させる。
注記: [ISO-9241-3]、及び、[ANSI-HFES-100-1988]における計算は、本文のテキストを想定したものである。それよりもずっと大きいサイズのテキストに対しては、緩いコントラスト比が提供されている。
計算式に関する注記
RGB 値の非線形から線形への変換は、IEC/4WD 61966-2-1 [IEC-4WD]及び "A Standard Default Color Space for the Internet - sRGB" [sRGB]に基づいている。
コントラストの計算式(L1/L2)は、[ISO-9241-3]及び[ANSI-HFES-100-1988]の標準規格に基づいている。
ANSI/HFS 100-1988 は、L1 及び L2 の計算に含めるために、周辺光からの寄与を必要としている。用いている 0.05 という値は、[IEC-4WD]の Typical Viewing Flare 及び 論文[sRGB](M. Stokes et al) に基づいている。
この達成基準及びその定義では、ウェブコンテンツが光自体を発するわけではないという事実を反映するために、「輝度」ではなく、「コントラスト比」及び「相対輝度」という用語を用いている。コントラスト比は、コンテンツが表示されたときに生じる相対輝度の評価基準(尺度)を与える(それは、比率なので、無次元である)。
注記 1: コントラスト比を用いてウェブコンテンツのコントラストを分析するツールの一覧は、関連リソースを参照のこと。
注記 2: キーボード・フォーカスを示すための実装方法については、 達成基準 2.4.7 視覚的に認識可能なフォーカスを理解するも参照のこと。
達成基準 1.4.6 の具体的なメリット
ロービジョンの利用者は、背景とのコントラストが不十分なテキストを読むのが困難なことがよくある。利用者が色弱でコントラストがさらに弱まってしまう場合には深刻になりえる。テキストと背景に最低限のコントラスト比を持たせることで、たとえ利用者がすべての色を見ることができなかったとしても、テキストをより読みやすくすることができる。また、まれであるが、全く色が見えないという利用者にとっても有用である。
達成基準1.4.6 の事例
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
達成基準1.4.6 の実装方法及び不適合事例 - より十分なコントラスト
この節にある番号付の項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する実装方法、又は複数の実装方法の組合せを表している。WCAG 2.0 適合要件のすべてが満たされている場合にのみ、次に挙げる実装方法により、この達成基準を満たすことができる。
達成基準を満たすことのできる実装方法
使用法: そのコンテンツに合致する状況を以下から選択すること。それぞれの状況には、WCAG ワーキンググループがその状況において十分であると判断する、番号付の実装方法(又は、実装方法の組合せ)がある。
達成基準 1.4.6 でさらに対応が望まれる実装方法(参考)
適合するためには必須ではないが、コンテンツをよりアクセシブルにするためには、次の付加的な実装方法もあわせて検討するとよい。ただし、すべての状況において、すべての実装方法が使用可能、または効果的であるとは限らない。
G156: 一般に入手可能なユーザーエージェントで、テキストのブロックの前景及び背景を変更できるウェブコンテンツ技術を用いる
模様のある背景にはよりハイコントラストな値の文字を用いる(リンク追加予定)
画像化された文字の代わりにUnicodeテキストとスタイルシートを用いる(リンク追加予定)
ダイヤグラムの線にハイコントラストな値を用いる(リンク追加予定)
赤と黒の組み合わせによる文字と背景色には、さらに大きなコントラストレベルを用いる
主に中間のスペクトル要素からなる明るい要素とスペクトルの両端(青と赤の波長)からなる暗い要素で構成された色を用いる
両端のコントラストではなく、黒文字に白の背景よりも明るいパステルの背景色を用いる(リンク追加予定)
テキストのコントラスト規定を満たしているシンプルな線で描かれたアイコンを使う(リンク追加予定)
グラフやチャートに十分な色コントラストを提供する(リンク追加予定)
デフォルトから3:1のコントラスト比又はそれよりも高い比率を用いる(リンク追加予定)
空のテキストフィールドに十分な色のコントラストを提供する(リンク追加予定)
達成基準 1.4.6 のよくある不適合事例
以下に挙げるものは、WCAG ワーキンググループが達成基準 1.4.6 に適合していないとみなした、よくある不適合事例である。
重要な用語
- コントラスト比
(L1 + 0.05) / (L2 + 0.05) ここでは、
注記 1: コントラスト比は、1~21の範囲になりうる(通常は、1:1~21:1と記述される)。
注記 2: コンテンツ制作者は、テキストのレンダリング(例:フォントのスムージングやアンチエイリアス)に関する利用者の設定を制御できないため、アンチエイリアスをオフにした状態でテキストのコントラスト比を評価してもよい。
注記 3: 達成基準 1.4.3 および 1.4.6 の目的上、コントラストは通常の使用においてテキストがレンダリングされるときに指定されている背景色に対して測定する。もし背景色の指定がない場合は、背景色には白を想定する。
注記 4: 背景色は、テキストが通常の使用においてレンダリングされるときに背景となるコンテンツの色として指定された色である。テキストの色は指定されているが背景色が指定されていない場合、利用者のデフォルトの背景色は未知であり、コントラストが十分かどうかを評価することができないため、問題がある。同じ理由で、背景色が指定されているがテキストの色が指定されていない場合も問題がある。
注記 5: 文字の周囲に縁取りがある場合、その縁取りがコントラストを強めることもあり、文字とその背景色におけるコントラストの計算に用いられる。ただし、文字の周囲の細い縁取りは文字として扱われる。文字の周囲の太い縁取りが、かさ(暈:ハローや後光、ドロップ車道、光彩など)のようになって、文字の細かい字画を埋めていれば、背景色として考慮されることになる。
注記 6: WCAG に適合しているか判断する場合は、典型的な表現において隣接するであろうと制作者が想定するコンテンツで指定された色の組み合わせについて評価しなければならない。制作者は、ユーザエージェントによる色の変更などのように通常とは異なる表現を考慮する必要はない。ただし、それが制作者のソースコードによって起こる場合は除く。
- サイズの大きな(テキスト)
少なくとも18ポイント、又はは14ポイントの太字。あるいは、中国語、日本語、そして韓国語のフォントは、それと同等の文字サイズ。
注記 1: 特別に細い線のフォント、又は文字の形が分かりにくくなるような独特の見た目や特徴のあるフォントは、コントラストが低い場合に特に読みづらい。
注記 2: ここでいう文字サイズは、コンテンツが提供される際のサイズであり、利用者によるサイズ変更は含まれない。
注記 3: 文字の実際のサイズは、コンテンツ制作者が指定したサイズとユーザのディスプレイあるいはユーザエージェントの設定の両方に依存している。多くの主流となっている本文テキストで用いられるフォントにおいて、本文テキストのデフォルトのサイズは、14ポイントと18ポイントは、1.2emと1.5em、または、(本文フォントが100%であると仮定して)デフォルトサイズの120%と150%に、おおよそ同等である。しかし、制作者は、使用する特定のフォントについて、このことをチェックしておく必要がある。フォントが相対単位で定義されている時、実際に表示される文字サイズのポイント数は、ユーザエージェントによって計算される。この達成基準について評価する時には、文字サイズのポイント数は、ユーザエージェントから取得されるべきであり、またはユーザエージェントが行うフォントの計算基準に基づいて計算するべきである。ロービジョンの利用者については、自分で適切な設定を選択することを想定している。
注記 4: フォントサイズを指定せずにテキストを用いる際は、サイズを指定していないテキストに対して主要ブラウザで用いられる最小のフォントサイズをそのテキストのサイズとみなすのが妥当であろう。もし、レベル1の見出しが、主要なブラウザで14ポイントの太字あるいはそれ以上のサイズでレンダリングされるならば、それは「サイズの大きな」テキストであると考えてよい。相対的な拡大縮小は、同様の方法でそのデフォルトのサイズから算出することが可能である。
注記 5: 半角の英数字のテキストにおける18ポイントおよび14ポイントのサイズは、拡大印刷の最小サイズ(14ポイント)と標準的な大きい文字サイズ(18ポイント)に基づいている。例えば、中国語、日本語、韓国語など、その他の文字については、「同等な」サイズはその言語での拡大印刷の最小サイズと拡大印刷でその次に大きな標準のサイズとなる。
訳注: 日本語を含む場合、少なくとも22ポイント、又は18ポイントの太字と考えるとよい。
- テキスト
- ユーザインターフェース・コンポーネント
特定の機能を果たすための単一のコントロールとして利用者が知覚する、コンテンツの一部分。
注記 1: 複数のユーザインターフェース・コンポーネントが、単一のプログラムで実装されることがある。ここでいうコンポーネントは、プログラムに関するものではなく、別々のコントロールとして利用者が知覚するものを指す。
注記 2: ユーザインターフェース・コンポーネントには、スクリプトで生成されるコンポーネントやフォーム要素、リンクが含まれる。
事例 : アプレットには、コンテンツ内を行ごと、ウェブページごと、又はランダム・アクセスを行うために用いられる「コントロール」がある。これらには、いずれも識別名を割り当て、個別に設定できるようにする必要があるため、それぞれが「ユーザインターフェース・コンポーネント」となる。
- 画像化された文字
特定の視覚的効果を得るために非テキスト形式(例えば、画像)でレンダリングされたテキスト。
注記: これには、重要なその他の視覚的なコンテンツを含む画像の一部であるテキストは含まれない。
事例 : 写真に写っている人の名札にある人名は含まれない。
- 装飾だけを目的
美的な目的だけを果たしていて、情報は提供せず、機能性も備えていない。
注記: その単語を手直ししたり置き換えたりしてもその目的が変わらないのであれば、テキストは単に装飾だけを目的にしたものといえる。
事例 : 背景にとても淡い文字で単語がランダムに並んでいる辞書の表紙。