達成基準 1.4.11: 非テキストのコントラストを理解する

アクティブなユーザインタフェース コンポーネントの例

はっきりと知覚される必要のあるフォーカスインジケータ、選択インジケータ、及びユーザインタフェース コンポーネントをデザインするため、次の例には十分なコントラストがある。

アクティブなユーザインタフェース コンポーネントの例

タイプ	説明	事例
リンクテキスト	既定のリンクテキストは 1.4.3 コントラスト (最低限)のスコープに含まれ、かつ下線はリンクを示すのに十分である。
既定のフォーカススタイル	リンクにはフォーカスインジケータが存在することが 2.4.7 フォーカスの可視化により求められている。ユーザエージェントのフォーカススタイルが (リンク、フォームフィールド、又はボタンなどの) インタラクティブなコントロールにおいて変更されていないところでは、既定フォーカススタイルは十分である。
スタイル付けされたリンク又はボタン	リンク又はボタンのフォーカスインジケータがコンテンツ制作者により提供されたスタイルを持つところでは、フォーカスインジケータは 3:1 のコントラスト比を満たさなければならない。
テキスト入力 (最小限)	テキスト入力に、下部のボーダーなど、入力であるという視覚的なインジケータがあるところでは、そのインジケータは 3:1 のコントラスト比を満たさなければならない。
テキスト入力	完全なボーダーなど、テキスト入力がインジケータを持つところでは、そのインジケータは 3:1 のコントラスト比を満たさなければならない。
テキスト入力のフォーカススタイル	フォーカスインジケータは必須である。もしフォーカスインジケータがコンテンツ制作者によりスタイル付けされている場合は、3:1 のコントラスト比を満たさなければならない。
背景色を使用しているテキスト入力	ボーダーがなく、かつ背景色のみで区別されるテキスト入力は隣接している背景に対して 3:1 のコントラスト比を持たなければならない。
背景色とフォーカススタイルを使用したテキスト入力	コンテンツ制作者により作成されたフォーカススタイルが濃い背景のコントロールに適用されたところでは、それは隣接した濃い背景と 3:1 のコントラスト比を持たなければならない。

アクティブではないユーザインタフェース コンポーネント

利用者とのインタラクションに利用できないユーザインタフェース コンポーネント (例:HTML で無効化されたコントロール) は WCAG 2.1 ではコントラストの要件を満たすことを求められていない。アクティブではないユーザインタフェース コンポーネントは可視だが、現在は操作可能ではない。例としては、可視だが、フォームのすべての必須のフィールドに記入されるまで有効化できないフォームの下部にある送信ボタンがある。

HTML の無効化されたコントロールなどのアクティブではないコンポーネントは利用者とのインタラクションに利用できない。アクティブではないコントロールをコントラストの要件から免除するという判断は、多数の考察に基づく:

• 後方互換性: 1.4.3 コントラスト (最低限) の WCAG 2.0 ガイダンスはアクティブではないユーザインタフェース コンポーネントの一部であるテキスト又は文字画像を明確に免除する。テキストが属するグラフィカルなコンテナに十分なコントラストを求めながら、アクティブではないコンポーネント内のテキストをコントラストに関する考察から免除することは紛らわしく、かつ一貫性がない。

• 重要性のバリエーション:状況によって、無効化されたコントロールは、コントロールの無効化状態がどの程度意味を持つかによって、意図的におおよそ可視な状態にデザインされるかもしれない。二つの例で説明が可能である。

  1. コントロールは、利用者があらかじめ必要なタスクを完了した時点でアクティブになり、それまでは無効化されたままである。
  2. デザイナーは多数の操作に標準的なレイアウトを使用する。一つの操作では、コントロールは有効ではなく、かつそのため無効化されているが、単に一貫したレイアウトを保つために可視のままである。

  一つ目の例の無効化されたコントロールは、より重要な手がかりを提供し、かつデザイナーは、重要性を強調しないために二つ目の例では意図的にコントラストを減らすかもしれない。

• 相反するニーズ及び要求。意味のある情報は (知覚できる者たちには) より低いコントラストの無効化されたコントロールで伝えられているが、すべての利用者が無効化されたコントロールが目立つ度合いの増加を要求しているわけではない。
  • ロービジョン - 何人かの利用者は無効化された要素を無視し、有効化された要素だけに集中したいだろう。他のロービジョンの利用者は、はっきりと無効化された項目を見たいだろう。
  • 認知 - 認知障害のある人の何人かは、実際には有効な要素に集中 (かつ有効ではない要素を無視) したいだろう。我々が無効化された要素により強いコントラストを強いた場合、すべての目の見える人にとって、何がアクティブ (で何が無効化されている) か区別することが難しくなることが起こり得る。

汎用的な解決策を制定することは非常に困難だった。無効化されたコントロールにアイコンを追加するなど、利用者の設定に応じて無効化されたコントロールを様々に提示する方法が将来の発展として期待されている。

理解するのに必要

「理解するのに必要」という用語は、多くのグラフィックがコントラストの要件を満たさなくて良いため、達成基準の中で使用されている。もし人がコンテンツを理解するためにグラフィック、又はグラフィックの一部 (グラフィカルオブジェクト) を知覚する必要がある場合、それは十分なコントラストを持つべきである。しかし、これは次の場合は必須要件ではない:

• ラベル及びチャート内の値など、グラフィックに埋め込まれた又は重ねられたテキストが同じ情報を伝えている。
• グラフィックが見栄えのためにあり、利用者にコンテンツを理解するため又は機能を使用するために見る又は理解することを求めない。
• 「長い説明」ボタンを押下すると表示されるグラフに続く表など、情報が他の形式で提供されている。
• グラフィックはロゴ又はブランド名の一部である (その提示にとって「必要不可欠」と考えらえている)。

グラデーション

グラデーションは領域間の見かけのコントラストを減らすことができ、かつ検証をより困難にする。一般的な原則としては、理解するのに必要なグラフィカルオブジェクトを特定し、その領域の中央の色をとることである。もし十分なコントラストのない隣接している色を取り除いても、まだグラフィカルオブジェクトを特定しかつ理解することができるのか？

動的な例

いくつかのグラフィックはコントラストを変更する、又は各グラフィカルオブジェクトにマウスオーバー／タップ／フォーカスをすると情報をテキストとして表示する、いずれかのインタラクションがあるかもしれない。人がグラフィックが存在することを認識するためには、グラフィックを見つけるために対照する色又はテキストがなければならない。その領域内では、適合する方法 (例:フォーカス可能な要素) で提供されている情報は動的なテキスト、又は動的にコントラストを増加して、その情報を提供するために使用できる。

インフォグラフィック

インフォグラフィックはチャート又は図など、データを伝えるあらゆるグラフィックを意味することができる。ウェブではよくたくさんの意見、絵、チャート、又は他のデータを伝える方法を含む大きなグラフィックを示すために使われている。グラフィックのコントラストの文脈では、そのようなインフォグラフィック内の各アイテムは、一つのファイルか個別のファイルかにかかわらず、一連のグラフィカルオブジェクトとして扱われるべきである。

インフォグラフィックはよく、以下を含む WCAG レベル AA の基準を満たすことに失敗する:

• 1.1.1 非テキストコンテンツ
• 1.4.1 色の使用
• 1.4.3 (テキストの) コントラスト (最低限)
• 1.4.5 文字画像

インフォグラフィックは、理解するのに必要なグラフィカルオブジェクトの数を最小限にするために、他の基準を満たすテキストを使用することができる。例えば、チャート内の値を提供するために、十分なコントラストのテキストを使用する。インフォグラフィックが理解のために依存されなくなるため、長い説明でも十分だろう。

必要不可欠な例外

グラフィカルオブジェクトは、「グラフィック特有の提示が、情報を伝えるうえで必要不可欠」な場合、コントラストの要件を満たす必要はない。必要不可欠の例外は、意味を損なわずに十分なコントラストのグラフィックを提示する方法がない場合に適用することを意図している。例えば:

• ロゴタイプ及び旗:組織又は製品のブランドのロゴはその組織の象徴であるため、免除する。旗は、十分なコントラストを持つために色が変更された場合、識別できないかもしれない。
• 感覚的:人又は風景の写真などの現実の場面の絵を変更するという必須要件はない。
• 他のものを表している:グラフィックを他のどの方法でも表現できない場合、それは必要不可欠である。例に含まれるのは:
  • ウェブサイトがどのように表示されていたかを明示するスクリーンショット。
  • 生物学で見られる色を使用した医療情報の図 (Wikipediaの医療的な図解の例)。
  • ヒートマップなどの、測定結果を表す色のグラデーション (Wikipediaからのヒートマップの例)。

検証の原則

ウェブページの非テキストグラフィックを見つける及び評価するための上層工程の概要:

• ページ内の各ユーザインタフェースコンポーネント (リンク、ボタン、フォームコントロール) を特定する。及び:
  • コントロールが存在することを特定するために必要とされているコンポーネントの視覚的な (非テキストの) 目安を特定し、かつ現在の状態を示す。規定 (ページロード時) の状態では、隣接している色に対してコントラスト比を検証する。
  • それらのコントラストの目安を各状態で検証する。
• ページ内のコンテンツを理解するのに必要な情報を含む各グラフィックを特定する (つまり、同じ情報の可視テキストを含む、又は装飾的なグラフィックは除外する)。及び:
  • 隣接している色に対してグラフィカルオブジェクトのコントラストを確認する。
  • もし複数の色及び／又はグラデーションがある場合、最もコントラストが低い箇所を選択して検証する。
  • 合格の場合、次のグラフィカルオブジェクトに移動する。
  • もし最もコントラストが低い領域が 3:1 を下回る場合、その領域が非可視であると仮定して、グラフィカルオブジェクトはそれでも理解できるか？
  • グラフィカルオブジェクトを理解するのに十分な場合、合格する。そうでなければ、失敗する。

以下の達成方法はそれぞれ検証基準があり、かつフォーカスの可視化 (2.4.7)、色の使用 (1.4.1)、及びコントラスト (最低限) の関連する基準にも達成方法がある。