アイコンに対して 3:1 のコントラスト比を確保する

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

グラフィカルなアイコンをサポートする全ての技術。

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

解説

この達成方法の目的は、グラフィカルなアイコンが視覚障害者にとって十分なコントラストを持つようにすることである。全てのグラフィックが達成基準 1.4.11 非テキストのコントラストの適用範囲に含まれるわけではないが、コンテンツを理解するためにアイコンが必要な場合、そのアイコンには少なくとも 3:1 のコントラスト比を持つ必要がある。

非テキストのコントラストの達成基準では「グラフィカルオブジェクト」という用語が用いられており、小さく単純なグラフィックから、より大きく複雑なグラフィックのパーツまで、対象として含んでいる。この達成方法は、ベタ又はグラデーションの背景上で使用されるベタ色のアイコンに焦点を当てている。

グラフィックの色を選択するときは、そのグラフィックに隣接する色を考慮し、コントラスト比が少なくとも3:1であることを検証すること。

注記

コントラスト比を検証するためのツール及びアプリケーションの一覧は、達成基準 1.4.3: コントラスト (最低限)を理解するで入手できる。

事例

例 1: 背景に対するベタなアイコン色

ベタ色のアイコン例である電話のシンボルは、白背景の上に、オレンジ色を用いている。オレンジ色(#E3660E)を白背景(#FFFFFF)に対して検証したところ、コントラスト比は 3.4:1 である。

白背景の上にある、オレンジ色のアイコン

例 2: カスタム背景に対するベタなアイコン色

ベタ色のアイコン例である電話のシンボルは、オレンジ色の背景の中で用いられている。オレンジと白の色は例 1 と同じものであるが、この場合、白背景に対するコントラストは問われない。オレンジ色の背景と、その中にある白いアイコンこそが、アイコンの情報を提供するものであり、結果、コントラスト要件を満たすことが求められる。

オレンジ色の背景の上にある、白いアイコン

例 3: グラデーション背景のあるベタ色のアイコン

ベタ色のアイコン例である電話のシンボルは、白から青へのグラデーション背景の上に、濃紺色を用いている。アイコンのコントラスト検証はまず、アイコン色に隣接する最も暗い (コントラストが最も低い) 背景に対して行われるべきである。それが少なくとも 3:1 であれば、達成基準を満たしている。

白から青へのグラデーション背景の上にある、濃紺色のアイコン。

例 4: コントラストで重なるグラデーション背景のあるベタ色のアイコン

グラデーション背景の上にあるベタ色のアイコンは、背景の全てに対して十分なコントラストを持たない箇所があって、それでもグラッフィックが理解できるような場合、コントラストの面で色が重なっている可能性がある。グラフィックとの間で 3:1 のコントラスト比を満たしていないグラデーション背景部分を見つけて、かつその部分があたかも削除されたかのように扱う場合、それでもアイコンはまだ適切な意味を伝えているか?

これを可視化する方法は、コントラストが不十分な領域を削除して、そのうえでまだアイコンが理解可能かどうかをチェックしてみることである。理解可能であれば十分である。下の画像は、グラデーション背景の上にアイコンを表示したもので、2 つめのバージョンでは、コントラスト比が 3:1 を満たさないアイコン部分を取り除いている。これでも電話のアイコンとして認識できるので、達成基準を満たしていると言える。

白から青へのグラデーション背景の上にある、濃紺色のアイコン。下のほうが暗くなっている。 白から青へのグラデーション背景の上にある、濃紺色のアイコン。下のほうが取り除かれている。

参考リソース

この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

理解するのに必要なグラフィカルオブジェクトごとに、コントラスト検証ツールを用いて:

  1. グラフィカルオブジェクトの前景色を決める。
  2. 隣接する背景色を決める。背景色がグラデーション又は模様の場合、前景色とのコントラストが最も低い色を特定する。
  3. コントラスト比が 3:1 以上であることを確認する。
  4. 背景領域の一部が前景色との間で 3:1 を満たしていない場合、その領域に隣接するアイコンの部分は見えないものと想定する。
  5. コントラストが不十分な領域を除いても、アイコンが識別できることを確認する。

期待される結果

  • 3. 及び 5. の結果が真である。