Alle Techniken, die es Benutzeragenten erlauben, Vorder- und Hintergrundfarbe durch persönliche Stylesheets oder mit anderen Mitteln zu steuern.
Dieser Fehler bezieht sich auf:
Benutzer mit Verlust des Sehvermögens oder mit kognitiven-, Sprach- und Lernbehinderungen ziehen oft bestimmte Vorder- und Hintergrundfarbkombinationen vor. In manchen Fällen finden es Individuen mit niedrigem Sehvermögen sehr viel leichter, eine Webseite zu sehen, die weißen Text auf einem schwarzen Hintergrund hat und es kann sein, dass sie ihren Benutzeragenten so eingestellt, dass dieser Kontrast gezeigt wird. Viele Benutzeragenten ermöglichen es Autoren, eine Präferenz zu der Vorder- und Hintergrundfarbe, die sie gerne sehen wollen, zu wählen, ohne alle vom Autor festgelegten Formatierungen außer Kraft zu setzen. Dies ermöglicht es Benutzern, Seiten anzusehen, auf denen Farben nicht in ihrer bevorzugten Farbkombination vom Autor festgelegt wurden.
Außer der Autor legt sowohl Vorder- als auch Hintergrundfarben fest, kann er (der Autor) nicht länger garantieren, dass der Benutzer einen Kontrast erhält, der die Kontrastanforderungen erfüllt. Wenn der Autor zum Beispiel festlegt, dass der Text grau sein sollte, dann kann dies die Einstellungen des Benutzeragenten außer Kraft setzen und eine Seite rendern, die einen grauen Text (vom Autor festgelegt) auf einem hellgrauen Hintergrund hat (der vom Benutzer in seinem Benutzeragenten festgelegt wurde). Dieses Prinzip funktioniert auch umgekehrt. Wenn der Autor es erzwingt, dass der Hintergrund weiß ist, dann könnte der vom Autor festgelegte weiße Hintergrund eine ähnliche Farbe haben, wie die vom Benutzer in den Einstellungen seines Benutzeragenten zum Ausdruck gebrachte Vorliebe bei der Textfarbe, so dass die Seite dann für den Benutzer unbrauchbar gerendert wird. Da ein Autor nicht vorhersagen kann, wie ein Benutzer seine Einstellungen konfiguriert haben könnte, sollte der Autor, wenn er eine Vordergrund-Textfarbe festlegt, auch eine Hintergrundfarbe festlegen, die einen ausreichenden Kontrast zum Vordergrund hat und andersum.
Es ist nicht notwendig, dass die Vorder- und Hintergrundfarben beide mit der gleichen CSS-Regel definiert werden. Da CSS-Farb-Properties von Ancestor-Elementen erben, ist es ausreichend, wenn sowohl Vorder- als auch Hintergrundfarben entweder direkt oder durch Vererbung definiert werden zu dem Zeitpunkt, zu dem die Farbe auf ein bestimmtes Element angewendet wird.
Anmerkung: Best Practice ist es, alle Zustände des Textes einzubeziehen. Zum Beispiel Text, Linktext, Text von besuchten Links, Linktext mit 'hover' und Tastaturfokus usw.
Im unten stehenden Beispiel wird die Hintergrundfarbe auf dem body-Element definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!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>A study of population dynamics</title>
</head>
<body bgcolor="white">
<p> ... document body...</p>
</body>
</html>Im unten stehenden Beispiel wird die Vordergrundfarbe auf dem body-Element definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!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>A study of population dynamics</title>
</head>
<body color="white">
<p>... document body...</p>
</body>
</html>Im unten stehenden Beispiel wird die Hintergrundfarbe im CSS-Stylesheet definiert, die Vordergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!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>Setting the canvas background</title>
<style type="text/css">
body {background-color:white}
</style>
</head>
<body>
<p>My background is white.</p>
</body>
</html>Im unten stehenden Beispiel wird die Vordergrundfarbe im CSS-Stylesheet definiert, die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!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>Setting the canvas background</title>
<style type="text/css">
body {color:white}
</style>
</head>
<body>
<p>My foreground is white.</p>
</body>
</html>Im unten stehenden Beispiel wird die Linktext- (Vordergrund-) Farbe auf dem body-Element definiert. Die Hintergrundfarbe wird hingegen nicht definiert. Daher scheitert dieses Beispiel am Erfolgskriterium.
Code-Beispiel:
<!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>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>Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.
Untersuchen Sie den Code der Webseite.
Prüfen Sie, ob es eine vom Autor festgelegte Vordergrundfarbe gibt
Prüfen Sie, ob es eine vom Autor festgelegte Hintergrundfarbe gibt
Anmerkung 1: Farbe und Hintergrundfarbe können auf jeder Ebene in der Kaskade (Cascade) der vorhergehenden Selektoren festgelegt werden, durch externe Stylesheets oder durch Vererbungsregeln.
Anmerkung 2: Die Hintergrundfarbe kann auch festgelegt werden, indem man ein Hintergrundbild mit dem CSS-Property 'background-image' oder mit dem CSS-Property 'background' (mit dem URI des Bildes, z.B. 'background: url("images/bg.gif")') benutzt. Auch bei Hintergrundbildern ist es notwendig, eine Hintergrundfarbe festzulegen, da es sein kann, dass Benutzer Bilder in ihrem Browser abgeschaltet haben. Aber das Hintergrundbild und die Hintergrundfarbe müssen geprüft werden.
Wenn Schritt #2 wahr ist, Schritt #3 aber falsch ist ODER wenn Schritt #3 wahr ist aber Schritt #2 ist falsch, dann findet diese Fehlersituation Anwendung und der Inhalt scheitert an diesen Erfolgskriterien.