Skip to content

テクニック F24:達成基準 1.4.3、1.4.6 及び 1.4.8 の失敗例 － 背景色を指定せずに前景色を指定する (又は、前景色を指定せずに背景色を指定する)

このテクニックについて

このテクニックは、次に関連する:

この失敗例は、ユーザエージェントが個人のスタイルシート又は他の方法を通して前景色及び背景色を制御することを可能にする全ての技術に適用される。

解説

失明、認知障害、言語又は学習障害のある利用者は、多くの場合特定の前景色と背景色の組み合わせを好む。弱視の利用者は黒の背景に白い文字のウェブページの方がより見やすく、そしてそれぞれのユーザエージェントをこのコントラストに設定していることがある。多くのユーザエージェントでは、制作者が指定したすべてのスタイルを上書きせずに、好みの前景色または背景色に関する設定を利用者が選択できるようになっている。これにより、利用者は好ましい色の組み合わせの中でコンテンツ制作者によって色が指定されていないページを閲覧することが可能になる。

コンテンツ制作者が前景と背景の両方の色を指定しない限り、コンテンツ制作者は、コントラストの要求を満足したコントラストになっていることを保証できない。たとえば、コンテンツ制作者がテキストを灰色に指定していたら、それはユーザエージェントの設定より優先され、(ユーザエージェントによって利用者に設定された) 明るい灰色の背景に (コンテンツ制作者に指定された) 灰色のテキストというページが描画される。この原則は逆も成り立つ。もしコンテンツ制作者が背景を白にしていたら、コンテンツ制作者に指定された白い背景は、利用者のユーザエージェントの設定によって表現されている好みのテキストの色に似ているかもしれない。そのため、利用者にとって使用できないページに描写されてしまう。コンテンツ制作者は利用者がどのようにして好みの設定にしているかを予測できないため、コンテンツ制作者が前景色を指定していたら十分なコントラストを持つ背景色も指定すべきであり、逆もまた同様である。

前景色と背景色の両方を同じ CSS 規則上で定義する必要はない。CSS の色のプロパティは、先祖要素から引き継がれるので、前景色と背景色の両方が直接的に、又はその色が要素に対して適用される継承を通して定義されるのであればそれで十分である。

注記

実践するにあたっては、テキストの全ての状態を含めることが重要である。例えば、テキスト、リンクテキスト、訪問済みリンクテキスト、マウスフォーカスがあたったとき及びキーボードフォーカスがあたったときのリンクテキストなど。

事例

事例 1: CSS で背景色のみ指定する

次の例では、背景色は CSS スタイルシートで定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていない。

<!doctype>
  <html lang="en">
  <head>
    <title>Setting the canvas background</title>
    <style>
      body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

事例 2: CSS で前景色のみ指定する

次の例では、前景色は CSS スタイルシートで定義されているが背景色は定義されていない。よって、この事例は達成基準を満たしていない。

<!doctype>
<html lang="en">
<head>
  <title>Setting the canvas foreground</title>
  <style>
    body {color:white}
  </style>
</head>
<body>
  <p>My foreground is white.</p>
</body>
</html>

事例 3: CSS でリンクテキストの色を指定する

次の例では、リンクテキスト (前景) の色をボディ要素で定義している。しかし背景色は定義していない。よって、この事例は達成基準を満たしていない。

<!doctype>
<html lang="en">
<head>
  <title>A study of population dynamics</TITLE>
  <style>
    a:link { color: red }
    a:visited { color: maroon }
    a:active { color: fuchsia }
</style>
</head>
<body>
 <p>... document body... <a href="foo.htm">Foo</a></p>
</body>
</html>

関連リソース

推奨を意味するものではない。

検証

手順

  1. ウェブページのソースコードを調べる。
  2. コンテンツ制作者が指定した前景色があるかどうかをチェックする。
  3. コンテンツ制作者が指定した背景色があるかどうかをチェックする。

注記

色及び背景色は、外部のスタイルシート又は継承ルールによって、先行する一連のセレクターのあらゆるレベルで指定することができる。

背景色は CSS プロパティ 'background-image' 又は 'background' (画像の URL、例えば、'background: url("images/bg.gif")') プロパティで背景画像を用いて指定されているかもしれない。背景画像があるとしても、背景色を指定する必要がある。なぜならば利用者はブラウザ上で画像を非表示にしているかもしれないからである。よって、背景画像及び背景色を確認する必要がある。

期待される結果

チェック 2 が真であるがステップ 3 が偽である場合、又はチェック 3 が真であるがステップ 2 が偽である場合、この失敗条件は適用され、コンテンツは達成基準に失敗する。

Back to Top