Farbkontrast nach WCAG prüfen

Farbkontrast ist das Kriterium, an dem in der Praxis die meisten Websites scheitern — eine mindshape-Studie vom Juni 2025 fand ihn unter 1.000 untersuchten Unternehmenswebsites als häufigsten Mangel, bei 74,6 Prozent der Seiten. Das liegt nicht daran, dass die Regel kompliziert wäre. Es liegt daran, dass „sieht doch gut aus" und „erfüllt 4,5:1" zwei verschiedene Dinge sind, und dass niemand systematisch nachmisst.

Dieser Artikel zeigt dir, wie du das änderst: welche Grenzwerte gelten, wie du korrekt misst, welche Stellen typischerweise durchrutschen — und was ein Scanner an dieser Stelle prinzipbedingt nicht leisten kann. Wenn du stattdessen einen Überblick über alle WCAG-Anforderungen suchst, findest du ihn im Leitfaden zu den WCAG-2.1-Anforderungen; Kontrast ist dort eines von zehn Kriterien.

Wie das Kontrastverhältnis zustande kommt

Der Wert, den ein Kontrast-Tool ausgibt, ist keine Designbewertung, sondern eine Rechnung mit zwei Schritten.

Schritt 1: relative Leuchtdichte. Für jede der beiden Farben wird ermittelt, wie viel Licht sie abstrahlt — ein Wert zwischen 0 (Schwarz) und 1 (Weiß). Dabei werden die Kanäle Rot, Grün und Blau unterschiedlich stark gewichtet: Grün trägt mit rund 71 Prozent den Löwenanteil, Rot mit 21 Prozent, Blau mit knapp 7 Prozent. Das entspricht der Empfindlichkeit des menschlichen Auges. Vorher werden die sRGB-Werte noch linearisiert, weil Bildschirmfarben nicht linear zur tatsächlichen Helligkeit stehen.

Schritt 2: das Verhältnis. Beide Leuchtdichten kommen in eine simple Formel: die hellere plus 0,05, geteilt durch die dunklere plus 0,05. Der Zuschlag von 0,05 bildet das Umgebungslicht ab, das auf jedem realen Bildschirm reflektiert wird — er ist der Grund, warum die Skala bei 21:1 endet und nicht bei unendlich.

Zwei praktische Konsequenzen folgen daraus:

• Farbton und Sättigung sind egal. Nur die Leuchtdichte zählt. Ein kräftiges Rot und ein kräftiges Grün können nebeneinander auf 1,1:1 kommen — für das Kontrastkriterium praktisch unsichtbar, obwohl die Farben für viele Menschen deutlich verschieden aussehen.
• Reihenfolge ist egal. Ob du Text auf Hintergrund oder Hintergrund auf Text rechnest, ändert nichts. Das Verhältnis ist symmetrisch.

Die Grenzwerte auf einen Blick

Verbindlich ist in Deutschland die Stufe AA. Für Unternehmen, die unter das Barrierefreiheitsstärkungsgesetz fallen, ist WCAG 2.1 AA über die europäische Norm EN 301 549 der Maßstab, an dem geprüft wird — 1.4.3 und 1.4.11 gehören damit zum Pflichtprogramm. AAA ist keine Vorgabe, aber ein sinnvolles Ziel für lange Lesetexte und für Zielgruppen mit altersbedingt nachlassender Sehkraft.

Wann gilt Text als „groß"?

Die Schwelle liegt bei 24 px, bei fetter Schrift bereits bei etwa 18,7 px. Die krummen 18,7 stammen aus der Umrechnung: WCAG definiert die Grenze in Punkt (18 pt bzw. 14 pt fett), und 14 pt entsprechen rund 18,7 px. Alles darunter ist „normaler Text" und braucht 4,5:1 — auch dann, wenn es sich um eine Überschrift handelt. Eine 18-px-H3 ist im Sinne des Kriteriums normaler Text.

Was ausgenommen ist

Nicht jeder farbige Pixel unterliegt 1.4.3. Ausgenommen sind Logos und Markenzeichen, rein dekorativer Text, deaktivierte Bedienelemente und Text, der zufälliger Bestandteil eines Fotos ist. Diese Ausnahmen sind eng zu verstehen: Dein Logo darf einen schwachen Kontrast haben, dein Claim daneben nicht.

So prüfst du eine Farbkombination richtig

Nimm die tatsächlichen Werte, nicht die gemeinten. Der häufigste Messfehler ist, den Hintergrund aus dem Designfile zu übernehmen statt aus dem gerenderten Ergebnis. Zwischen beiden liegen oft eine Opacity, ein Overlay oder ein geerbter Elternhintergrund. Maßgeblich ist immer die Farbe, die am Ende hinter dem Text liegt — halbtransparente Werte musst du vorher gegen ihren Untergrund verrechnen, sonst misst du eine Kombination, die es auf dem Bildschirm nie gibt.

Prüfe Paare, nicht Seiten. Fast jede Website kommt mit 15 bis 30 Farbkombinationen aus: Fließtext auf Seitenhintergrund, Fließtext auf Karte, Linktext, Button-Beschriftung, Hilfetext, Fehlertext, Fußzeile. Diese Liste einmal sauber durchzumessen dauert eine halbe Stunde und deckt den größten Teil deiner Seiten ab. Trag die Paare in eine Tabelle ein und prüfe sie einzeln im Kontrast-Checker — er zeigt AA und AAA für normalen und großen Text sowie den Nicht-Text-Grenzwert nebeneinander, sodass du pro Paar nur einmal messen musst.

Runde nicht selbst. 4,49:1 ist nicht bestanden, auch wenn die Anzeige „4,5" sagt. Ein sauber gebautes Tool entscheidet Bestanden/Nicht bestanden auf dem ungerundeten Wert und rundet erst für die Ausgabe. Wenn du einen Wert bekommst, der exakt auf der Grenze liegt, gib deiner Farbe lieber einen Schritt Luft.

Typische Fallen

Eine siebte Falle verdient einen eigenen Absatz, weil sie am häufigsten zu Diskussionen führt: weiße Schrift auf Signalfarben. Gelb, Orange und helle Grüntöne erreichen mit Weiß fast nie 4,5:1 — ihre Leuchtdichte liegt zu nah an der von Weiß. Dunkle Schrift ist auf solchen Flächen fast immer die richtige Antwort, und sie sieht in der Regel auch besser aus.

Was ein automatischer Scan findet — und was nicht

Hier ist die ehrliche Version, weil sie dir Arbeit spart.

Was zuverlässig funktioniert: Wenn Text auf einer einfarbigen Fläche liegt, kann ein Scanner beide Farben aus dem gerenderten CSS auslesen, das Verhältnis exakt berechnen und Verstöße lückenlos melden. Das deckt den größten Teil einer typischen Website ab — Fließtext, Navigation, Buttons, Formulare, Fußzeile. In dieser Kategorie ist die Automatik nicht nur brauchbar, sondern jedem manuellen Vorgehen überlegen: Sie prüft jedes Element auf jeder Seite, statt Stichproben zu ziehen.

Was prinzipbedingt nicht funktioniert: Sobald hinter dem Text kein eindeutiger Farbwert steht, hat der Scanner nichts zu rechnen. Das betrifft Text über Fotos, über Farbverläufen, über Videos und über halbtransparenten Ebenen. Seriöse Prüfwerkzeuge melden solche Fälle deshalb nicht als „bestanden", sondern als „nicht entscheidbar" — was in Reports gerne übersehen wird. Genau diese Stellen sind aber die, die in echten Audits auffallen, weil Hero-Bereiche mit Text über Bild auf fast jeder Startseite stehen.

Was daraus folgt: Lass die einfarbigen Fälle automatisch prüfen und nimm dir die Bild- und Verlaufsfälle einzeln vor. Für den ersten Teil zeigt dir der kostenlose Website-Scan alle Fundstellen samt Farbwerten, statt dass du sie einzeln zusammensuchst. Für den zweiten Teil gibt es keine Abkürzung: Screenshot machen, ungünstigste Stelle bestimmen, Farbe mit der Pipette abnehmen, Paar prüfen. Wenn das Ergebnis nicht reicht, hilft in aller Regel eine abdunkelnde Überlagerung zwischen Bild und Text — sie macht den Hintergrund wieder berechenbar.

Wenn die Markenfarbe knapp scheitert

Der häufigste Konflikt in diesem Thema: Das Corporate Blue erreicht auf Weiß 3,9:1. Zu wenig für Text, aber niemand im Unternehmen wird die Hausfarbe ändern.

Muss auch niemand. Die Lösung ist eine Aufgabenteilung statt eines Austauschs:

• Der Originalton bleibt für Flächen. Buttons, Banner, Hintergründe, Diagrammflächen, Rahmen. Für aussagekräftige Grafiken und Bedienelemente reichen 3:1 — die meisten Markenfarben schaffen das problemlos.
• Eine abgedunkelte Abstufung übernimmt den Text. Gleicher Farbton, gleiche Sättigung, nur die Helligkeit ein Stück nach unten. Für das Auge ist es dieselbe Farbe; für die Rechnung reicht es.

In der Praxis heißt das: zwei Tokens statt einem, etwa brand-500 für Flächen und brand-700 für Text auf hellem Grund. Welche Abstufung genau nötig ist, musst du nicht raten — der Kontrast-Checker schlägt dir die nächstgelegene bestehende Variante vor und behält dabei Farbton und Sättigung bei, sodass du den Vorschlag direkt als Token übernehmen kannst.

Ein Sonderfall bleibt: Auf mittelgrauen Hintergründen ist manchmal kein Wert erreichbar, weil weder Aufhellen noch Abdunkeln genug Abstand schafft. Dann ist der Hintergrund das Problem, nicht die Schrift.

Fazit

Kontrast ist eines der wenigen Barrierefreiheits-Kriterien, die sich vollständig objektiv entscheiden lassen: Es gibt eine Zahl, es gibt eine Schwelle, und beide sind nicht verhandelbar. Das macht das Thema unbequem in Designdiskussionen — und gleichzeitig zu einem der schnellsten Fortschritte, die du erzielen kannst. Ein Nachmittag mit einer Farbpaar-Tabelle bringt dich bei einem der am häufigsten verfehlten Kriterien auf einen sauberen Stand.

Fang bei den Paaren an, die auf jeder Seite vorkommen. Fließtext, Links, Buttons, Hilfetexte. Danach die Hero-Bereiche mit Bildhintergrund, weil dort die Automatik aussteigt.

Häufig gestellte Fragen (FAQ)

Gegen welchen Hintergrund muss ich messen — das Elternelement oder die Seite?

Gegen die Farbe, die tatsächlich hinter dem Text gerendert wird. Liegt der Text in einer weißen Karte auf grauem Seitenhintergrund, ist Weiß der Bezugswert. Ist die Karte halbtransparent, musst du die resultierende Mischfarbe bestimmen und diese verwenden — nicht den Wert aus dem CSS.

Gilt der Grenzwert im Dark Mode genauso?

Ja, und er gilt separat. Hell- und Dunkelmodus sind zwei eigenständige Farbsätze, die beide für sich bestehen müssen. Erfahrungsgemäß fallen im Dark Mode andere Paare durch als im hellen Modus, vor allem gesättigte Akzentfarben und dünne Rahmen.

Mein Wert liegt bei 4,48:1 — ist das bestanden?

Nein. Die Schwelle ist 4,5:1, und die Entscheidung fällt auf dem ungerundeten Verhältnis. Anzeigen, die auf eine Nachkommastelle runden, können hier täuschen. Plane bei knappen Werten eine kleine Reserve ein, damit spätere Farbanpassungen dich nicht unbemerkt unter die Grenze drücken.

Muss ich für deaktivierte Buttons einen Kontrast einhalten?

Rein formal nein — inaktive Bedienelemente sind von 1.4.3 ausgenommen. Verständlich bleiben sollten sie trotzdem: Wenn die Beschriftung unlesbar ist, kann niemand einschätzen, welche Aktion gerade nicht verfügbar ist. Ein Wert um 3:1 ist hier ein guter Kompromiss zwischen „sichtbar deaktiviert" und „noch lesbar".

Was ist mit APCA — löst das die WCAG-Grenzwerte ab?

Der Advanced Perceptual Contrast Algorithm ist ein Verfahren, das die Wahrnehmung besser abbilden soll als die aktuelle Formel, und wird im Rahmen der Arbeiten an WCAG 3 diskutiert. Normativ ist er nicht: Geprüft und rechtlich bewertet wird nach WCAG 2.1 mit den Verhältnissen 4,5:1 und 3:1. Als zusätzliche Designhilfe kannst du APCA nutzen, als Nachweis nicht.

Reicht es, wenn ich einmal alle Farben geprüft habe?

Für den Moment ja, dauerhaft nein. Neue Komponenten, geänderte Tokens und Beiträge mit eigenen Farben bringen laufend neue Paare hinzu. Sinnvoll ist, die Grenzwerte in eurem Designsystem zu verankern — also nur Kombinationen als Token anzubieten, die bereits bestanden haben. Dann ist die Prüfung einmalig, und die Einhaltung danach automatisch.