Barrierefreie Assets erstellen: Farbe und Kontrast
Farbe und Kontrast spielen eine wichtige Rolle dabei, wie Nutzer deine Inhalte wahrnehmen und mit ihnen interagieren. Um die Standards für Barrierefreiheit zu erfüllen, ist es wichtig, für einen ausreichenden Kontrast zwischen Text und Hintergrund zu sorgen, sich nicht allein auf die Farbe zu verlassen, um eine Bedeutung zu vermitteln, und Paletten zu wählen, die die Lesbarkeit für alle Nutzer unterstützen. In diesem Artikel erfährst du, wie du Farben und Kontraste am besten einsetzt, um barrierefreie Webangebote zu erstellen.
Um sicherzustellen, dass deine Website, Landing Page, dein Formular oder deine Nachricht die Anforderungen an die Barrierefreiheit erfüllt, kannst du die Checkliste hier nutzen.
Anforderungen
- Kleiner Text (unter 18pt normaler Schrift (24 CSS-Pixel) oder 14pt fetter Schrift (19 CSS-Pixel)) muss ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben.
- Großer Text (mit mindestens 18pt oder 14pt Fettschrift) muss ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund haben.
- Die Kontrastregel gilt auch für Bilder von Text, obwohl es am besten ist, Bilder für Text zu vermeiden.
- Der Kontrast von UI-Steuerelementen und Nicht-Text-Elementen (wie Kippschalter, Kontrollkästchen usw.) zum Hintergrund muss 3:1 betragen.
- Der Kontrast aller visuellen Fokusindikatoren (z. B. wenn du über einer Schaltfläche schwebst) zum Hintergrund muss 3:1 sein.
- Grafische Objekte wie ein eigenständiges Symbol, eine Grafik oder ein Bild müssen einen Mindestkontrast von 3:1 zum Hintergrund aufweisen.
- Jede Information, die in Farbe dargestellt wird, braucht eine Textalternative, die ein Programm verstehen kann.
- Biete immer eine sichtbare Alternative, wie Text oder ein Bild, für alle Informationen, die in Farbe dargestellt werden.
Der beste Weg, um zu überprüfen, ob das Layout farbunabhängig ist, ist ein Graustufentest. So kannst du überprüfen, ob alle wichtigen Elemente aus Sicht der Nutzer/innen sichtbar sind und ob sie angepasst werden müssen.
Beispiele
 | DO: Ein dunklerer Umriss markiert den aktuellen Schritt des Nutzers im Arbeitsablauf. Wenn man die Graustufen dieser Ansicht betrachtet, kann eine solche Lösung einer farbenblinden Person Informationen darüber liefern, wo sie sich im Prozess befindet. |
  | DO: Diagrammdaten können voneinander unterschieden werden, indem die Linien mit Formen versehen werden. Wenn du die Graustufen dieser Ansicht betrachtest, könnte eine solche Lösung es einer farbenblinden Person ermöglichen, Informationen über die Daten zu erhalten. |
  | DO: Der Text sollte auf einem Hintergrund mit einem Kontrastverhältnis von 4,5:1 stehen. NICHT: Verwende keine Hintergrundfarbe für den Text unter einem Kontrastverhältnis von 4,5:1. |