1. Was ist das Ziel dieses Kriteriums?
Stell dir vor, du willst online einkaufen, aber die Buttons sind so hell, dass du sie vom Hintergrund kaum unterscheiden kannst. Oder du analysierst ein wichtiges Diagramm für die Arbeit, aber die verschiedenen Linien verschwimmen vor deinen Augen, weil die Farben zu ähnlich sind.
Menschen mit Sehbeeinträchtigungen oder schwachem Sehvermögen haben genau diese Probleme täglich – aber auch Menschen ohne Behinderungen in ungünstigen Lichtverhältnissen oder bei Ermüdung. Das Ziel von Erfolgskriterium 1.4.11 der WCAG ist daher klar: Nicht nur Text braucht ausreichenden Kontrast, sondern auch alle anderen visuellen Elemente, die Informationen vermitteln oder zur Bedienung nötig sind.
2. Was fordert das Erfolgskriterium genau?
Ganz konkret geht es um ein Kontrastverhältnis von mindestens 3:1 zwischen visuellen Elementen und ihren angrenzenden Farben. Das betrifft zwei Hauptbereiche:
Benutzeroberflächen-Komponenten:
- Visuelle Informationen, die nötig sind, um Bedienelemente und ihre Zustände zu erkennen
- Formularfelder, Buttons, Links, Schalter und ihre verschiedenen Zustände (normal, fokussiert, gedrückt)
- Aber: Inaktive Elemente sind ausgenommen, ebenso Elemente, deren Aussehen vom Browser bestimmt wird
Grafische Objekte:
- Teile von Grafiken, die zum Verständnis erforderlich sind
- Diagrammlinien, Balken in Charts, Icons mit Informationswert
- Aber: Logos, Fotos und Grafiken, bei denen bestimmte Farben essentiell sind, sind ausgenommen
Ein wichtiger Unterschied zu Textkontrast: Hier geht es um "angrenzende Farben", nicht nur um Vorder- und Hintergrund. Das bedeutet, dass ein Kuchensegment sowohl zum Hintergrund als auch zu benachbarten Segmenten ausreichend Kontrast haben muss.
3. Warum ist das wichtig für Barrierefreiheit?
Stell dir vor, du musst ein Online-Formular ausfüllen, aber die Eingabefelder sind fast unsichtbar. Oder du sollst eine Grafik interpretieren, kannst aber die verschiedenen Datenpunkte nicht auseinanderhalten. Genau so fühlen sich Menschen mit Sehbeeinträchtigungen bei schlechtem Kontrast.
Non-Text-Kontrast schafft Barrierefreiheit, weil er:
- Menschen mit schwachem Sehvermögen ermöglicht, Bedienelemente zu finden und zu nutzen
- Die Orientierung auf Websites verbessert, auch bei ungünstigen Lichtverhältnissen
- Informationen in Grafiken und Diagrammen für alle zugänglich macht
- Menschen mit Farbfehlsichtigkeit hilft, wichtige visuelle Unterschiede zu erkennen
- Die allgemeine Nutzbarkeit für ermüdete Augen oder kleine Bildschirme steigert
Und nicht zuletzt: Es macht deine Website robuster und professioneller – auch für Nutzer ohne Behinderungen, die in der Sonne auf ihr Smartphone schauen oder abends müde am Computer sitzen.
4. So setzt du das Kriterium erfolgreich um
Die Umsetzung erfordert ein Umdenken: Von "sieht schön aus" zu "funktioniert für alle". Hier ein paar bewährte Praxis-Tipps:
Bedienelemente richtig kontrastieren:
- Verwende Tools wie den WebAIM Contrast Checker oder Color Oracle für die Messung
- Achte besonders auf Formularfelder: Rahmen müssen sich vom Hintergrund abheben (3:1)
- Fokus-Indikatoren brauchen ebenfalls 3:1 Kontrast – keine unsichtbaren Rahmen!
- Bei "Ghost Buttons" (nur Rahmen, kein Hintergrund): Wenn Text vorhanden ist, muss nur der Text kontrastieren
Grafiken und Charts optimieren:
- In Diagrammen müssen sich benachbarte Bereiche voneinander unterscheiden (3:1)
- Verwende nicht nur Farbe, sondern auch Muster, Texturen oder Beschriftungen
- Icons: Der Inhalt muss sich vom Icon-Hintergrund abheben
- Bei komplexen Infografiken: Jedes informative Element einzeln prüfen
Praktische Hilfsmittel:
- Browser-Extensions wie "Colour Contrast Analyser" für Live-Tests
- Designsystem mit vordefinierten, kontrastgeprüften Farbpaletten
- Regelmäßige Tests mit simulierten Sehbeeinträchtigungen
- Prototyping mit unterschiedlichen Farbräumen (sRGB, P3)
Ausnahmen richtig verstehen:
- Logos dürfen ihre Original-Farben behalten
- Fotos und realistische Darstellungen sind ausgenommen
- Bei essentiellen Farben (z.B. Ampelschaltung) alternative Kennzeichnungen verwenden
5. Warum dieses Erfolgskriterium für Unternehmen relevant ist
Non-Text-Kontrast ist nicht nur ein Nice-to-have – er bringt messbare Geschäftsvorteile und sollte fester Bestandteil jeder digitalen Strategie sein.
1. Conversion-Rate und Nutzererfahrung steigern
Gut sichtbare Buttons werden häufiger geklickt. Klare Formularfelder führen zu weniger Abbrüchen. Verständliche Diagramme überzeugen Entscheider. Studien zeigen: Websites mit hohem Kontrast haben signifikant höhere Conversion-Raten – nicht nur bei Menschen mit Sehbeeinträchtigungen.
2. Rechtssicherheit und Compliance gewährleisten
Mit WCAG 2.1 wurde Non-Text-Kontrast zu einem AA-Standard. Das bedeutet: Unternehmen, die öffentliche Aufträge wollen oder internationale Märkte bedienen, müssen dieses Kriterium erfüllen. Proaktive Umsetzung schützt vor kostspieligen Rechtstreitigkeiten und Nachbesserungen.
3. Markenimage und Professionalität stärken
Hoher Kontrast signalisiert Qualität und Aufmerksamkeit fürs Detail. In einer Zeit, wo User Experience über Geschäftserfolg entscheidet, zeigst du mit barrierefreiem Design, dass du alle Nutzer ernst nimmst – ein Wettbewerbsvorteil, der sich direkt in Kundenbindung übersetzt.
Und nicht zuletzt: Rechtssicherheit und Fördermöglichkeiten. Viele öffentliche Projekte fordern digitale Barrierefreiheit bereits verpflichtend – wer vorbereitet ist, hat klare Vorteile bei Ausschreibungen und Förderanträgen.
6. Das Erfolgskriterium im Wortlaut der W3C
Success Criterion 1.4.11 Non-text Contrast (Level AA)
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.