Farbkontrast und Barrierefreiheit: WCAG-Werte, Prüfung und Lösungen

Hellgrauer Text auf weißem Grund wirkt in der Designdatei elegant. Auf dem Smartphone in praller Sonne oder für Menschen mit eingeschränktem Sehvermögen ist er mühsam zu lesen. Und er ist der häufigste Barrierefreiheitsfehler überhaupt: Der Scan WebAIM Million 2026 (öffnet in einem neuen Tab) fand Text mit zu wenig Kontrast auf 83,9 % der 1 Million meistbesuchten Startseiten, im Schnitt 34 einzelne Stellen pro Seite.

Die gute Nachricht: Kontrast ist messbar, die Grenzwerte sind klar, und die Lösungen sind meist günstig. Dieser Leitfaden liefert Ihnen die Zahlen, die kostenlosen Tools und einen Weg, Markenfarben zu korrigieren, ohne von vorn anzufangen.

Was ist ein Kontrastverhältnis?

Ein Kontrastverhältnis ist eine Zahl, die die relative Helligkeit (Leuchtdichte) zweier Farben vergleicht, meist die von Text und Hintergrund. Die WCAG berechnen es mit einer festen Formel, und das Ergebnis reicht von 1:1 (kein Unterschied, Weiß auf Weiß) bis 21:1 (Schwarz auf Weiß). Je höher die Zahl, desto leichter lassen sich die beiden Farben unterscheiden.

Die Formel lautet (L1 + 0,05) / (L2 + 0,05), wobei L1 die relative Leuchtdichte der helleren und L2 die der dunkleren Farbe ist. Von Hand ausrechnen müssen Sie das nie, aber ein Detail ist wichtig: Es zählt nur die Leuchtdichte, nicht der Farbton. Deshalb kann roter Text auf grünem Grund knallig aussehen und trotzdem schlecht abschneiden.

Das andere Detail, das oft übersehen wird, ist das Runden. Das Understanding-Dokument des W3C zu 1.4.3 (öffnet in einem neuen Tab) sagt, berechnete Werte „sollten nicht gerundet werden (z. B. erfüllt 4,499:1 den Grenzwert von 4,5:1 nicht)“. Grau #767676 auf Weiß (4,54:1) besteht also, #777777 auf Weiß (4,48:1) fällt durch, obwohl niemand die beiden mit bloßem Auge unterscheiden könnte.

Welches Kontrastverhältnis verlangen die WCAG?

Für Stufe AA, auf die sich die meisten Gesetze und Verträge beziehen, braucht normaler Text mindestens 4,5:1 zum Hintergrund und großer Text 3:1 (Erfolgskriterium 1.4.3). Bedienelemente und bedeutungstragende Grafiken brauchen 3:1 gegenüber den angrenzenden Farben (1.4.11). Die strengere Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text (1.4.6).

Warum 4,5:1? Laut W3C gleicht dieser Wert „den Verlust an Kontrastempfindlichkeit aus, den Nutzer mit einer Sehschwäche entsprechend einer Sehschärfe von etwa 20/40 in der Regel haben“, also etwa einem Visus von 0,5. Der Wert ist damit auf Menschen mit mäßig eingeschränktem Sehvermögen ausgelegt, darunter viele ältere Kunden, die sich selbst nie als behindert bezeichnen würden.

Mancher Text ist ausgenommen: Logos und Markennamen, rein dekorativer Text, Text, der für niemanden sichtbar ist, Text in einem Bild mit wesentlichem anderem Bildinhalt und Text in inaktiven (deaktivierten) Bedienelementen. Ihr Logo darf bleiben, wie es ist. Ein Absatz in der blassen Farbe Ihres Logos nicht.

Was gilt als großer Text?

Großer Text bedeutet in den WCAG mindestens 18 Punkt oder, bei fetter Schrift, mindestens 14 Punkt. Das W3C rechnet das in etwa 24 CSS-Pixel bzw. 18,5 Pixel fett um. Alles Kleinere braucht die vollen 4,5:1. Fließtext, Bildunterschriften, Formularbeschriftungen, Preise und Footer-Links sind fast nie großer Text und brauchen deshalb den höheren Wert.

So sieht das in der Praxis aus: Grau #949494 auf Weiß erreicht 3,03:1. Für eine Überschrift mit 28 Pixeln reicht das, für einen Absatz mit 16 Pixeln in derselben Farbe nicht. Viele Websites bestehen bei den Überschriften und fallen bei allem darunter durch.

Dünne und dekorative Schriften brauchen besondere Sorgfalt. Das W3C weist darauf hin, dass wegen der Kantenglättung „besonders dünne oder ungewöhnliche Schriften von Browsern mit einer deutlich blasseren Farbe dargestellt werden können“ als der gewählten. Ist Ihre Markenschrift ein leichter Schnitt, planen Sie etwas Spielraum über 4,5:1 ein, statt knapp 4,51:1 anzupeilen.

Gilt der Kontrast auch für Buttons, Symbole, Fokusanzeigen und Diagramme?

Ja. Nach Erfolgskriterium 1.4.11 (Stufe AA) braucht alles, was man sehen muss, um ein Bedienelement, seinen Zustand oder eine Grafik zu erkennen, 3:1 gegenüber den angrenzenden Farben. Das betrifft Rahmen von Formularfeldern, Symbole ohne Textbeschriftung, Fokusrahmen, Zustände von Kontrollkästchen und Schaltern sowie Linien und Segmente von Diagrammen. Text in einem Button braucht weiterhin 4,5:1.

• Formularfelder: Ein hellgrauer Rahmen #CCCCCC auf Weiß erreicht 1,61:1. Ist diese blasse Linie das Einzige, was zeigt, wo man tippen soll, fällt sie durch.
• Buttons: Die WCAG verlangen nicht um jeden Button einen sichtbaren Rahmen. Das Understanding-Dokument des W3C zu 1.4.11 (öffnet in einem neuen Tab) sagt, eine Begrenzung sei nur nötig, wenn das Bedienelement sonst visuell nicht zu erkennen ist. Ist ein Button nur an seiner farbigen Fläche erkennbar, braucht diese Fläche 3:1 zur Seite.
• Symbole: Eine Suchlupe, ein Herz für die Wunschliste oder ein Warenkorb-Symbol ohne Text daneben braucht 3:1.
• Fokusanzeigen: Der Rahmen, der den Tastaturfokus zeigt, muss sich vom umgebenden Hintergrund abheben. Unser Leitfaden zu WCAG 2.2 behandelt die neueren Fokuskriterien.
• Diagramme: Linien in einem Liniendiagramm und Segmente eines Tortendiagramms brauchen 3:1, es sei denn, dieselben Werte stehen auch als Text da.
• Deaktivierte Bedienelemente sind ausgenommen, man muss aber trotzdem erkennen können, ob sich ein Button drücken lässt.

Links im Fließtext sind ein Sonderfall. Werden sie nur über die Farbe gekennzeichnet, ohne Unterstreichung, verlangt die W3C-Technik G183 (öffnet in einem neuen Tab) 3:1 zwischen Linkfarbe und umgebendem Text, während beide weiterhin 4,5:1 zum Hintergrund brauchen. Drei Farben zu finden, die das alles erfüllen, ist schwer. Eine Unterstreichung ist viel einfacher.

Wie prüfe ich den Farbkontrast?

Nehmen Sie einen kostenlosen Kontrast-Checker für einzelne Farbpaare, die Entwicklertools Ihres Browsers für Live-Seiten und einen automatischen Scan, um Problemstellen auf der ganzen Website zu finden. Prüfen Sie dann mit eigenen Augen, was Tools übersehen: Text über Fotos und Verläufen, Hover- und Fokuszustände, Platzhaltertext und Fehlermeldungen. Das meiste dauert pro Seitentemplate nur ein paar Minuten.

• WebAIM Contrast Checker (öffnet in einem neuen Tab): zwei Hex-Codes eingeben und das Verhältnis ablesen, mit Bestanden oder Nicht bestanden für normalen Text, großen Text und grafische Objekte. Mit dem Helligkeitsregler finden Sie schnell den nächsten Farbton, der besteht.
• Colour Contrast Analyser (öffnet in einem neuen Tab): eine kostenlose Desktop-App von Vispero für Windows und macOS. Ihre Pipette nimmt jedes Pixel auf dem Bildschirm auf, praktisch für Text über Bildern, in PDFs und Apps, und sie enthält einen Simulator für Farbsehschwächen.
• Chrome DevTools: Untersuchen Sie ein Textelement und öffnen Sie den Farbwähler. Sein Abschnitt zum Kontrastverhältnis (öffnet in einem neuen Tab) zeigt Linien für AA und AAA und kann eine Farbe vorschlagen, die den Grenzwert erfüllt. Das Panel „CSS Overview“ listet alle Kontrastprobleme der Seite auf.
• Automatische Checker: Browser-Erweiterungen und Lighthouse markieren kontrastarmen Text auf der ganzen Seite, kennzeichnen Text über Bildern oder Verläufen aber oft nur als „manuell prüfen“, statt ihn als bestanden oder durchgefallen zu werten.

Wo Tools nicht weiterkommen, prüfen Sie manuell. Bei Text auf einem großen Titelbild messen Sie die hellste Stelle des Bildes hinter den hellsten Buchstaben; das W3C führt Hintergrundbilder ohne ausreichenden Kontrast als bekannten Fehler auf (F83). Fahren Sie mit der Maus über Buttons, springen Sie mit der Tabulatortaste dorthin, lösen Sie einen Formularfehler aus und wechseln Sie in den Dunkelmodus, falls Sie einen anbieten. Auch ein dunkles Design kann durchfallen: Grau #757575 auf #121212 erreicht 4,07:1. Unser Leitfaden Barrierefreiheit einer Website testen behandelt den Kontrast zusammen mit den übrigen schnellen manuellen Prüfungen.

Wie behebe ich zu schwachen Kontrast, ohne meine Marke zu ändern?

Meist, indem Sie einen dunkleren Ton Ihrer Markenfarbe für Text und kleine Elemente ergänzen und das Original für große Überschriften, Hintergründe und Illustrationen behalten. Viele Markenfarben fallen nur bei kleinen Größen durch. Oft reicht es, auf einer hellen Markenfarbe weißen Text gegen dunklen zu tauschen, und die meisten Besucher merken nur, dass sich die Seite leichter liest.

1. Legen Sie von jeder Markenfarbe eine textsichere Variante an, mit mindestens 4,5:1 zu Ihren Haupthintergründen, und verwenden Sie sie für Fließtext, Links und kleine Symbole.
2. Nutzen Sie die leuchtende Originalfarbe für große Überschriften (dort genügt 3:1), Hintergründe, Illustrationen und Dekoration.
3. Stellen Sie auf hellen Markenfarben die Button-Schrift von Weiß auf Dunkel um.
4. Legen Sie eine deckende oder halbtransparente Fläche hinter Text, der auf Fotos steht.
5. Prüfen Sie jeden Zustand: Hover, Fokus, besucht, ausgewählt, Fehler und Platzhalter.
6. Speichern Sie die Farbpaare, die den Test bestehen, als Design-Tokens oder Theme-Einstellungen, damit neue Seiten sie übernehmen, statt sie neu zu erfinden.

Gestalten für Farbsehschwäche: Warum Farbe allein nicht reicht

Kontrast und Farbe sind zwei verschiedene Probleme. Etwa 1 von 12 Männern und 1 von 200 Frauen haben laut Colour Blind Awareness (öffnet in einem neuen Tab) eine Farbsehschwäche, meist eine Rot-Grün-Schwäche. WCAG 1.4.1 (öffnet in einem neuen Tab) (Stufe A) besagt, dass Farbe nicht das einzige visuelle Mittel sein darf, um Informationen zu vermitteln. Kombinieren Sie sie also mit Text, Symbolen, Mustern oder Unterstreichungen.

• Formularfehler: Ein roter Rahmen allein reicht nicht. Ergänzen Sie neben dem Feld eine Meldung wie „Geben Sie eine Postleitzahl ein“, am besten mit Symbol.
• Lagerbestand und Status: Ein grüner oder roter Punkt neben einem Produkt sagt vielen Kunden nichts. Schreiben Sie „Auf Lager“ oder „Ausverkauft“.
• Diagramme: Eine Legende, bei der man Farben zuordnen muss, ist schwer zu lesen. Beschriften Sie Linien direkt oder verwenden Sie Muster und unterschiedliche Linienstile.
• Links: Unterstreichen Sie sie im Fließtext, aus den oben genannten Gründen.

Um das Problem selbst zu sehen, können Chromes DevTools Farbsehschwächen simulieren, und auch der Colour Contrast Analyser hat einen Simulator. Kontrast hilft auch hier: Das Verhältnis misst die Helligkeit, nicht den Farbton; zwei Farben mit hohem Kontrast bleiben also unterscheidbar, auch wenn ihre Farbtöne ähnlich wirken. Wie Menschen mit eingeschränktem Sehvermögen und anderen Beeinträchtigungen ihre Geräte einrichten, lesen Sie in Wie Menschen mit Behinderungen das Web nutzen.

Reichen Hochkontrastmodi und Kontrast-Schalter aus?

Nein. Kontrastdesigns des Betriebssystems und Kontrast-Schalter auf der Seite helfen Menschen, die wissen, dass sie mehr Kontrast brauchen, und ihn einschalten. Die WCAG beurteilen Ihre Seite aber im Standardzustand; die Farben, die alle Besucher zuerst sehen, müssen also bestehen. Ein Schalter ist eine zusätzliche Option für alle, die mehr wollen, keine Reparatur für durchgefallene Farben.

Manche Menschen mit Behinderungen nutzen die Kontrastdesigns von Windows, die Ihre Farben durch eigene ersetzen. Es lohnt sich, Ihre Website damit zu testen: Symbole aus Hintergrundbildern können verschwinden, und Fokusstile, die nur mit einem Box-Shadow gezeichnet sind, ebenfalls. Mit der CSS-Media-Query prefers-contrast können Sie außerdem eine kontrastreichere Version für alle anbieten, die das in ihren Systemeinstellungen angefordert haben.

Unser eigenes Widget hat eine Kontrastanpassung und ein Profil für Farbsehschwäche, und manche Besucher finden sie nützlich. Wir würden Ihnen trotzdem dasselbe sagen: Ist Ihr Fließtext #999999 auf Weiß, ändern Sie das CSS. Das Widget gibt Besuchern, die mehr Kontrast möchten, einen Weg dorthin. Durchgefallene Standardfarben macht es nicht konform, und die englischsprachige WCAG-Referenz in unserer Dokumentation sagt das auch.