WCAG 2.0 実装方法集

メインコンテンツへスキップ

-

F83: 達成基準 1.4.3 及び 1.4.6 の不適合事例 - 前景にあるテキスト(又は画像化された文字)とのコントラストが十分ではない背景画像を用いる

適用(対象)

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

これは、次の達成基準に関連する不適合事例である:

解説

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

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

事例

不適合事例 1:

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

不適合事例 2:

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

検証

チェックポイント

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

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

判定基準

日本語訳における注記:

この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。