Warum bestehen meine Website-Farben den Kontrast-Test nicht?

Wie das Kontrastverhältnis berechnet wird

Kurz-AntwortDas Kontrastverhältnis vergleicht die relative Luminanz zweier Farben und liegt immer zwischen 1:1 (kein Unterschied) und 21:1 (Schwarz auf Weiß).

Die WCAG-2.x-Formel wandelt zunächst jede sRGB-Farbe in eine lineare, gammakorrigierte Helligkeit um und gewichtet die drei Kanäle unterschiedlich: Grün trägt mit rund 71,5 % am stärksten zur wahrgenommenen Helligkeit bei, Rot mit rund 21,3 % und Blau mit nur rund 7,2 %. Aus diesen gewichteten Werten ergibt sich die relative Luminanz (L) jeder Farbe. Das Kontrastverhältnis ist dann (L_heller + 0,05) geteilt durch (L_dunkler + 0,05).

Das erklärt, warum zwei Farben, die im Farbkreis weit auseinanderliegen, trotzdem ein niedriges Verhältnis haben können — und warum ein sattes Blau auf Schwarz oft schlechter abschneidet, als man beim bloßen Hinsehen vermutet. Ein Farbkontrast-Prüfer nimmt genau diese Rechnung ab und zeigt sofort den exakten Wert für ein beliebiges Hex-, RGB- oder HSL-Farbpaar, inklusive halbtransparenter (Alpha-)Farben, die zuerst über den Hintergrund zusammengesetzt werden.

Beispielhafte Kontrastverhältnisse (Richtwerte, kein Ersatz für eine echte Prüfung)
Vordergrund	Hintergrund	Verhältnis
#111528 (fast Schwarz)	#f5f7fc (fast Weiß)	16,8:1
#767676 (Mittelgrau)	#ffffff	4,54:1
#7c3aed (Violett)	#ffffff	5,2:1
#a855f7 (helles Violett)	#ffffff	2,7:1

Die letzte Zeile zeigt das typische Problem: Eine hübsche, mittelhelle Markenfarbe auf Weiß sieht im Editor gut aus, fällt aber bei WCAG AA für normalen Fließtext durch, weil 4,5:1 nicht erreicht werden.

AA vs. AAA — welcher Wert wofür gilt

Kurz-AntwortAA verlangt 4,5:1 für Fließtext und 3:1 für großen Text; AAA verschärft das auf 7:1 bzw. 4,5:1.

WCAG unterscheidet zwischen "normalem" und "großem" Text. Groß bedeutet ab 18pt (etwa 24px) bei normaler Schriftstärke oder ab 14pt (etwa 18,66px) bei Fettschrift. Größere Buchstaben sind leichter zu erkennen, deshalb reicht dort ein niedrigerer Schwellenwert. UI-Komponenten wie Button-Rahmen, Checkbox-Umrandungen oder Icons folgen einer eigenen Regel: mindestens 3:1 gegenüber angrenzenden Farben.

Die meisten Unternehmens-, Behörden- und E-Commerce-Seiten zielen praktisch auf AA, weil AAA für viele Farbkombinationen (insbesondere farbige Buttons mit weißem Text) kaum erreichbar ist, ohne die Markenfarbe stark abzudunkeln. Ein Farbkontrast-Prüfer, der beide Stufen gleichzeitig anzeigt, hilft dabei, bewusst zu entscheiden, wo AAA sich lohnt — etwa bei sehr langen Fließtexten — und wo AA ausreichend und praktikabler ist.

Typische Fehler und wie man sie behebt

Kurz-AntwortAm häufigsten scheitern helle Pastelltöne auf Weiß und graue Placeholder-Texte — meist reicht es, eine Farbe gezielt in der Helligkeit zu verschieben.

Drei Muster tauchen in der Praxis immer wieder auf: erstens hellere Markenfarben (Lavendel, Pastellblau, helles Rosa) direkt auf weißem Hintergrund für Fließtext; zweitens grauer Platzhaltertext in Formularfeldern, der oft deutlich unter 4,5:1 liegt; drittens halbtransparente Overlays auf Bildern, bei denen der tatsächliche (zusammengesetzte) Kontrast schwer abzuschätzen ist, ohne ihn nachzurechnen.

Der pragmatischste Fix ist meist, nicht den Farbton selbst zu ändern, sondern nur seine Helligkeit anzupassen — ein etwas dunklerer Violett-Ton wirkt für die meisten Betrachter kaum anders, besteht aber den Test. Ein automatischer Vorschlag, der die nächstgelegene konforme Variante für dein Zielniveau (AA oder AAA) berechnet, spart hier das manuelle Ausprobieren per Trial-and-Error.

Relative Luminanz Ein gewichteter, gammakorrigierter Helligkeitswert einer Farbe zwischen 0 (Schwarz) und 1 (Weiß), berechnet nach der WCAG-2.x-Formel. Sie ist die Grundlage jedes Kontrastverhältnisses.

Kontrast reicht nicht — Farbenblindheit mitdenken

Kurz-AntwortEin hohes Kontrastverhältnis sagt nichts darüber aus, ob zwei Farben für farbenblinde Nutzer unterscheidbar sind — das prüft eine separate Simulation.

Rot und Grün können ein völlig ausreichendes Kontrastverhältnis gegenüber ihrem Hintergrund haben und trotzdem für Nutzer mit Rot-Grün-Sehschwäche (Protanopie oder Deuteranopie) kaum zu unterscheiden sein, wenn sie als einziges Unterscheidungsmerkmal nebeneinander eingesetzt werden — etwa bei Status-Badges ("erfolgreich" grün, "fehlgeschlagen" rot). Deshalb lohnt sich zusätzlich zum reinen Kontrasttest eine Farbenblindheits-Simulation für Protanopie, Deuteranopie, Tritanopie und Achromatopsie, und generell die Regel, Bedeutung nie ausschließlich über Farbe zu vermitteln, sondern zusätzlich mit Icon, Muster oder Text zu unterstützen.

Als Faustregel bei der Layout-Prüfung: Wenn du ein Element nur an der Farbe erkennst, sobald du das Bild in Graustufen umwandelst, brauchst du ein zusätzliches Signal — Icon, Unterstreichung oder Text.

Prüfe dein eigenes Farbpaar direkt mit exaktem WCAG-Kontrastverhältnis, AA/AAA-Ergebnis und Farbenblindheits-Vorschau.

Farbkontrast-Prüfer testen →

Häufig gestellte Fragen

Was ist das WCAG-Kontrastverhältnis?

Das WCAG-Kontrastverhältnis ist eine Zahl zwischen 1:1 (identische Farben) und 21:1 (reines Schwarz auf Weiß), die den Helligkeitsunterschied zwischen Text- und Hintergrundfarbe ausdrückt. Es basiert auf der relativen Luminanz beider Farben und ist die Grundlage für die AA/AAA-Prüfung der Web Content Accessibility Guidelines.

Welches Kontrastverhältnis brauche ich für WCAG AA?

Für normalen Fließtext verlangt WCAG AA mindestens 4,5:1, für großen Text (ab etwa 24px oder 18,66px fett) reichen 3:1. UI-Komponenten wie Button-Umrandungen oder Icons brauchen ebenfalls mindestens 3:1 gegenüber ihrer Umgebung.

Warum meldet mein Accessibility-Audit einen Kontrastfehler, obwohl die Farbe gut aussieht?

Menschliches Farbempfinden und die WCAG-Formel für relative Luminanz sind nicht identisch. Grautöne, Pastellfarben und halbtransparente Überlagerungen wirken oft lesbarer, als sie mathematisch sind — vor allem, weil Grün in der Formel stärker gewichtet wird als Rot oder Blau. Ein Farbkontrast-Prüfer zeigt den exakten Wert, statt sich auf den Eindruck zu verlassen.

Wie behebe ich ein Farbpaar, das den Test nicht besteht?

Am schnellsten hilft es, eine der beiden Farben in der Helligkeit zu verschieben, bis das Zielverhältnis erreicht ist — meist reicht es, den Text dunkler oder den Hintergrund heller zu machen, ohne den Farbton selbst stark zu verändern. Ein automatischer Vorschlag im Farbkontrast-Prüfer zeigt den nächstgelegenen konformen Farbton für AA oder AAA mit einem Klick.

Reicht ein gutes Kontrastverhältnis für barrierefreie Farben aus?

Nein. Kontrast ist die Grundlage, aber Bedeutung sollte nie ausschließlich über Farbe vermittelt werden — etwa ein Fehlerhinweis nur in Rot ohne Icon oder Text. Zusätzlich lohnt sich eine Farbenblindheits-Simulation, weil Rot-Grün-Kombinationen für einen Teil der Nutzer schwer unterscheidbar bleiben, selbst wenn das Kontrastverhältnis hoch genug ist.