隣り合う色の境界に十分なコントラストを提供する

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

互いに隣接し合う複数の色を使用したグラフィックスの場合。

これは、達成基準 1.4.11 非テキストのコントラスト (十分) に関連する達成方法である。

解説

この達成方法の目的は、中程度のロービジョンの人が、隣り合う色の区分間にある境界を確実に識別できることである。

非コントラストの達成基準では、小さく単純なグラフィックと、より大きく複雑なグラフィックの一部を含んだ“グラフィカルオブジェクト”という用語を使用している。この達成方法では、色の境界が意味を伝える単色の区分に注目している。

複数の色を使用するグラフィックの色を選択するときは、隣り合う色を検討し、コントラスト比が 3:1 以上であることを検証する。隣り合う色のコントラスト比が 3:1 未満の場合は、3:1 以上の色のコントラストを持った境界線を各色に追加する。

事例

事例 1: 明るい色/暗い色の両方を持つ円グラフ

テキストラベルや対照的な区分を含む、お気に入りのキャンディの味の円グラフ
図 1 円グラフの隣り合う区分間のコントラストは 5.8 から 9.4 の範囲である。

事例 2: 区分間に境界線がある円グラフ

テキストラベルや区分間の対比的な境界線を含む、お気に入りのキャンディの味の円グラフ
図 2 円グラフの区分間のコントラストは 1.1 から 1.8 の範囲である。区分を識別するため、3:1 以上のコントラスト比の色を持った線が追加されている。

事例 3: 境界線がある地図

暗い背景色の領域間に明るい境界線を持つ単純な領域を示すマップ
図 3 地図内の領域の色のコントラストは 1.3 と 1.8 の範囲の間である。境界線は領域の色に対して 3:1 以上の色のコントラスト比で追加される。

事例 4: 黒と白の線がある円グラフ

テキストラベルや黒と白の区分間の境界線を含む、お気に入りのキャンディの味の円グラフ
図 4 グラフの色付きの領域には、暗いものと明るいものの両方がある。明るい色と暗い色の両方の間に十分なコントラストを確保するため、黒と白の境界線が追加される。

関連リソース

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

検証

手順

理解が必要な各グラフィカルオブジェクトについて、カラーコントラストツールを使用して次のことを行う:

  1. 隣り合う色又は境界線 (存在する場合) と比較した各色のコントラスト比を測定する。
  2. 隣り合う各色又は境界線 (存在する場合) のコントラスト比が 3:1 以上であることを確認する。

期待される結果

  • 2 の結果が真である。