前景色と背景色のコントラストは十分ですか?
WAI / WCAG 1.0 優先度2 チェックポイント 2.2
 
 
概要

Webページにイメージ、オブジェクト、あるいはアプレットがあります。前景色と背景色のコントラストが、それぞれを識別するには不十分なところがあるかもしれません。

 
 
チェック方法

Webページで使用している色および色のついたアイテムが、ユーザーがそのWebページを利用する際に想定できるあらゆる状況において、はっきりと識別できることを確認してください。
前景色と背景色のコントラストは、色に加えて、輝度のレベル(すなわち、モノクロ状態でのコントラスト)、フォントのスタイル、サイズ、あるいは書体などの違いによっても伝えられていることを確認してください。

もし、色を使用しているならば、以下に挙げる3つのすべてにおいて差をつけることで、前景色と背景色の違いを大きくしてください。

  • 色調
  • 彩度
  • 明度

Webページを簡単にテストする方法:

  • Webページをモノクロ画面で見て、コンテンツを利用してみる
  • Webページをモノクロで印刷してみる
  • Webページを印刷して、それを2~3回コピーして、そのコントラストを確認する。こうすることで、(リンクの下線のような)予備の目印をどこに追加すべきか、その目印が情報を伝えるのに小さすぎたり目立たなかったりしないかを確認することができる
 
 
解説

配色の選択ミスにより、Webページの情報あるいはイメージの認知および理解を妨げてしまうことがよくあります。

例えば、以下のようなケースが考えられます。

  • 背景色・前景色の選択に問題がある。
  • ユーザーの使用しているモニタが、デザイナーの使用しているモニタと同等のクオリティで色を表現できない。
  • ユーザーがPDAあるいは携帯電話のモノクロ画面を使用している。
  • ユーザーがモノクロのプリンタでWebページを印刷する必要がある。
  • ユーザーの色覚に特性がある。

W3Cのガイドラインには、以下のような項目があります。

ガイドライン 2. 色だけに依存しないこと
テキストおよびグラフィックが、色のない状態でも理解可能であることを確認してください。

もし、情報を伝えるのに色だけが用いられているとしたら、特定の色を識別できないユーザー、あるいはモノクロのディプレイまたはディスプレイのないデバイスを使用しているユーザーは、その情報を受け取ることができないでしょう。前景色と背景色の色調が近すぎると、モノクロディスプレイで見たときや異なるタイプの色覚特性のユーザーが見たときにはコントラストが十分ではない恐れがあります。