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

達成基準 1.4.11 非テキストのコントラスト (レベル AA): 以下の視覚的提示には、隣接した色との間で少なくとも 3:1 のコントラスト比がある。

ユーザインタフェース コンポーネント
ユーザインタフェース コンポーネント及び状態 (state) を特定するのに必要な視覚的な情報。ただし、アクティブではないユーザインタフェース コンポーネントや、そのコンポーネントの見た目がユーザエージェントによって提示されていてコンテンツ制作者が変更していない場合は除く。
グラフィカルオブジェクト
コンテンツを理解するのに必要なグラフィック部分。ただし、そのグラフィック特有の提示が、情報を伝えるうえで必要不可欠な場合は除く。

意図

この達成基準の意図は、アクティブなユーザインタフェース コンポーネント (つまり、コントロール) 及び意味のあるグラフィックが中程度のロービジョンの人によって識別できるようすることである。この必須要件の根拠は、コントラスト (最低限) の大きな文字のものと同様である。

低いコントラストのコントロールは知覚するのが難しく、かつ視覚障害のある人に完全に見逃される可能性がある。同様に、ウェブページのコンテンツ又は機能を理解するためにグラフィックが必要とされる場合、コントラストを強化する支援技術の必要なくロービジョン又は他の障害のある人に知覚されるべきある。

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

アクティブなコントロールの場合、利用者がコントロールが存在すること及び操作方法を識別するために必要な提供されたあらゆる視覚情報は、隣接している色と最低でも 3:1 のコントラスト比がなければならない。また、コンポーネントが選択されている又はフォーカスされているといった状態を示すために必要なあらゆる視覚情報も、その状態のコントロールを識別するために使用された情報が最低でも 3:1 のコントラスト比を持つようにしなければならない。

この達成基準は互いが隣に現れない時、個別のコンポーネントの状態を区別する色の変化が 3:1 のコントラスト比を満たすことを求めない。例えば、訪問済みのリンクとデフォルトの色とのコントラスト、又はマウスホバーインジケータとデフォルトの状態とのコントラストの新しい必須要件はない。しかし、コンポーネントは隣接している色とコントラストを失ってはならず、かつチェックボックス内のチェック、又はメニューが選択されているもしくは開いていることを表す矢印のグラフィックなどの非テキストインジケータは隣接している色に対して十分なコントラストがなければならない。

境界

この達成基準はコントロールにヒット領域を示す視覚的な境界が存在することを求めないが、コントロールの視覚的インジケータがコントロールを識別する唯一の方法である場合、そのインジケータは十分なコントラストがなければならない。ボタン内のテキスト (もしくはアイコン) 又はテキスト入力内のプレースホルダーテキストが可視であり、かつヒット領域の視覚的なしるしがない場合、達成基準に合格する。テキストボタンに色つきのボーダーもある場合、ボーダーはしるしだけを提供しないため、テキストのコントラスト (1.4.3 コントラスト (最低限)) を越えるコントラストの要件はない。認知障害のある人には、コントロールを認識するため、ひいては動作の完了のための支援をするために、コントロールの境界の輪郭を描くことが推奨されることに注意する。

二つのボタン。一つ目は「ボタン」というテキスト以外の視覚的インジケータがない。二つ目は同じだが、グレーのボーダーが追加されている。
図 1 視覚的境界のないボタン (アクティブなコントロール) 及び白に隣接する灰色 (#949494) の定義された視覚的境界のあるフォーカスインジケータのある同じボタン。

隣接している色

ユーザインタフェース コンポーネントの「隣接している色」とは、コンポーネントに隣接している色を意味する。例えば、入力に白い内側の背景、濃いボーダー、及び白い外側の背景があった場合、コンポーネントの「隣接している色」は白い外側の背景になる。

標準的なラベル付きのテキスト入力。濃いボーダー付きの白い内側及び外側の背景。
図 2 灰色のボーダー (#767676) とコンポーネントの外側に隣接している白色がある標準的なテキスト入力

コンポーネントが複数の色を使用している場合、コントラスト比を測定する目的で、コンポーネントの識別に干渉しない色は無視できる。例えば、入力の 3D ドロップシャドウ、又はコントラストをもつ背景間の暗いボーダーは、明るさ (知覚される輝度) が最も近い色に含まれていると見なされる。

次の例は、内側に明るい背景があり、周囲に暗い背景がある入力を示している。入力には、暗い背景に含まれていると見なされる暗い灰色のボーダーもある。このボーダーはコンポーネントの識別に干渉しないため、コントラスト比は白の背景と濃い青の背景の間で取得される。

濃い背景及び薄いボーダーの、白い背景のテキストボックス
図 3 入力背景 (白) 及びコントロールに隣接している色 (濃い青 #003366) のコントラストは十分である。コンポーネントにはまた、どちらにもコントラストをもつことが必須ではないボーダー (シルバー) がある。

チェックボックスのチェック又はスライダーのつまみなど、状態を特定するために必須の視覚情報には、その部分はコンポーネント内にあるかもしれず、そのため隣接している色はコンポーネントの別の部分かもしれない。

紫のボックスと薄いグレーのチェック。
図 4 薄いグレーのチェック (#E5E5E5) のあるカスタマイズされたチェックボックスは、紫のボックス(#6221EA) と 5.6:1 のコントラスト比を持っている。

ステータスインジケータがコンポーネントを埋め、かつコンポーネントとコントラストをもたないが、コンポーネントと隣接している色とコントラストをもつようなフラットなデザインを使用することは可能である。

四つのラジオボタン。一つ目は「Not selected」とラベル付けされた無地の円。二つ目はボーダーより濃い色で埋められた円を示す。三つ目はボーダーと同じ色で埋められている。四つ目は内部が埋められた、外側のボーダーとの間に隙間がある円。
図 5 一つ目のラジオボタンはデフォルトの状態を灰色 (#949494) の円で示している。二つ目及び三つ目は選択されたラジオボタンを表し、コンポーネントに隣接している色とコントラストをもつ色で埋められている。最後の例はコンポーネントの色とコントラストをもつステータスインジケータを表している。

色の使用とフォーカスの可視化との関係性

色の使用という達成基準は、オブジェクトの形を一切変えずにオブジェクト又はテキストの色のみ (色相) を変更することを取り上げている。この原則は、コントラスト比 (明るさの差) がテキスト又はグラフィックを区別するために使用できるということである。例えば、G183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供するは周囲のテキストと 3:1 のコントラスト比を使用してリンク及びコントロールを区別する達成方法である。この場合、ワーキンググループは、テキストがリンクであることを伝えるために色 (色相) だけでなくコントラスト比にも依存しているため、リンクではないテキスト色に対して 3:1 のコントラスト比を満たすリンクの色は達成基準 1.4.1 色の使用を満たすと考える。

例えばそれぞれの星が黄色 (満ちている) 又は白 (空いている) のいずれかで埋まった黒いアウトラインをもつ 1-5 のスターインジケータなど、入力の値又は状態を伝えるために色相の違いのみを使用するコントロール内の非テキスト情報は、この基準よりも色の使用の基準に失敗する可能性がある。

二つ星評価。一つはチェックされていることを表すために黒い塗りつぶしと (白に) 黒いアウトラインを使用している。二つ目は黄色い塗りつぶし及び太く濃いボーダーがある。
図 6 チェックされている状態を示すためのコントラストのあるべた塗り、又は太いボーダー及び黄色い塗りつぶしのいずれかを使用して達成基準に合格している二つの例。
二つ星評価。一つ目は黄色がチェックされていることを示す、黒いアウトライン及び黄色又は白の塗りつぶしの五つ星を使用している。二つ目は白に薄い黄色の星のみを使用している。
図 7 達成基準に失敗する二つの例。一つ目は、黄色 (#fff000) 及び白の色相に依存していることにより、色の使用の基準に失敗する。二つ目の例は黄色対白のコントラスト比が 1.2:1 であることにより、非テキストのコントラストの基準に失敗する。

フォーカス及び他の状態にコントラストの変化を使用することは状態を区別する方法である。これは G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用するの基礎であり、かつより多くの達成方法が追加されている。

2.4.7 フォーカスの可視化と組み合わせて、コンポーネントがフォーカスされている時に、そのコンポーネントの視覚的なフォーカスインジケータは、隣接している背景に対して十分なコントラストがなければならない。ただし、コンポーネントの見た目がユーザエージェントにより決定されており、かつコンテンツ制作者により変更されていない場合を除く。

この達成基準は、コントロールのフォーカスされた状態とフォーカスされていない状態を直接比較しないことに注意すること。フォーカス状態が色の変化 (例:ボタンの背景色のみを変更する) に依存している場合、この達成基準は、二つの状態間のコントラストの違いに関する要件を定義していない。

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

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

アクティブなユーザインタフェース コンポーネントの例
タイプ 説明 事例
リンクテキスト デフォルトのリンクテキストは 1.4.3 コントラスト (最低限)のスコープに含まれ、かつ下線はリンクを示すのに十分である。 青い下線の、ブラウザのデフォルトスタイルのリンク。
デフォルトのフォーカススタイル リンクにはフォーカスインジケータが存在することが 2.4.7 フォーカスの可視化により求められている。ユーザエージェントのフォーカススタイルが (リンク、フォームフィールド、又はボタンなどの) インタラクティブなコントロールにおいて変更されていないところでは、デフォルトフォーカススタイルは十分である。 リンクの周りに黒い点線のアウトラインのついた、ブラウザデフォルトのスタイル付けがされたリンク。
ボタン 位置、テキストスタイル、コンテキストなどの識別インジケータがあるボタンは、ボタンであることを示すためにコントラストをもつ視覚インジケーターを必要としないが、一部の利用者は、コントラスト要件をより簡単に満たすアウトラインでボタンを識別する可能性がある。 かすかな青い背景のボタン。
テキスト入力 (最小限) テキスト入力に、下部のボーダー (#767676) など、入力であることを示す視覚的なインジケータがあるところでは、そのインジケータは 3:1 のコントラスト比を満たさなければならない。 下部のボーダー及び淡いグレーの背景で示されたラベルのあるテキスト入力。
テキスト入力 完全なボーダー (#767676) など、テキスト入力がインジケータを持つところでは、そのインジケータは 3:1 のコントラスト比を満たさなければならない。 完全なボーダーで示されたラベルのあるテキスト入力。
テキスト入力のフォーカススタイル フォーカスインジケータは必須である。この場合、追加の灰色 (#CCC) のアウトラインは白色 (#FFF) の背景に対して 1.6:1 の不十分なコントラストであるが、入力がフォーカスを受け取ったときに表示されるカーソル/キャレットは、十分に強い視覚的表示を提供する かすかな灰色のアウトラインとカーソル/キャレットが表示されたラベルのあるテキスト入力。
背景色を使用しているテキスト入力 ボーダーがなく、かつ背景色のみで区別されるテキスト入力は隣接している背景 (#043464) に対して 3:1 のコントラスト比を持たなければならない。 濃い青のページ背景及び白いボックスで示されたラベルのあるテキスト入力
トグルボタン トグルボタンの内部の背景 (#070CD5) は、外部の白色の背景とのコントラストが良好である。また、その中の丸いトグル (#7AC2FF) は、内部の背景とコントラストをもつ。 水色の内部インジケータ付きの濃い青色の楕円形のトグルボタン。
ドロップダウンインジケータ 下矢印は、ドロップダウン機能があることを理解するために必要である。濃い灰色 (#6E747B) にある白いアイコンのコントラストは 4.7:1 である。 Menu という単語が付いたボタンと、その横にある下向きの矢印アイコン。
ドロップダウンインジケータ 下矢印は、ドロップダウン機能があることを理解するために必要である。白に対する黒いアイコンのコントラストは 21:1 である。 Menu という単語とその横にある下向き矢印アイコンが付いたテキスト。
チェックボックス - 空 白色の背景上の黒いボーダーはチェックボックスを示す。 テキストラベル付きの黒い四角のボーダー。
チェックボックス - チェックされた 白色の背景上の黒色のボーダーはチェックボックスを示し、黒色のチェックマークの形はチェックされた状態を示す。 内側にチェックマークが付いた黒い四角のボーダーとテキストラベル。
チェックボックス - 失敗 チェックボックスの灰色のボーダーの色 (#9D9D9D) は、白色の背景の 2.7:1 のコントラスト比であり、これはチェックボックスを識別するために必要な視覚情報には不十分である。 真ん中に黒いチェックマークがある、白い背景上の灰色のボックス。
チェックボックス - かすかなホバースタイル 白色の背景上の黒色のボーダーはチェックボックスを示し、マウスポインタがかすかなホバー状態をアクティブにすると、灰色の背景 (#DEDEDE) が追加される。黒色のボーダーは、灰色の背景と 15:1 のコントラスト比を持つ。 テキストラベルの横にある円形の灰色の背景上の黒いボックス。
チェックボックス - かすかなフォーカススタイル - 失敗 フォーカスインジケータが必要である。フォーカスインジケータがコンテンツ制作者によってスタイル設定されている場合、隣接する色との 3:1 のコントラスト比を満たさなければならない。この場合、灰色 (#AAA) インジケータのコントラスト比は隣接する白色 (#FFF) の背景に対して 2.3:1 と不十分である。 フォーカス表示として太い灰色の追加のアウトラインがある未チェックのチェックボックス。

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

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

グレーのボタンとコントラストをもたないグレーのテキスト。
図 8 デフォルトのブラウザのスタイルを用いたアクティブではないボタン

HTML の無効化されたコントロールなどのアクティブではないコンポーネントは利用者とのインタラクションに利用できない。アクティブではないコントロールをコントラストの要件から免除するという判断は、多数の考察に基づく。アクティブでないコントロールを識別することは一部の人にとって有益であるが、汎用的な解決策を制定することは非常に困難だった。無効化されたコントロールにアイコンを追加するなど、利用者の設定に応じて無効化されたコントロールを様々に提示する方法が将来の発展として期待されている。

グラフィカルオブジェクト

「グラフィカルオブジェクト」という用語は、(テキストのない) 印刷アイコンなどの独立したアイコン及びグラフの各線などのより複雑な図の重要な部分に適用される。単一色のアイコンなどの単純なグラフィックの場合、画像全体がグラフィカルオブジェクトになる。複数の線、色、及び形で形成された画像は複数のグラフィカルオブジェクトで形成されており、それらのいくつかは理解するのに必要である。

すべてのグラフィカルオブジェクトが周囲とのコントラストをもつことが必要なわけではない - グラフィックが伝えていることを利用者が理解するのに必要なもののみである。Gestalt principles の「連続性の法則」などは他のグラフィカルオブジェクト又は色の軽微な重なりを無視するために使用できる。

画像 注記
中央に白い電話のアイコンのあるオレンジの円。

電話のアイコンはオレンジ (#E3660E) の円の中にある単純な形である。この意味はアイコン単体から理解でき、円の後ろにある背景は重要ではない。オレンジの背景及び白いアイコンは 3:1 以上のコントラストがあり、合格する。

グラフィカルオブジェクトは白い電話のアイコンである。

先端がグレーかつ黒いアウトラインの赤いマグネット。

マグネットは薄く色づけられた先端と「U」という形により理解できる。そのため、このグラフィックを理解するには、(背景に対して) 全体の形及び (その他の U の形及び背景に対して) 薄く色づけられた先端を理解できるべきである。

グラフィカルオブジェクトは (アウトラインによる、又はベタ塗りの赤色 #D0021B による) 「U」という形及びマグネットの各先端である。

ポンド記号 (通貨) が中央にある下向きの黄色い矢印。

通貨 (£) が下がっていることを示す記号は、外形 (下向き矢印) 及び通貨記号 (グラフィックの一部である外形とポンドアイコン) を識別することにより理解することができる。このグラフィックを理解するには、白い背景に対して矢印の形、及び黄色い背景 (#F5A623) に対してポンドアイコンを理解する必要がある。

グラフィカルオブジェクトは外形及び通貨記号である。

四つの異なる色の線が時間と共に追跡している、地域を横断する投票数の線チャート。

グラフを理解するためには、各条件の線及び外形を理解する必要がある。チャートに沿った各線の値を認識するには、目盛りの 100 きざみの値を示す灰色の線を識別する必要がある。

グラフィカルオブジェクトは値のための背景の線を含むグラフ内の線、及び形と色つきの線である。

線には背景に対して 3:1 のコントラストがあるべきだが、それらの他の線との重なりは小さいため、それぞれ又は目盛り付きの線とコントラストをもたなくても良い。(以下の検証の原則を確認すること。)

各扇形の間に白い背景を表示している小さい隙間がある円グラフ。薄く色づけられた扇形は濃いアウトラインで囲まれている。

円グラフを理解するためには、円グラフの各扇形を他と区別する必要がある。

グラフィカルオブジェクトは円 (グラフ) の各扇形である。

注記:もし円グラフの扇形の値が適合する方法で提示されていた場合 (詳細は円グラフの例を参照)、扇形は理解するのに必要ではない。

上記のマグネット画像を例にとると、グラフィカルオブジェクトを定める過程は:

  • 画像が何を表しているかを理解するために、各画像のどの部分が必要かを評価する。
    マグネットの「U」という形はアウトライン又は赤い背景で伝えることができる (どちらも条件を満たしている)。白い先端も重要であり (そうでなければ馬蹄になってしまう)、赤い背景とコントラストをもつ必要がある。
  • 利用者がそれらの特徴しか見られないと仮定する。それらは隣接している色とコントラストをもつか?
    マグネットのアウトラインは周囲のテキスト (黒/白) とコントラストをもち、かつ先端の赤及び白も十分なコントラストがある。

赤と白の強いコントラストにより、マグネットの白い先端の周りのみにアウトラインをつけることも可能であり、それでも適合する。

理解するのに必要

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

  • ラベル及びチャート内の値など、グラフィックに埋め込まれた又は重ねられたテキストが同じ情報を伝えている。

    注記

    グラフィック内のテキストは 1.4.3 コントラスト (最低限) を満たさなければならない。

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

グラデーション

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

「i」が情報ということを示す二つのバージョンの青い円。一つ目の例では青いグラデーションの背景があり、二つ目は上半分の背景がなくなっており、 i を不明瞭にしている。
図 9 十分なコントラストのない背景を取り除くことは、グラフィカルオブジェクト (「i」) が理解できなくなることを強調する。

動的な例

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

一つの扇形が強調された円グラフ及び隣に付いているボックスはデータを表していて、かつ凡例内のソースを示している。
図 10 現在の「扇形」がホバー又はフォーカスされている動的なチャートは、値の関連しているテキスト表示を活性化し、かつ series を強調する

インフォグラフィック

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

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

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

必要不可欠な例外

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

  • ロゴタイプ及び旗:組織又は製品のブランドのロゴはその組織の象徴であるため、免除する。旗は、十分なコントラストを持つために色が変更された場合、識別できないかもしれない。
  • 感覚的:人又は風景の写真などの現実の場面の絵を変更するという必須要件はない。
  • 他のものを表している:グラフィックを他のどの方法でも表現できない場合、それは必要不可欠である。例に含まれるのは:

検証の原則

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

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

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

メリット

ロービジョンの人は不十分なコントラストのグラフィックを知覚するのが困難なことがよくある。これは、コントラストをさらに低下させる色覚異常がある人の場合、深刻となりえる。3:1 又はそれ以上の相対輝度 (明るさの違い) を提供することで、その人があらゆる色を見ることができなくても、これらの項目をさらに識別しやすくする。

事例

円グラフ

円グラフはこの達成基準のグラフィカルオブジェクトに関する部分の良いケーススタディになる。次の円グラフは、ブラウザの市場シェアの割合を伝えることを意図している。実際の数字は作られたものであり、これらは実際の市場シェアではないことに注意いただきたい。

失敗している円グラフ

図 11 失敗:円グラフには各扇形にラベルがついている (そのため、1.4.1 色の使用は合格する) が、扇形の割合を理解するためには、その扇形の縁 (必要不可欠な情報を伝えるグラフィカルオブジェクト) を認識しなければならず、かつ各扇形間のコントラストは 3:1 又はそれ以上ではない。

適用されない円グラフ

図 12 非適用:円グラフには可視ラベル及び値があり、グラフィカルオブジェクト (円の扇形) の同等の情報を伝えている。

合格している円グラフ

図 13 合格:円グラフには可視ラベルがあり、かつ十分なコントラストが円グラフの扇形 (グラフィカルオブジェクト) の周囲及び間にある。コントラストレベルを得るために、さらに濃いボーダーが黄色い扇形の周りに追加されている。

インフォグラフィック

五つの異なるソーシャルネットワークのサイズ示すために複数のサイズの明るい色の円で表しているインフォグラフィック

図 14 失敗:ネットワークのサイズを理解するために円を識別する必要があり、かつどのネットワークを表しているかを識別するために各円の中のアイコンを区別する必要がある。

グラフィカルオブジェクトは (背景に対して測定される) 円及び (円の背景に対して測定される) 各円の中のアイコンである。

円の周りに濃いボーダーとコントラストをもつアイコン、コントラストをもつテキストのある同じインフォグラフィック

図 15 合格:円にはコントラストをもつボーダーがあり、かつアイコンは薄い円の背景に対してコントラストをもつ濃い色である。

コントラストを確保するためのたくさんの可能な解決策があり、例ではボーダーの使用を表している。他の達成方法には、円の背景により濃い色を使用する、又は各項目にテキストラベル及び値を追加することがある。

関連リソース

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

達成方法

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

十分な達成方法

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

状況 A: 色は、ユーザインタフェース コンポーネントを識別するために使用される、又はユーザインタフェース コンポーネントの状態を識別するために使用される

状況 B: 色はグラフィカルコンテンツを理解するために必須である

失敗例

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

重要な用語

コントラスト比 (contrast ratio)

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

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

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

注記

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

注記

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

注記

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

注記

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

注記

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

必要不可欠 (essential)

もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

提示 (presentation)

利用者が知覚できる形式でコンテンツをレンダリングすること。

状態 (state)

ユーザーのアクション又は自動プロセスに応答して変化し得るユーザインタフェースコンポーネントの特性を表現する動的特性。

状態はコンポーネントの性質に影響を与えないが、コンポーネントやインタラクションの可能性に関連付けられているデータを表す。例えば、フォーカス、ホバー、選択、プレス、チェック、訪問済/未訪問、展開/折りたたみなどがある。

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

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

注記

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

注記

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

注記

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

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


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