WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

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

適用 (対象)

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

これは、次の達成基準に関連する失敗例である:

解説

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

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

事例

失敗例 1

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

失敗例 2

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

検証

手順

  1. クイックチェック: まず初めに、テキストとその場所の一番暗い部分 (色の濃いテキストに対して) 又は一番明るい部分 (色の明るいテキストに対して) のコントラストが達成基準 (1.4.3 又は 1.4.5) による要求事項を満たしている、又は上回っている。

  2. クイックチェックを満たしていないとき、各文字の背後にある背景がその文字と十分なコントラストがある。

期待される結果