【注意】この文書にはより新しいバージョンが存在します: WCAG 2.1 解説書

WCAG 2.0 解説書

本文へジャンプ

-

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

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

  • 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像には、少なくとも 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 ポイント」と「太字」の両者は、異なるフォントでは異なる意味合いを持つこともあるが、極めて細い線のフォント又は特異なフォントを除き、十分である。非常に多くの様々なフォントがあるため、ここでは一般的な基準を用いることとして、用語集にて装飾的なフォント又は細い線のフォントに関する注記を付けている。

注記 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 (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) は約 4.5:1 と計算される)。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] 及び "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 及び M. Stokes et al の論文 [sRGB] に基づいている。

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

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

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

達成基準 1.4.6 の具体的なメリット:

  • ロービジョンの人は、背景とのコントラストがないテキストを読むのが困難なことがよくある。これは、コントラストをさらに低下させる色覚異常がある人の場合、深刻となりえる。テキストとその背景との間に最低限のコントラスト比を提供することで、たとえその人があらゆる色を見ることができなくても、テキストをより読みやすくすることができる。また、まれに全く色が見えない人にも有用である。

達成基準 1.4.6 の事例

(今のところ、文書化されていない)

関連リソース

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

訳注: 「Colour Contrast Analyser」は 2018 年現在、Firefox Add-ons から入手できない状態にある。

達成基準 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)

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

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

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