ユーザーエージェントが個人のスタイルシート又は他の方法を通して前景と背景の色を制御することを可能にする全てのウェブコンテンツ技術
これは、次の達成基準に関連する不適合事例である：
失明、認知障害、言語又は学習障害のある利用者は、多くの場合特定の前景色と背景色の組み合わせを好む。弱視の利用者は黒の背景に白い文字のウェブページの方がより見やすく、そしてそれぞれのユーザーエージェントをこのコントラストに設定していることがある。多くのユーザーエージェントでは、コンテンツ制作者が指定したスタイル全てを無効にすることなしにコンテンツ制作者が好みの前景色と背景色を選べるようになっている。これにより、利用者は好ましい色の組み合わせの中でコンテンツ制作者によって色が指定されていないページを閲覧することが可能になる。
コンテンツ制作者が前景と背景の両方の色を指定しない限り、コンテンツ制作者は、 コントラストの要求を満足したコントラストになっていることを保証できない。たとえば、 コンテンツ制作者がテキストを灰色に指定していたら、それはユーザーエージェントの設定より優先 され、（ユーザーエージェントによって利用者に設定された）明るい灰色の背景に（コンテンツ制作者に 指定された）灰色のテキストというページが描画される。この原則は逆も成り立つ。もしコンテンツ 制作者が背景を白にしていたら、コンテンツ制作者に指定された白い背景は、利用者のユーザーエージェント の設定によって表現されている好みのテキストの色に似ているかもしれない。そのため、利用者にとって使用できない ページに描写されてしまう。コンテンツ制作者は利用者がどのようにして好みの設定にしているかを予測できない ため、コンテンツ制作者が前景色を指定していたら十分なコントラストを持つ背景色も指定すべきであり、 逆もまた同様である。
前景色と背景色の両方を同じCSS規則上で定義する必要はない。CSSの色のプロパティは、先祖要素から引き継がれるので、前景色と背景色の両方が直接的に、又はその色が要素に対して適用される継承を通して定義されるのであればそれで十分である。
注記： 実践するにあたっては、テキストの全ての状態を含めることが重要である。例えば、テキスト、リンクテキスト、訪問済みリンクテキスト、マウスフォーカスがあたったとき及びキーボードフォーカスがあたったときのリンクテキストなど。
次の例では、背景色はbody要素で定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていないことになる。
コード例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>人口動態に関する研究</title>
</head>
<body bgcolor="white">
<p> ... ドキュメント本文 ...</p>
</body>
</html>次の例では、前景色はボディ要素で定義されているが背景色は定義されていない。よって、この事例は達成基準を満たしていない。
コード例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>人口動態に関する研究</title>
</head>
<body color="white">
<p>... ドキュメント本文 ...</p>
</body>
</html>次の例では、背景色はCSSスタイルシートで定義されているが前景色は定義されていない。よって、この事例は達成基準を満たしていない。
コード例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>キャンバス背景の設定</title>
<style type="text/css">
body {background-color:white}
</style>
</head>
<body>
<p>背景は白です。</p>
</body>
</html>次の例では、前景色はCSSスタイルシートで定義されているが背景色は定義されていない。よって、この事例は達成基準を満たしていない。
コード例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>キャンバス背景（←前景の間違い？）の設定</title>
<style type="text/css">
body {color:white}
</style>
</head>
<body>
<p>前景は白です。</p>
</body>
</html>次の例では、リンクテキスト（前景）の色をボディ要素で定義している。しかし背景色は定義していない。よって、この事例は達成基準を満たしていない。
コード例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>人口動態の研究</TITLE>
<style type="text/css">
a:link { color: red }
a:visited { color: maroon }
a:active { color: fuchsia }
</style>
</head>
<body>
<p>... ドキュメント本文 ... <a href="foo.htm">Foo</a></p>
</body>
</html>この参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
ウェブページのソースコードを見る。
コンテンツ制作者が指定した前景色がある。
コンテンツ制作者が指定した背景色がある。
注記 1： 色と背景色は外部のスタイルシート又は継承ルールによって、先行する一連のセレクターのあらゆるレベルで指定することができる。
注記 2： 背景色はCSSの「background-image」プロパティ又は「background」（画像のURL、例えば、 'background: url("images/bg.gif")'）プロパティで背景画像を用いて 指定されているかもしれない。背景画像があるとしても背景色を指定する必要がある。なぜならば利用者は ブラウザ上で画像を非表示にしているかもしれないからである。よって、背景画像と背景色をチェックする。
2.を満たしているが 3.を満たしていない、又は、3.を満たしているが 2.を満たしていない場合、この不適合の条件が適用され、コンテンツは達成基準に不適合となる。
日本語訳における注記：
この文書の正式版は、W3Cサイトで公開されている英語の文書であり、この日本語訳には誤訳が含まれていることもありえます。なお、文中にある「日本語訳における注記」は、W3Cの原文にはないものであり、日本語訳監修者が追記したものです。