5 Kontrast-Korrekturen, die wirklich funktionieren

Du hast einen Prüfer laufen lassen, ein Paar ist durchgefallen, und jetzt starrt dich eine Zahl an. Der schwere Teil ist nicht, den Fehler zu finden. Es ist, ihn zu beheben, ohne das Design plattzumachen, das du schon ausgeliefert hast. Die meisten Ratschläge enden bei “Kontrast erhöhen”, was zwar stimmt, aber nutzlos ist. Hier ist ein priorisierter Satz Korrekturen, von der wenigsten zur stärksten Störung, damit du nach der kleinsten Änderung greifen kannst, die die Hürde nimmt.

TL;DR: Dunkle oder helle zuerst den Text ab. Ist die Farbe selbst die Marke, verschieb die Marke in den Hintergrund und nimm Fast-Schwarz oder Fast-Weiß für die Worte. Overlays retten Text auf Fotos. Größerer Text ist ein Notbehelf, keine Korrektur.

Worauf du abzielst

WCAG AA hat zwei Zahlen, die man sich merken sollte. Normaler Text braucht ein Kontrastverhältnis von mindestens 4,5:1 gegenüber seinem Hintergrund. Großer Text braucht 3:1, wobei groß ab 24px bei normalem Gewicht oder ab 18,66px bei fett bedeutet. Dieselbe 3:1-Untergrenze gilt für Nicht-Text-UI: Icons, Fokus-Ringe, Eingaberänder, alles, was ein Nutzer wahrnehmen muss, um die Seite zu bedienen.

Das Kontrastverhältnis reicht von 1:1 (identische Farben, unsichtbar) bis 21:1 (reines Schwarz auf reinem Weiß). Das Verhältnis hängt von der relativen Leuchtdichte beider Farben ab, nicht vom Farbton, deshalb können zwei Farben, die unterschiedlich aussehen, trotzdem durchfallen, wenn sie auf ähnlicher Helligkeit liegen. Darum kann ein gesättigter blauer Link auf gesättigtem rotem Hintergrund unlesbar sein, obwohl die Farbtöne hart beißen.

Wähl die Korrektur, die zu dem passt, was in deinem Design feststeht und was sich frei bewegen darf.

Korrektur 1: Schieb den Text dunkler oder heller

Das ist fast immer das Erste, was man versuchen sollte. Die Textfarbe ist selten heilig, also schieb sie, bis sie besteht. Auf hellem Hintergrund dunkle den Text ab. Auf dunklem Hintergrund hell ihn auf. Du behältst Layout, Abstände und meist den Farbton.

Ein häufiger Fehler ist mittelgrauer Fließtext, der im Mockup elegant aussah.

Element	Vorher	Nachher	Hintergrund	Verhältnis vorher	Verhältnis nachher
Fließtext	#999999	#595959	#FFFFFF	2,85:1	7,0:1
Link auf Dunkel	#6699CC	#9FC2E8	#1A1A1A	3,9:1	8,4:1

Der Farbton bleibt erkennbar derselbe. Du hast nur seine Helligkeit verschoben. Das ist die am wenigsten störende Korrektur und behebt die meisten Fehler, also fang hier an, bevor du etwas Strukturelles anfasst.

Korrektur 2: Behalte die Markenfarbe, aber nicht auf dem Text

Manchmal ist die durchgefallene Farbe die Marke, und du willst deine Identität nicht neu streichen, nur um einen Prüfer zufriedenzustellen. Musst du auch nicht. Verschieb die Markenfarbe dorthin, wo sie keine Leselast trägt.

Sagen wir, deine Marke ist ein warmes Amber, #F0A500. Amber-Text auf Weiß ist ein klassischer Fehler, weil Amber hell ist. Die Korrektur: Lass Amber Hintergründe, große Überschriften, Buttons und Akzente besitzen, während der Fließtext auf Fast-Schwarz umschaltet.

Verwendung	Farbe	Hintergrund	Verhältnis	Urteil
Amber-Fließtext	#F0A500	#FFFFFF	1,9:1	Durchgefallen
Fast-schwarzer Fließtext	#1A1A1A	#FFFFFF	17,4:1	Bestanden
Große Überschrift in Amber	#F0A500	#1A1A1A	9,1:1	Besteht groß und normal
Fast-weißer Text auf Amber-Button	#FFFFFF	#F0A500	1,9:1	Durchgefallen
Dunkler Text auf Amber-Button	#1A1A1A	#F0A500	9,1:1	Bestanden

Die Marke liest sich laut und klar als Farbfeld. Die Worte sitzen in Fast-Schwarz oder Fast-Weiß. Beachte, dass Weiß auf Amber genauso hart durchfällt wie Amber auf Weiß, weil der Helligkeitsabstand in beide Richtungen gleich ist. Auf einer hellen Markenfarbe ist dunkler Text der richtige Zug.

Korrektur 3: Leg eine Schicht zwischen Text und einen unruhigen Hintergrund

Text über einem Foto oder einem Verlauf hat keine einzelne Hintergrundfarbe, sodass ein Prüfer dir nicht einmal eine ehrliche Zahl geben kann. Der dunkelste Fleck des Bildes besteht vielleicht, während der helle Himmel hinter der Überschrift durchfällt. Die Korrektur: Kontrollier den Hintergrund lokal mit einem Overlay.

Zwei Ansätze funktionieren. Ein solider Scrim ist ein halbtransparentes schwarzes oder weißes Panel hinter dem Textblock. Ein Verlaufs-Scrim blendet von deckend am Text zu transparent weiter weg über, was die Panelkante verbirgt.

Angenommen, weißer Überschriftentext sitzt über einem Foto, dessen hellste Region etwa #C8D2DC ist.

Aufbau	Effektiver Hintergrund	Verhältnis	Urteil
Weißer Text, kein Overlay, über hellem Himmel	#C8D2DC	1,4:1	Klar durchgefallen
Weißer Text über 60% schwarzem Scrim auf diesem Himmel	etwa #4F5559	6,8:1	Bestanden

Wähl die Overlay-Deckkraft, indem du gegen den schlechtesten Fleck testest, den der Text überquert, nicht gegen den Durchschnitt. Wechselt das Bild (verschiedene Fotos in einem Karussell), setz das Overlay stark genug für das hellste. Ein Blur hinter dem Text hilft der Wahrnehmung, ändert aber das Verhältnis nicht, verlass dich also nicht darauf, um zu bestehen.

Korrektur 4: Vergrößern, um die 3:1-Schwelle zu erreichen (vorsichtig)

Großer Text braucht nur 3:1, also kann ein Paar, das 4,5:1 verfehlt, trotzdem qualifizieren, wenn du den Text groß machst. Das hilft einer knapp verfehlten Überschrift wirklich.

Element	Farbe	Hintergrund	Verhältnis	Bei 16px normal	Bei 24px oder 19px fett
Unterüberschrift	#767676	#FFFFFF	4,54:1	Bestanden	Bestanden
Abschnittslabel	#949494	#FFFFFF	3,0:1	Durchgefallen	Bestanden

Nutz das, wenn das Design ohnehin eine große Überschrift will und dir ein Haar fehlt. Nutz es nicht als Erlaubnis, schwachen Fließtextkontrast zu behalten, indem du alles auf 24px aufbläst, denn das sprengt deine Schriftskala und lässt kleinen Text weiterhin durchfallen. Behandle Größe als Werkzeug für Überschriften, nicht als pauschalen Freibrief.

Korrektur 5: Verschieb den Hintergrund, wenn der Text festgesetzt ist

Gelegentlich ist die Textfarbe der feste Markenwert, in eine Logo-Konstruktion oder eine strikte Richtlinie geschrieben, und du kannst sie wirklich nicht anfassen. Dann ändere stattdessen den Hintergrund.

Wenn die Marke ein bestimmtes Blau für den Schriftzug verlangt, #2E5C8A, und es auf einer mittelgrauen Leiste sitzt, die durchfällt, dunkle oder helle die Leiste, bis das Paar die Hürde nimmt.

Element	Text	Hintergrund vorher	Hintergrund nachher	Verhältnis vorher	Verhältnis nachher
Marken-Schriftzug auf Leiste	#2E5C8A	#7A7A7A	#F2F2F2	1,6:1	5,1:1

Das Aufhellen der Leiste hat das Paar von einem klaren Durchfall zu einem klaren Bestehen geschoben, ohne das geschützte Blau anzufassen. Wenn der Vordergrund unbeweglich ist, ist der Hintergrund dein Hebel.

Reihenfolge zum Arbeiten

Geh die Liste der Reihe nach durch und halt bei der ersten Korrektur an, die passt. Justier den Text. Ist die Farbe die Marke, hol die Marke vom Text weg und nimm Fast-Schwarz oder Fast-Weiß zum Lesen. Füg ein Overlay hinzu, wenn der Hintergrund ein Bild oder Verlauf ist. Vergrößere nur, wenn das Design ohnehin große Schrift will. Justier den Hintergrund zuletzt, wenn die Textfarbe festgesetzt ist.

Prüf jede Korrektur mit echten Zahlen, nicht nach Augenmaß, denn ein Paar kann auf deinem hellen Monitor in Ordnung aussehen und auf einem dunkleren Bildschirm bei Tageslicht durchfallen. Kostenlose Kontrast-Tools im Browser, die diese Verhältnisse berechnen und bestehende Paare vorschlagen, kommen bald auf color.hivly.net. Bis dahin gibt dir jeder seriöse Kontrastprüfer das Verhältnis, das du brauchst, um die Korrektur zu bestätigen.