WCAG 2.1 - 1.4.1
Use of Color
Farbe wird nicht als das einzige visuelle Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion zu fördern oder ein visuelles Element zu unterscheiden.
Inhalt
Was steht in den Guidelines zum Success Criterium 1.4.1 - Use of Color?Was Bedeutet das Success Criterium 1.4.1 - Use of Color?Warum ist es so wichtig, das Success Criterium 1.4.1 - Use of Color zu beachten?Was hat das Success Criterium 1.4.1 - Use of Color mit dem BFSG zu tun?Lösungen für 1.4.1 - Use of Color anhand von CodebeispielenWie löse ich Verstöße gegen das Success Criterium 1.4.1 - Use of Color?Was steht in den Guidelines zum Success Criterium 1.4.1 - Use of Color?
Was Bedeutet das Success Criterium 1.4.1 - Use of Color?
Das Success Criterion 1.4.1 verlangt, dass Informationen, Hinweise oder Funktionen auf einer Website nicht ausschließlich über Farbe vermittelt werden dürfen. Das heißt: Wenn du zum Beispiel wichtige Hinweise, Status-Meldungen, Links oder Buttons nur durch Farbe unterscheidest, können Menschen mit Farbenfehlsichtigkeit (z.B. Rot-Grün-Schwäche) oder Screenreader-Nutzer diese Informationen möglicherweise nicht wahrnehmen oder korrekt zuordnen.
Konkret bedeutet das: Alles, was rein farblich codiert ist, muss durch eine zusätzliche, nicht-farbige Unterscheidung ergänzt werden – z.B. durch Symbole, Text, Formen oder Unterstreichungen.
Warum ist es so wichtig, das Success Criterium 1.4.1 - Use of Color zu beachten?
Viele Menschen haben Schwierigkeiten, Farben zu unterscheiden oder zu sehen. Farbenblinde oder farbsehschwache Personen können so wichtige Informationen, Fehlermeldungen oder Links verpassen. Auch für blinde Nutzer:innen, die sich Websites von Screenreadern vorlesen lassen, sind reine Farbinformationen nicht zugänglich. Ohne Alternativen zur Farbdarstellung werden wichtige Informationen oder Aktionen unzugänglich – ein erheblicher Nachteil.
Was hat das Success Criterium 1.4.1 - Use of Color mit dem BFSG zu tun?
Das Barrierefreiheitsstärkungsgesetz (BFSG) schreibt vor, dass Websites von Unternehmen barrierefrei zugänglich sein müssen, d.h. auch für Menschen mit Behinderungen. Die WCAG sind der Maßstab zur Bewertung. Da 1.4.1 eine Anforderung auf Level A ist (also grundlegendes Mindestmaß an Barrierefreiheit), kann ein Verstoß dazu führen, dass die Website nicht BFSG-konform ist. Ohne eine Alternative zu farblicher Unterscheidung werden grundlegende Informationen und Funktionen nicht allen Nutzenden vermittelt, was grob gegen den Kern des Gesetzes verstößt.
Lösungen für 1.4.1 - Use of Color anhand von Codebeispielen
Falscher Code
<p>Bitte wählen Sie eine Kategorie aus:<br>
<span style="color: green;">Freigeschaltet</span> | <span style="color: red;">Gesperrt</span></p>Korrekter Code
<p>Bitte wählen Sie eine Kategorie aus:<br>
<span style="color: green;">✓ Freigeschaltet</span> | <span style="color: red;">✕ Gesperrt</span></p>Der schlechte Code unterscheidet den Status ausschließlich durch Farbe (grün/rot). Wer die Farben nicht erkennen kann, versteht den Unterschied nicht. Im guten Beispiel wird zusätzlich ein Symbol verwendet, sodass Status auch ohne Farberkennung eindeutig sind.
Falscher Code
<ul>
<li style="color: blue;">Kontakt</li>
<li style="color: black;">Impressum</li>
<li style="color: black;">AGB</li>
</ul>Korrekter Code
<ul>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
<li><a href="agb.html">AGB</a></li>
</ul>Im schlechten Beispiel werden Links nur durch blaue Farbe angezeigt, wie es oft üblich ist. Wenn Nutzer Farben nicht unterscheiden können, sind die Links nicht als solche erkennbar. Das gute Beispiel verwendet echte <a>-Elemente für Links, die automatisch auch unterstrichen werden und für Screenreader als Link gekennzeichnet sind.
Wie löse ich Verstöße gegen das Success Criterium 1.4.1 - Use of Color?
Unser Accessibility Audit bietet Ihnen die Möglichkeit, mittels unseres AI-basierten Barrierefreiheits-Assistenten, vollautomatisch konkrete Lösungsvorschläge für Ihre Seite zu erstellen. Dafür scannen wir Ihre Website und ihren Quellcode, finden Problemstellen und zeigen Ihnen anhand Ihres eigenen Websitecode fertige Lösungen zum Kopieren und Einfügen. Starten Sie jetzt den Accessibility Audit kostenlos.