WCAG 2.0 解説書

本文へジャンプ

-

コントラスト (高度) :
達成基準 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: この達成基準を評価する際、文字サイズのポイント数は、ユーザエージェントから取得されるべきであり、又はユーザエージェントが行うフォントの計算基準に基づいて算出されるべきである。ポイント数は、CSS3 Values で定義されている CSS の pt サイズに基づいている。 ポイント数と CSS ピクセルの比は 1pt = 1.333px であり、14pt と 18pt は約 18.5px と 24px に相当する。

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

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

また、前述のテキストに対するコントラストの要件は、達成基準 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 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。

十分な達成方法

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

状況 A: 太字でないテキストが 18 ポイント (日本語は 22 ポイント) 未満、太字のテキストが 14 ポイント (日本語は 18 ポイント) 未満の場合:

  1. G17: テキスト(及び画像化された文字)とその背景の間に、少なくとも 7:1 以上のコントラスト比をもたせる

  2. G148: 背景色及びテキストの色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない

  3. G174: 十分なコントラスト比のあるコントロールを提供して、利用者が十分なコントラストのある表現に変換できるようにする

  4. SL13: Providing A Style Switcher To Switch To High Contrast (Silverlight)

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

  1. G18: テキスト(及び画像化された文字)とその背景の間に、少なくとも 4.5:1 以上のコントラスト比をもたせる

  2. G148: 背景色及びテキストの色を指定せず、その初期設定を変更するウェブコンテンツ技術の機能を使用しない

  3. G174: 十分なコントラスト比のあるコントロールを提供して、利用者が十分なコントラストのある表現に変換できるようにする

  4. SL13: Providing A Style Switcher To Switch To High Contrast (Silverlight)

1.4.6 でさらに対応が望まれる達成方法 (参考)

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

  • G156: 一般に入手可能なユーザエージェントで、テキストのブロックの前景及び背景を変更できるウェブコンテンツ技術を使用する

  • 模様のある背景にはよりハイコントラストな値の文字を用いる(リンク追加予定)

  • 画像化された文字の代わりにUnicodeテキストとスタイルシートを用いる(リンク追加予定)

  • ダイヤグラムの線にハイコントラストな値を用いる(リンク追加予定)

  • 赤と黒の組み合わせによる文字と背景色には、さらに大きなコントラストレベルを用いる

  • 主に中間のスペクトル要素からなる明るい要素とスペクトルの両端(青と赤の波長)からなる暗い要素で構成された色を用いる

  • 両端のコントラストではなく、黒文字に白の背景よりも明るいパステルの背景色を用いる(リンク追加予定)

  • テキストのコントラスト規定を満たしているシンプルな線で描かれたアイコンを使う(リンク追加予定)

  • グラフやチャートに十分な色コントラストを提供する(リンク追加予定)

  • デフォルトから3:1のコントラスト比又はそれよりも高い比率を用いる(リンク追加予定)

  • 空のテキストフィールドに十分な色のコントラストを提供する(リンク追加予定)

重要な用語

コントラスト比 (contrast ratio)

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

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

  • L2 は、暗いほうの色の 相対輝度である。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

テキスト (text)

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

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

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

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

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

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

文字画像 (image of text)

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

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

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

純粋な装飾 (pure decoration)

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

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

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