←  Alle Begriffe
F
Barrierefreiheit

Farbkontrast

Farbkontrast beschreibt den Helligkeitsunterschied zwischen Vorder- und Hintergrund und beeinflusst die Lesbarkeit visueller Inhalte.

Farbkontrast beschreibt den Helligkeitsunterschied zwischen Vorder- und Hintergrund und beeinflusst die Lesbarkeit visueller Inhalte. Die Umsetzung sollte native Webstandards bevorzugen und automatisierte Prüfungen durch Tests mit Tastatur und assistiven Technologien ergänzen. Eng verbunden ist der Begriff mit WCAG und Barrierefreiheit.

Weiterlesen

WCAG

Barrierefreiheit

Design Token

Fokus-Indikator

FAQ

Farbkontrast

Welche typischen Fehler gibt es beim Farbkontrast?
Häufig sind hellgrauer Text auf weißem Grund, zu blasse Platzhalter in Formularfeldern, Text auf Fotos ohne Überlagerung und ungeprüfte Markenfarben. Auch Fokusmarkierungen bleiben oft zu schwach. Diese Fehler entstehen meist im Design und lassen sich dort am günstigsten vermeiden, bevor sie im Code vielfach vorkommen.
Wie unterstützen Design Tokens den Farbkontrast?
Farbpaare lassen sich als semantische Tokens definieren, etwa Text primär auf Fläche, und einmal auf ausreichenden Kontrast prüfen. Wird die Palette später geändert, bleibt die Prüfung an einer Stelle gebündelt. Bei einem dunklen Theme müssen die Paare erneut kontrolliert werden, weil sich Verhältnisse nicht spiegeln lassen.
Reicht Farbe allein, um Informationen zu vermitteln?
Nein, Farbe darf nicht das einzige Mittel sein, etwa bei Fehlermeldungen oder Links im Fließtext. Zusätzlich braucht es Merkmale wie Text, Icon oder Unterstreichung. Menschen mit Farbfehlsichtigkeit unterscheiden Rot und Grün oft nicht. Ein Formularfeld nur rot zu umranden, transportiert die Information deshalb nicht verlässlich.
Wie wird der Farbkontrast einer Seite geprüft?
Mit Kontrastrechnern und den Entwicklerwerkzeugen des Browsers, die die tatsächlich dargestellten Farben auslesen. Geprüft werden sollten alle Zustände wie Hover, Fokus und Fehler sowie Text auf Bildern. Automatische Werkzeuge übersehen Text über Fotos oder Verläufen häufig, dort hilft der manuelle Blick.
Gilt die Kontrastanforderung auch für Buttons und Icons?
Ja, für Bedienelemente und grafische Objekte fordert WCAG 2.1 auf Stufe AA ein Verhältnis von mindestens 3:1. Das betrifft Rahmen von Eingabefeldern, Icons mit Bedeutung und Fokusmarkierungen. Reine Dekoration ist ausgenommen. Ein blasser Rand um ein Formularfeld kann daher schon ein Verstoß sein.
Welches Kontrastverhältnis fordert WCAG für Text?
Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1, großer Text mindestens 3:1. Als groß gilt Text ab 18 pt oder ab 14 pt fett. Diese Werte gehören zu Stufe AA. Der Kontrast wird zwischen Vorder- und Hintergrundfarbe berechnet, nicht nach Augenmaß beurteilt.