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

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

ユーザエージェントが個人のスタイルシート又は他の方法を通して前景と背景の色を制御することを可能にする全てのウェブコンテンツ技術

これは、次の達成基準に関する達成方法である:

解説

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

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

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

注記

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

事例

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

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

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas background</title>
    <style type="text/css">

       body {background-color:white}
    </style>
  </head>
  <body>
    <p>My background is white.</p>
  </body>
</html>

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

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>Setting the canvas foreground</title>
    <style type="text/css">
       body {color:white}
    </style>
  </head>

  <body>
    <p>My foreground is white.</p>
  </body>
</html>

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

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

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "https://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</TITLE>
 <style type="text/css">
  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>

例 4: HTML の bgcolor 属性で背景色のみ指定する

次の例では、背景色は body 要素で定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていないことになる。

HTML 4 の時点で bgcolor 属性の使用は廃止予定である、しかしこの失敗例は、この使用法がまだ一部のウェブサイトで見られるため含まれていることに注意する。 

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
      <html>
          <head>
              <title>A study of population dynamics</title>
          </head>
          <body bgcolor="white">
              <p> ... document body...</p>
          </body>
  </html>

例 5: HTML の text 属性を持つ前景色のみを指定する

次の例では、前景色は body 要素で定義されているが、背景色は定義されていない。したがって、この例は達成基準を満たしていない。

HTML 4 の時点で text 属性の使用は廃止予定である、しかしこの失敗例は、この使用法がまだ一部のウェブサイトで見られるため含まれていることに注意する。 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
 <title>A study of population dynamics</title>

</head>
<body text="white">
  <p>... document body...</p>
</body>
</html>

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

訳注

CSS2 の「Assigning property values, Cascading, and Inheritance」は、CSS Cascading and Inheritance Level 3 で再定義されている。この仕様は W3C 勧告ではないが、CSS Snapshot 2020 によれば、今日の CSS を構成する仕様として位置づけられている。

検証

手順

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

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

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

期待される結果

#2 の結果が真であるが #3 の結果が偽である、又は、#3 の結果が真であるが #2 の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。