達成基準 1.4.3 及び 1.4.6 の失敗例 - 前景のテキスト (又は文字画像) との十分なコントラストを提供しない背景画像を使用している

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

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

適用 (対象)

あらゆるウェブコンテンツ技術

これは、次の達成基準に関連する達成方法である:

解説

この失敗例は、ロービジョンの人が背景画像の上に表示されているテキストを読むことができない場合に関するものである。背景画像とテキストのコントラストが十分ではない時、背景画像はテキストと混同し、正確に読むことを困難にさせることがある。

達成基準 1.4.3 及び 1.4.6 を満たすためには、テキストとその背景画像の間に十分なコントラストを確保しなければならない。画像に対して、これはテキストの背後にあってテキストにとても似ている画像の一部とテキストの間に十分なコントラストが必要であることを意味している。

事例

事例 1: 失敗例 1

黒いテキストが黒い線の画像と重なっている。その線は文字の背景にあり、F's をまるで E's のように見せている。

事例 2: 失敗例 2

黒いテキストが濃い灰色の場所のある画像と重なっている。テキストが濃い灰色のどこの場所で交差していても、コントラストがとても不十分なため、テキストを読むことができない。

検証

手順

  1. クイックチェック: まず初めに、テキストとその場所の一番暗い部分 (色の暗いテキストに対して) 又は一番明るい部分 (色の明るいテキストに対して) との間のコントラストが達成基準 (1.4.3 又は 1.4.5) による要求事項を満たしている、又は上回っていることを確認する。コントラストが指定されたコントラスト以上の場合、失敗しない。
  2. クイックチェックが偽である場合、各文字の背後にある背景がその文字と十分なコントラストがあるかどうかを確認する。

期待される結果

  • クイックチェックが偽かつ 2. の結果も同様に偽である場合、この失敗例の条件は適用され、コンテンツはコントラストの達成基準の失敗となる。