ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Kann dauern
Wichtig für Rolle:
Design
Worum geht's?
Eine Website muss auch für Menschen mit Farbsehschwäche funktionieren. Wird etwas nur über Farbe vermittelt? (Beispiel: grüner Punkt = aktiv, rot = inaktiv). Dann braucht es zusätzliche grafische Elemente oder Text.
Umsetzung
Nutze die für deine Situation passende Technik, um das Erfolgskriterium zu erfüllen.
Sinn nicht nur durch Farbe vermitteln
Wo immer Farbe selbst wichtig ist und erkannt werden muss, um zu verstehen, was das Design sagen will, dann muss es eine Alternative geben.
Nehmen wir als Beispiel ein fehlerhaftes Formularfeld.
Wenn nur eine rote Umrandung angezeigt wird, um den Fehler klarzumachen, ist das ein Problem. Ich muss diese Farbe erkennen können, um zu verstehen, dass das ein Fehler ist.
Um mich nicht nur auf Farbe zu verlassen, kann ich entweder einen Text dazu schreiben oder aber auch ein Icon nutzen, das ein Fehlersymbol zeigt. Beides sind legitime Varianten nach diesem Kriterium.
WCAG-Technik(en) in Englisch:
Links im Fließtext richtig hervorheben
Links im Fließtext sollten am besten nicht nur farblich hervorgehoben werden, sondern zusätzlich unterstrichen (oder anders ausgezeichnet) sein.
Werden Links im Fließtext dennoch nur farblich hervorgehoben sind, muss der Kontrast von der Farbe des Links zur Farbe des umgebenden Textes mindestens 3:1 betragen. Zusätzlich dazu muss der Text selbst zum Hintergrund einen Kontrast von mindestens 4,5:1 haben.
Wichtige Infos in Infografiken nicht nur durch Farbe zeigen
Wenn ein Bild nur über Farben wichtige Informationen unterscheidet – etwa in Karten oder Infografiken –, braucht es zusätzlich Muster, Symbole oder Beschriftungen. So bleibt die Aussage auch ohne Farbwahrnehmung verständlich.
Entscheidend ist dabei, ob die Farbe selbst eine Bedeutung trägt. Steht die Farbe Grün alleine für »positiv«, braucht es ein weiteres Merkmal. Haben die Farben keine eigene Bedeutung, wie bei den Segmenten eines Tortendiagramms, reicht ein ausreichender Farbkontrast von mindestens 3:1.
Anmerkungen
Hinweis: Wann reicht ein Kontrast von über 3:1 als Unterschied aus?
Wenn Farben sich nicht nur im Farbton, sondern auch deutlich in der Helligkeit unterscheiden, zählt das alleine als zusätzliche visuelle Unterscheidung. Vorausgesetzt, der Kontrast beträgt mindestens 3:1 zu der anderen Farbe.
Wichtig ist aber: Sobald die genaue Farbwahrnehmung nötig ist (z. B. grün = gültig, rot = ungültig), braucht es zusätzlich ein anderes Unterscheidungsmerkmal, etwa Symbole oder Text.
Wir empfehlen allerdings immer, ein zusätzliches Merkmal zu nutzen. Sich nur auf den Farbkontrast zu verlassen, ist nicht für jeden User optimal.
Barrierfreie Designs erstellen?
Unser Workshop fürs Design!
Lerne in unserem Workshop alles, was du als Designer*in wissen musst, um barrierefreie Design-Systeme für digitale Produkte, und ganze Brands zu erstellen.
