Element

all elements

Fehler-Typ

Wissen

Richtlinien

Anforderung

Für ausreichenden Kontrast zwischen Text-und Hintergrundfarben.

Fehler

Der Kontrast zwischen der Farbe des Textes und der Hintergrund für das Element ist nicht ausreichend, um WCAG2.0 Level AA entsprechen.

Kurze Beschreibung

Die visuelle Darstellung von Text muss ein Kontrastverhältnis von mindestens 4,5:1 haben, außer für einen groß angelegten Text, der ein Kontrastverhältnis von mindestens 3:1 haben muss, der durch einen Kontrast-Algorithmus von WCAG2.0 bestimmt wird. Groß angelegte Texte werden mindestens 18-Punkte (oder 14 Punk wenn fett) enthalten werden.

Rational

Das Grundprinzip beruht auf a) Annahme der das 3:1 Kontrastverhältnis für minimalen annehmbaren Kontrast für normale Beobachter, in dem ANSI-Standard basiert, und b) dem empirischen Befund, dass in der Bevölkerung, die Sehschärfe von 20/40 mit einem Kontrast zugeordnet ist Empfindlichkeit Verlust von rund 1,5 [ARDITI-Faye]. Ein Benutzer mit 20/40 wären deshalb ein Kontrastverhältnis von 3 * 1,5 = 4,5 bis 1. Nach analoger empirische Befunde und die gleiche Logik, die Benutzer mit 20/80 Sehschärfe erfordern würde dagegen von etwa 7:1.

Wie repaieren

Verwenden Sie einen Farbkontrast Bewerter zur Ermittelung, ob Text-und Hintergrundfarben ein Kontrastverhältnis von 4,5:1 für den Standard-Text, oder 3:1 größeren Text für die Produktion den Farbcode, um ausreichenden Kontrast sicher zu stellen. http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#visual-audio-contrast-contrast-resources-head

Beispiel wiederherstellen

<div style="background-color:#FFFFFF">
<span style="color:#000000">Farbige Text muss ausreichend Kontrast mit einem farbigen Hintergrund</span>
</div>

Wie ermitteln

Frage Gibt es mehr als ein 4.5:1 Kontrastverhältnis zwischen Standard-Text und Hintergrund, oder ein 3:1 Kontrastverhältnis für groß angelegte Text?
PASS Ja, das ist das Kontrastverhältnis von mehr als 4,5:1 für Text, und weniger als 3:1 für großen Text
Gescheitert Nein, das ist das Kontrastverhältnis von weniger als 4,5:1 für Text, und weniger als 3:1 für großen Text

Schritte für die Prüfung

Prozedur

1. Geben Sie die URL, oder laden Sie den HTML-Code einer Webseite in die Farbwerte für Text und / oder Herkunft definiert sind, haben Sie den Kontrast Bewerter bestimmen das Kontrastverhältnis zwischen Text-und Hintergrundfarben.
2. Für einige Gegensatz Evaluationsinstrumente, geben Sie den Hex Farbcodes (zB # FFEE00) für den Text und den Hintergrund, auf dem es um das Kontrastverhältnis berechnen erscheint.

Erwartetes Ergebnis

1. Der Kontrast Bewerter zeigt ein Kontrastverhältnis von mehr als oder gleich 4,5:1 für genormte Größe text.Standard Text wird als weniger als 18-Punkte (oder 14 Punkt, wenn fett). lich.
2. Der Kontrast Bewerter zeigt ein Kontrastverhältnis größer oder gleich 3:1 für groß angelegte Text. Groß angelegte Text wird als mindestens 18-Punkte (oder 14 Punkt, wenn fett) werden.

Ergebnis gescheitert

1.Der Kontrast Bewerter zeigt ein Kontrastverhältnis von weniger als 4,5:1 für genormte Texte. Standardgröße vomText wird weniger als 18-Punkt (oder 14 Punkt, wenn dieser fett dargestellt ist).
2. Der Kontrast Bewerter zeigt ein Kontrastverhältnis von weniger als 4,5:1 für genormte Texte. Standardgröße vomText wird weniger als 18-Punkt (oder 14 Punkt,
wenn dieser fett dargestellt ist.

Beispiel

Pass Beispiel

High contrast black text on a white background
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #301 - Positive</title>
</head>
<body>
<p style="background-color:#ffffff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

Beispiele gescheitert

Low contrast black text on a blue background
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN""http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>OAC Testfile - Check #301 - Negative</title>
</head>
<body>
<p style="background-color:#0000ff;color:#000000;">
Read the <a href="carol-text-dogs.txt">text transcript of Carol's talk about dogs</a>.
</p>
</body>
</html>

English | German | Italiano


Website-Engine-Code ist copyright © 2011
Inclusive Design Institute
Webservice Api