適用 (対象)
テキストと背景の色が別々に指定されている、及びブラウザが初期設定の色を制御できるあらゆるウェブコンテンツ技術
これは、次の達成基準に関連する達成方法である:
- 達成基準 1.4.3: コントラスト (最低限) (十分な達成方法)
- 達成基準 1.4.6: コントラスト (高度) (十分な達成方法)
- 達成基準 1.4.8: 視覚的提示 (十分な達成方法)
解説
この達成方法の目的は、利用者が背景上に提示されたテキストを確実に読めるようにすることである。この達成方法では、コンテンツ制作者は単純に背景色及び文字色を指定しないことで、コントラストに関する処置を行う必要がないようにする。その結果、両方の色はユーザエージェントによって完全に決定される。
視覚障害を持つ人々の中には、彼らが見づらい特定の色を上書きするようにユーザエージェントを設定している人がいる。この達成方法は、ユーザエージェントとウェブサイトが前景色及び／又は背景色をめぐって互いに競合し、その結果、文字色及び背景色が同じ色になり、ブラウザ又は支援技術で独自の色設定をしている利用者にとって不可視の状態になる、という状況を避けるのに役立つ。
事例
事例 1
コンテンツ制作者は文字色も背景も指定も設定せず、CSS も使用していない。その結果、利用者はブラウザのデフォルトを設定し、適切に機能する色及びコントラストを提供することができる。
参考リソース
この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- Contrast Analyser – Application
- Contrast Ratio Analyser - online service
- Colour Contrast Analyser - Firefox Extension
- Color Contrast Samples
- Atypical colour response
- Colors On the Web Color Contrast Analyzer
- Tool to convert images based on color loss so that contrast is restored as luminance contrast when there was only color contrast (that was lost due to color deficiency)
- List of color contrast tools
訳注:
「Colour Contrast Analyser」は 2018 年現在、Firefox Add-ons から入手できない状態にある。
検証
手順
- テキストの色を指定できる箇所全てを見る。
- テキストの色が指定されていないことを確認する。
- 背景として用いられている背景色又は画像が指定されている箇所全てを見る。
- 背景として用いられている背景色又は画像が指定されていないことを確認する。
期待される結果
- 2. 及び 4. の結果が真である。