Prüfpunkt 1.4.1Stufe AFarbe und Kontrast
Wie sieht meine Website für farbenblinde Besucher aus?
Das zeigt Ihnen Ihr Browser selbst. Chrome und Firefox rechnen jede Seite auf Wunsch so um, wie sie ohne Rot, ohne Grün, ohne Blau oder ganz ohne Farbe aussieht. Sie brauchen dafür nur den Browser am Computer und ein paar Griffe in den Entwicklerwerkzeugen. Was Sie danach auf der Seite suchen, steht unten.
Der Weg in Chrome und Firefox
In Chrome öffnet F12 die Entwicklerwerkzeuge. Strg, Umschalt und P öffnen darin eine Befehlszeile. Tippen Sie „rendering“ und wählen Sie „Show Rendering“. Im Reiter Rendering finden Sie die Auswahl „Emulate vision deficiencies“. Das sind die Namen, die Google in seiner englischen Anleitung nennt. In Firefox liegt dieselbe Auswahl im Accessibility Inspector, dem Werkzeug für Barrierefreiheit, unter „Simulate“. Die Seite bleibt dabei bedienbar. Füllen Sie im simulierten Zustand das Formular falsch aus und legen Sie etwas in den Warenkorb, denn viele Farbsignale erscheinen erst dann.
Beginnen Sie mit Rot und Grün
Laut National Eye Institute ist die Schwäche bei Rot und Grün die häufigste Form. Stellen Sie also zuerst Deuteranopia (ohne Grün) und Protanopia (ohne Rot) ein. Tritanopia (ohne Blau) gehört zu der Form, bei der Blau und Gelb gleich aussehen. Achromatopsia (ohne Farbe) ist die strengste Probe: Es bleibt nur, was Form, Wort und Helligkeit sagen.
Hier sagt Farbe oft etwas aus
Gehen Sie die Stellen durch, an denen Farbe eine Bedeutung hat: das Formular nach einem Fehler, die Lieferangabe im Shop, den Buchungskalender, Diagramm und Legende, Links im Fließtext. Fragen Sie sich je Stelle: Kann ich noch sagen, was gilt? Wer die Seite gebaut hat, weiß ohnehin, was der grüne Punkt heißt. Lassen Sie deshalb jemanden schauen, der die Seite nicht kennt.
Die Simulation ist eine Rechnung
Firefox rechnet nach einem Modell von Machado, Oliveira und Fernandes aus dem Jahr 2009. Das Bild ist eine Annäherung, und das National Eye Institute beschreibt die Beschwerden oft als so mild, dass Betroffene sie kaum bemerken. Einen Befund der Simulation nehmen Sie also ernst, ein unauffälliges Bild beweist wenig. Ob eine Meldung auch als Text im Code steht, zeigt sie ebenfalls nicht. Das prüfen Sie am Quelltext oder mit einem Vorleseprogramm.
Beispiele
Freier Tag im Buchungskalender
<td class="frei">14</td> /* nur grün hinterlegt */<td class="frei">14 <span>frei</span></td>Das Wort bleibt in jeder Einstellung der Simulation lesbar.
Mehr zu diesem Thema
Weiter im Prüfbereich Barrierefreiheit
- Wer verlangt von mir die Stufe AAA?Kein Gesetz in Österreich oder Deutschland verlangt die Stufe AAA als Ganzes. Einzelne Kriterien verlangen Behörden, Ausschreibungen und Ihr Publikum.
- Für wen macht die Stufe AAA im Alltag einen Unterschied?Ältere Augen, nachlassendes Gehör, Menschen, die Texte nicht sinnentnehmend lesen: Welche AAA-Kriterien wem helfen, mit Zahlen von WHO und LEO-Studie.
- Wie stoppen Besucher automatisch startende Musik auf einer Website?Ton, der länger als drei Sekunden automatisch spielt, braucht einen Stopp- oder Lautstärkeregler direkt auf der Seite. Sonst ist er ein echtes Hindernis.
- Welcher Farbkontrast ist für Text auf Websites vorgeschrieben?Normaler Text braucht mindestens 4,5:1 Kontrast zum Hintergrund, großer Text 3:1. Hellgrau auf Weiß fällt fast immer durch und bleibt unlesbar.
Dieser Prüfpunkt gehört zum Prüfbereich Barrierefreiheit; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
