Gute Kontraste – Farben und Barrierefreiheit im Web
Farben entscheiden nicht nur darüber, ob etwas schön aussieht – sondern auch, ob es überhaupt lesbar ist. Besonders im Web ist das wichtig: Texte, Buttons und Navigations-Elemente müssen für alle Nutzerinnen und Nutzer gut erkennbar sein – unabhängig von Alter, Bildschirm oder Sehfähigkeit.
In diesem Artikel zeigen wir dir, warum Farbkontraste so wichtig sind – insbesondere für Barrierefreiheit. Du erfährst, welche Regeln gelten, was häufig schiefläuft und wie du mit einfachen Mitteln bessere, inklusivere Interfaces gestaltest. Und es gibt sogar ein Quiz.
Was ist Kontrast überhaupt?
Farbkontrast bedeutet: Wie stark unterscheiden sich zwei Farben – zum Beispiel Text und Hintergrund? Je grösser dieser Unterschied, desto besser ist die Lesbarkeit.
Dabei geht es nicht nur um «schwarz auf weiss». Auch Farbkombinationen wie Hellgrau auf Weiss oder Pastellrosa auf Beige können problematisch sein – selbst für Menschen ohne Sehbeeinträchtigung.
Kontrast Quiz
Erkennst du auf die Schnelle, ob es genug Kontrast hat? 1 Wir haben ein kleines Quiz entwickelt, mit welchem du deinen Sinn für Kontrast schärfen kannst. Hinweis: Das Quiz ist in Englisch.
Warum Kontraste wichtig sind – für alle
Klare Kontraste helfen nicht nur Menschen mit Behinderungen. Sie verbessern die Lesbarkeit, Verständlichkeit und Orientierung für eine breite Nutzerbasis, unabhängig von Alter, Umfeld oder technischen Geräten. Wer digital kommuniziert, erreicht mit gutem Kontrast mehr Menschen, zum Beispiel:
- Menschen mit Sehbehinderung (z. B. grauer Star, Farbfehlsichtigkeit)
- Mobile Nutzer mit Spiegelungen oder schlechten Lichtverhältnissen
- Ältere Menschen mit nachlassender Sehkraft
- Alle anderen, die schnell Inhalte erfassen wollen
Gute Kontraste sorgen nicht nur für Barrierefreiheit, sondern auch für bessere Usability und Professionalität.
WCAG-Richtlinien: Was ist „genug“ Kontrast?
Die Web Content Accessibility Guidelines (WCAG) definieren klare Mindestwerte:
- AA-Standard: mindestens 4.5:1 Kontrastverhältnis für normalen Text, 3:1 für grosse Schrift (ab 18px fett oder 24px normal)
- AAA-Standard: mindestens 7:1 für normalen Text, 4.5:1 für grosse Schrift
Diese Werte kannst du mit Kontrast-Checkern automatisch testen (siehe unten).
Typische Fehlerquellen
- Hellgrauer Text auf weissem Hintergrund („sieht edel aus“, ist aber kaum lesbar)
- Pastelltöne mit zu geringer Differenz
- Farben, die bei Farbenblindheit nicht unterscheidbar sind
- Wichtiges UI-Element (z. B. ein Button) mit zu geringem Farbunterschied zum Hintergrund
Tipp: Teste deine Seite auch mal mit Graustufen – dann siehst du sofort, ob Kontraste wirklich funktionieren.
Unser Tool: Contrastive – Kontraste einfach testen
Wir haben ein eigenes Tool entwickelt: Contrastive. Damit kannst du zwei Farben auswählen und bekommst sofort angezeigt, ob sie den WCAG-Standards entsprechen.
Das Tool berechnet:
- Kontrastverhältnis
- AA/AAA-Konformität für normal/gross
- Vorschau für Text auf Hintergrund
Und es gibt sogar noch ein kleines Quiz, um dein visuelles Kontrastverständnis zu schulen.
Ideal für Designer:innen, Entwickler:innen und Projektverantwortliche. Das Kontrast-Checker-Tool gibt es auch noch einzeln.
Es gibt natürlich auch andere Kontrast-Tools. Wir wollten einfach ein moderneres bauen, nutzen aber teilweise auch die Tools von accessibleweb.com
Farbenblindheit nicht vergessen
Rund 8 % der Männer und 0.5 % der Frauen sind von Farbenblindheit betroffen – ein Anteil, der im Design nicht unterschätzt werden sollte. Am häufigsten ist die Rot-Grün-Schwäche auf, gefolgt von selteneren Blau-Gelb-Störungen.
Deshalb ist es wichtig, Farben nicht als einziges Unterscheidungsmerkmal zu verwenden. Ergänze sie stets durch weitere visuelle Hinweise wie Texte, Symbole oder Muster. So stellst du sicher, dass deine Inhalte für alle Nutzerinnen und Nutzer zugänglich bleiben.
Fazit: Kontrast ist kein Detail – sondern essenziell
Deutliche Kontraste sind essenziell, damit digitale Inhalte für alle verständlich und problemlos nutzbar sind. Wer sich an die WCAG-Richtlinien hält, legt nicht nur Wert auf technische Standards, sondern verbessert aktiv das Nutzererlebnis. Das zeigt: Inklusion ist kein nettes Zusatzfeature – sie gehört zum Fundament guter Gestaltung.
Einen Check für «Accessible Perceptual Contrast Algorithm» (APCA) haben wir geplant, sind aber noch nicht dazugekommen. Was nicht ist, kann aber noch werden.
