Farbkontrast barrierefrei: Werte, Beispiele, Lösungen

Zu wenig Kontrast ist der häufigste Fehler im Netz. Hier siehst du, welche Werte nach WCAG gelten, wie du sie misst, Beispiele vorher und nachher und Lösungen, mit denen du deine Markenfarbe trotzdem behältst.

Zum Vergleich Prüfung für deine Website

Selbst vergleichen

Farbkontraste: vorher und nachher

Vorher: Hellgrün und Hellgrau auf Weiß, Kontrast 1,4 bis 2,3 zu 1 Nachher: Tinte auf Weiß und Limette als Fläche, Kontrast über 13 zu 1

Schieb den Regler und vergleiche dieselbe Seite mit schwachem und mit ausreichendem Kontrast. Den Regler bedienst du mit der Maus, mit dem Finger oder mit den Pfeiltasten.

Warum es zählt

Warum der Farbkontrast für Barrierefreiheit so wichtig ist

Der Farbkontrast beschreibt, wie stark sich die Helligkeit von Schrift und Hintergrund unterscheidet. Ist der Unterschied zu klein, verschwimmt der Text, besonders für Menschen mit Sehschwäche, mit Grauem Star oder mit einer Farbsehschwäche. Aber auch wer gesund sieht, liest schwachen Kontrast schlecht, sobald die Sonne auf das Handy scheint oder der Bildschirm im Büro gedimmt ist.

Laut der Auswertung WebAIM Million 2026 zeigen 83,9 Prozent der meistbesuchten Startseiten Text mit zu wenig Kontrast. Damit ist das der häufigste Fehler überhaupt, noch vor fehlenden Alternativtexten. Das liegt selten an fehlendem Willen. Hellgraue Schrift und zarte Pastelltöne wirken im Entwurf modern und ruhig, und auf dem großen Monitor des Designers fällt das Problem kaum auf.

Die gute Nachricht ist, dass sich Kontrast exakt messen lässt. Es gibt keine Geschmacksfrage, sondern einen Rechenwert zwischen 1 zu 1 und 21 zu 1. Wer die Werte kennt, kann seine Farben gezielt anpassen, ohne die Marke aufzugeben. Meist reicht es, eine Farbe etwas dunkler zu wählen oder sie als Fläche statt als Schriftfarbe einzusetzen.

Werkzeug

Kontrastrechner für deine Farben

Gib die Schriftfarbe und die Hintergrundfarbe ein, als Farbwähler oder als Hex-Wert wie #0a0b0a. Das Ergebnis erscheint sofort und wird nirgendwohin übertragen.

Schriftfarbe

Hintergrundfarbe

1,4 : 1

Fließtext AA, ab 4,5 : 1
Große Schrift AA, ab 3 : 1
Bedienelemente, ab 3 : 1
Fließtext AAA, ab 7 : 1

WCAG 2.2

Was die WCAG hier verlangen

1.4.3 Stufe AA

Kontrast (Minimum)

Normaler Text braucht mindestens 4,5 zu 1, großer Text ab 24 Pixel oder ab 18,7 Pixel fett mindestens 3 zu 1.
1.4.11 Stufe AA

Kontrast von Nicht-Text

Ränder von Eingabefeldern, Symbole und Fokusrahmen brauchen mindestens 3 zu 1 zur Umgebung.
1.4.6 Stufe AAA

Kontrast (erhöht)

Für die höchste Stufe gelten 7 zu 1 für normalen und 4,5 zu 1 für großen Text. Für das BFSG nicht verlangt, aber ein gutes Ziel für Fließtext.
1.4.1 Stufe A

Benutzung von Farbe

Farbe darf nie das einzige Merkmal sein, etwa bei Links im Text oder bei Fehlern im Formular.

Lösung

Lösungen für bessere Kontraste, die deine Marke behalten

Alle Farbpaare messen

Schreib jede Kombination aus Schrift und Hintergrund auf, die auf deiner Seite vorkommt, auch auf Bildern, Knöpfen und im Fuß. Miss jedes Paar mit einem Kontrastrechner, etwa dem auf dieser Seite weiter unten.
Markenfarbe als Fläche nutzen

Helle Markenfarben wie Gelb, Hellgrün oder Türkis taugen selten als Schriftfarbe, aber hervorragend als Hintergrund hinter dunkler Schrift. So bleibt die Farbe sichtbar und der Text lesbar.
Eine dunklere Stufe ergänzen

Lege zu jeder Markenfarbe eine dunklere Variante für Text und Verweise an. Ein Grün, das im Logo hell leuchtet, darf im Fließtext zwei Stufen dunkler sein, das fällt kaum jemandem auf.
Text auf Fotos absichern

Liegt Schrift auf einem Foto, sorgt ein dunkler Verlauf oder eine halbdurchsichtige Fläche hinter dem Text dafür, dass der Kontrast an jeder Stelle des Bildes reicht, auch wenn das Foto später getauscht wird.

Vorher

.hinweis {
  color: #9fdc5a;
  background: #ffffff;
}

Nachher

.hinweis {
  color: #0d100e;
  background: #c8f542;
}

Dasselbe Grün, einmal als Schrift mit einem Kontrast von 1,8 zu 1, einmal als Fläche hinter dunkler Schrift mit einem Kontrast von mehr als 15 zu 1.

Fragen

Fragen zu Farbkontraste

Welcher Farbkontrast ist barrierefrei?

Für normalen Text verlangt WCAG in der Stufe AA mindestens 4,5 zu 1, für großen Text mindestens 3 zu 1. Bedienelemente wie Eingabefelder und Symbole brauchen ebenfalls 3 zu 1 zur Umgebung.

Gilt die Kontrastregel auch für Logos?

Nein. Logos und Markennamen in Bildern sind von der Kontrastregel ausgenommen, ebenso Text, der nur der Dekoration dient. Sobald ein Text Informationen trägt, gilt die Regel aber.

Reicht ein dunkler Modus als Lösung?

Ein dunkler Modus kann helfen, ersetzt aber keine ausreichenden Kontraste in der Standardansicht. Beide Ansichten müssen die Werte erfüllen, und viele Besucher wechseln die Ansicht nie.

Weitere Ratgeber zur Barrierefreiheit

Wie steht deine Website da?

Wir prüfen deine Seite auf diese und alle anderen Barrieren und schicken dir einen Bericht, der sagt, was zuerst dran ist.

Anfrage für eine Prüfung senden Zum Schnelltest

Farbkontrast barriere­frei: Werte, Beispiele, Lösungen