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

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

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

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

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

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

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

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

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

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