ÜBERBLICK
Umsetzbarkeit:
- Komplexität:Einfach
- Dauer:Kann dauern
Wichtig für Rolle:
Design
Worum gehts?
Eine Webseite darf sich nicht darauf verlassen, dass User Farben sehen können. Wichtige Informationen dürfen nicht nur durch den Einsatz von Farbe vermittelt werden (Beispiel: Aktiv- oder Fehlerzustände).
Umsetzung
Mindestens eine der folgenden Möglichkeiten muss umgesetzt werden, um das Kriterium zu erfüllen. Nähere Informationen dazu findest du in den jeweils verlinkten WCAG-Techniken.
Farbunterschiede auch im Text vermitteln
Wenn du Farbe verwendest, um Infos zu vermitteln, wie eine rote Umrandung für ein falsch ausgefülltes Formularfeld, muss diese Information auch als Text verfügbar sein.
WCAG-Technik(en) in Englisch:
Links im Fließtext
Links im Fließtext sollten am besten nicht nur farblich hervorgehoben werden, sondern zusätzlich unterstrichen sein.
Werden Links im Fließtext dennoch durch Farbe hervorgehoben, muss der Kontrast zum umgebenden Text mindestens 3:1 betragen. Zusätzlich dazu muss der Text selbst zum Hintergrund einen Kontrast von mindestens 4,5:1 haben. Außerdem muss es in diesem Fall spätestens bei Hover eine zusätzliche Differenzierung zum Normalzustand geben – etwa eine Unterstreichung.
Zusätzliche Kennzeichnung in Bildern
Wenn ein Bild nur Farbe zur Unterscheidung von wichtigen Informationen nutzt (z. B. in Karten oder Infografiken), müssen zusätzlich Muster, Symbole oder Beschriftungen vorhanden sein, damit diese Unterscheidung auch ohne Farbwahrnehmung möglich ist.
Anmerkungen
Hinweis: Bei einem Kontrast von über 3:1 wird nicht mehr nur durch Farbe kommuniziert
Wenn Inhalte so durch Farben vermittelt, dass sie nicht nur im Farbton unterscheiden, sondern es auch einen signifikanten Unterschied in der Helligkeit gibt, dann zählt dies als zusätzliche visuelle Unterscheidung – solange der Unterschied der Farben ein Mindestkontrastverhältnis von 3:1 hat.
Beispiel: Ein helles Grün und ein dunkles Rot unterscheiden sich im Farbton und der Helligkeit. Das wäre hier erlaubt, wenn das Kontrastverhältnis mindestens 3:1 beträgt.
Das gilt aber auch nur dann, wenn man nicht die Farbe genau wahrnehmen muss, um den Inhalt zu verstehen. Wenn du mir also sagst: In den Grünen Zonen darfst du mit deinem Ticket fahren und in den roten nicht, dann muss ich ja Grün und Rot erkennen können. Dann muss ein weiterer visueller Indikator vorhanden sein.
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.
