Prüfpunkt 1.4.1Stufe AFarbe und Kontrast
Warum brauchen Fehlermeldungen und Links mehr als nur eine Farbe?
Fehlermeldungen und Links brauchen mehr als eine Farbe, weil viele Menschen Farben nur eingeschränkt unterscheiden — Rot-Grün-Schwäche ist die häufigste Form. Ein rot umrandetes Pflichtfeld ohne erklärenden Text bleibt für diese Besucher unsichtbar markiert. Information muss deshalb doppelt getragen werden: Farbe plus Text, Symbol oder Unterstreichung.
Farbe als Zusatz, nie als einziger Träger
Drei Alltagsfälle zeigen das Problem. Erstens Formulare: Wird ein falsch ausgefülltes Feld nur rot umrandet, findet ein Besucher mit Rot-Grün-Schwäche den Fehler nicht — ergänzen Sie eine Textmeldung wie „Bitte geben Sie eine gültige E-Mail-Adresse ein“. Zweitens Links im Fließtext: Unterscheidet sich ein Link nur durch seine Farbe vom umgebenden Text, ist er für viele nicht als Link erkennbar — die Unterstreichung löst das. Drittens Diagramme und Statusanzeigen: „Grün bedeutet verfügbar, Rot bedeutet ausgebucht“ funktioniert nur mit zusätzlicher Beschriftung oder unterschiedlichen Symbolen. Farbe bleibt dabei ausdrücklich erlaubt und sinnvoll — sie darf nur nie die einzige Informationsquelle sein.
So prüft unser Messkern die Benutzung von Farbe
Die automatische Prüfung mit axe-core erkennt einen typischen Teilfall: Links im Fließtext, die sich vom umgebenden Text allein durch die Farbe abheben — ohne Unterstreichung oder ausreichenden Helligkeitsunterschied. Solche Fälle fließen als Befund in den Bericht ein. Der größere Teil des Kriteriums entzieht sich der Maschine: Ob ein Diagramm nur über Farben erklärt wird oder ob eine Fehlermeldung außer der roten Umrandung auch einen Text hat, erfordert Verständnis des Inhalts. Nach unserem Grundsatz gilt ein unauffälliger Durchlauf deshalb nie automatisch als Nachweis — beim Gold-Standard sieht ein Prüfer Formulare, Diagramme und Statusanzeigen durch und fällt das Urteil.
Beispiele
Fehler nur rot markiert
<label>E-Mail <input class="fehler" style="border-color:red"></label><label for="email">E-Mail</label>
<input id="email" aria-describedby="email-fehler" aria-invalid="true">
<p id="email-fehler">Bitte eine E-Mail-Adresse mit @ eingeben.</p>Rot allein sehen Menschen mit Farbfehlsichtigkeit und Vorleseprogramme nicht. Der Text nennt den Fehler.
Link im Fließtext nur durch Farbe erkennbar
a { color: #2a6bd6; text-decoration: none; }a { color: #2a6bd6; text-decoration: underline; }Der Unterstrich macht den Link auch ohne Farbwahrnehmung erkennbar.
So gehen Sie es an
- Prüfen Sie Ihre Formulare: Jede Fehlermarkierung braucht neben der Farbe einen erklärenden Text am betroffenen Feld.
- Lassen Sie Links im Fließtext unterstreichen — die Farbe allein macht sie für viele Besucher unsichtbar.
- Ergänzen Sie in Diagrammen und Statusanzeigen Beschriftungen oder Symbole zusätzlich zur Farbcodierung.
- Betrachten Sie Ihre Seite einmal in Graustufen — jeder Bildschirm und viele Handys können das — und prüfen Sie, ob alle Informationen erhalten bleiben.
- Kennzeichnen Sie Pflichtfelder mit dem Wort „Pflichtfeld“ oder einem erklärten Sternchen, nie mit Farbe allein.
Weiter im Prüfbereich Barrierefreiheit
- 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.
- Muss sich Text auf einer Website auf 200 Prozent vergrößern lassen?Ja — Besucher müssen Text per Browser-Zoom verdoppeln können, ohne dass Inhalte verloren gehen. Zoom-Sperren am Handy verstoßen gegen die Regel.
- Warum ist echter Text auf Websites besser als Text im Bild?Text als Bild lässt sich weder vorlesen noch vergrößern noch von Google durchsuchen. Echter Text kann alles davon — und ist leichter zu pflegen.
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.
Foto: Alex Mihis, CC0
.jpg){kind=link}