Farbkontraste: wenn Text zwar da ist, aber niemand ihn liest

Es gibt einen Fehler, den fast jede Website hat und den fast niemand bemerkt: Text, der auf dem Bildschirm des Gestalters gut aussah und beim Kunden verschwindet. Zu helles Grau auf Weiß. Weiße Schrift über einem Foto. Ein Platzhalter im Formularfeld, den man nur erahnt. Das ist keine Geschmacksfrage: Es gibt eine Maßzahl, es gibt Grenzwerte — 4,5:1 für normalen Text, 3:1 für großen Text und Bedienelemente —, und Farbe darf nie das einzige Signal für eine Information sein.

Was Kontrast eigentlich ist

Kontrast beschreibt das Verhältnis der Helligkeit zweier Farben. Nicht ihre Buntheit, nicht ihre Sättigung — die Helligkeit. Deshalb kann ein kräftiges Rot auf einem kräftigen Grün furchtbar aussehen und trotzdem denselben Kontrastwert haben wie zwei zahme Grautöne.

Der Wert wird als Verhältnis geschrieben und reicht von 1:1 bis 21:1. 1:1 ist eine Farbe auf sich selbst, 21:1 ist Schwarz auf Weiß. Berechnet wird er aus der relativen Leuchtdichte der helleren Farbe L1 und der dunkleren L2:

Kontrastverhältnis = (L1 + 0,05) / (L2 + 0,05)

Rechnen musst du das nie selbst. Aber ein Gefühl für die Größenordnung entschärft jede Diskussion über Markenfarben: Grau #767676 auf Weiß ergibt 4,54:1 — für normalen Text reicht das gerade. Ein etwas dunkleres Grau, #595959, erreicht 7:1 und damit sogar die höchste Stufe. Zwischen „gerade bestanden" und „komfortabel für alle" liegen zwei Ziffern in einem Farbwert. Es kostet fast nichts, und es sieht nicht schlechter aus.

Die Grenzwerte

Die Richtlinien für barrierefreie Webinhalte (WCAG) legen in Stufe AA fest:

Was	Mindestkontrast	Kriterium
Normaler Text	4,5:1	1.4.3
Großer Text ab 18 pt (24 px) oder fett ab 14 pt (etwa 18,5 px)	3:1	1.4.3
Bedienelemente, Symbole, Fokusrahmen, informationstragende Grafiken	3:1	1.4.11

Die höhere Stufe AAA verlangt 7:1 für normalen und 4,5:1 für großen Text. Maßstab für die gesetzlichen Anforderungen ist AA: Das Barrierefreiheitsstärkungsgesetz verweist auf den Stand der Technik, und das ist die europäische Norm EN 301 549, die für Webinhalte die WCAG in den Stufen A und AA übernimmt. Kaum eine gewachsene Markenpalette erreicht durchgehend 7:1. AAA kann man anstreben — ein verfehltes AAA ist aber kein Mangel in derselben Kategorie wie ein verfehltes AA.

Warum ausgerechnet 4,5:1? Die Zahl gleicht den Kontrastverlust aus, der etwa einer Sehschärfe von 20/40 entspricht — laut W3C der typischen Sehschärfe von Menschen um die 80. Sie ist also keine Vorgabe für eine kleine Randgruppe. Sie ist die Vorgabe für deine ältesten Kunden.

Was außer Text noch Kontrast braucht

Hier machen die meisten Websites ihre Fehler, weil kaum jemand hinschaut. Kriterium 1.4.11 verlangt 3:1 für alles, was man sehen muss, um ein Bedienelement zu erkennen und zu benutzen:

• Formularfelder: Ist der Rahmen eines Eingabefelds das einzige Zeichen dafür, dass man hier etwas eingeben kann, braucht er 3:1 gegen den Hintergrund. Ein hellgraues Feld auf Weiß ist der Klassiker.
• Checkboxen und Optionsfelder: Der Kasten muss sich vom Hintergrund abheben — und das Häkchen vom Kasten. Häufig hat der Kasten guten Kontrast und das Häkchen ist ein zartes Hellblau.
• Der Fokusrahmen beim Durchtabben muss sich vom Hintergrund abheben.
• Aufklapp-Pfeile an Auswahlfeldern, oft das einzige Zeichen, dass sich etwas öffnet.
• Alleinstehende Symbole: Ein Symbol mit Text daneben ist Dekoration. Ein Symbol ohne Text trägt die Information allein.
• Diagramme, soweit man sie zum Verständnis braucht.

Ein Sonderfall, der oft falsch gemeldet wird: Der Rahmen eines Buttons braucht keinen Kontrast, wenn der Button auch ohne ihn als Button erkennbar ist — durch seine Fläche, seine Position, seine Beschriftung. Erst wenn der Rahmen die einzige Kennzeichnung ist, wird er Pflicht.

Farbe darf nie das einzige Signal sein

Das ist ein eigenes Kriterium und der zweite große Fehler in diesem Feld. Kriterium 1.4.1 (Stufe A) sagt: Farbe darf nicht das einzige sichtbare Mittel sein, um eine Information zu vermitteln. Kriterium 1.3.3 ergänzt: Anweisungen dürfen sich nicht allein auf Form, Farbe, Größe, Position oder Klang stützen.

Der Standardfall ist ein Formular, das Pflichtfelder nur rot markiert. Wer Rot und Grün schlecht unterscheidet, sieht die Markierung nicht, schickt das Formular unvollständig ab — und bekommt die Fehlermeldung ebenfalls nur in Rot. Die Lösung kostet zehn Minuten: ein Sternchen zusätzlich zur Farbe und oberhalb des Formulars ein Satz, was das Sternchen bedeutet.

<p>* Pflichtfeld</p>
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>

Dasselbe Prinzip an anderen Stellen:

• Ein Link im Fließtext braucht neben der Farbe ein zweites Merkmal, in der Regel eine Unterstreichung.
• Eine Fehlermeldung braucht neben dem roten Rahmen einen Text, der sagt, was falsch ist.
• Ein Status wie „erledigt" oder „offen" braucht neben der Farbe ein Symbol oder ein Wort.
• „Klicken Sie auf den blauen Button rechts" ist doppelt problematisch — Farbe und Position.

Wen das betrifft

Etwa einer von zwölf Männern und eine von 200 Frauen hat eine Farbsehschwäche, am häufigsten beim Unterscheiden von Rot und Grün. Betroffen sind dabei nicht nur diese zwei Farben — auch Paare wie Grün und Braun oder Blau und Violett werden schwer unterscheidbar.

Dazu kommen Gruppen, an die beim Wort Barrierefreiheit selten jemand denkt:

• Menschen mit nachlassender Kontrastempfindlichkeit — der Normalfall ab einem gewissen Alter, keine Erkrankung.
• Jeder, der sein Telefon draußen benutzt. Im Sonnenlicht bricht der Kontrast eines Displays spürbar ein.
• Jeder mit einem einfachen oder schlecht eingestellten Bildschirm.

Der Sonnenlicht-Fall überzeugt am schnellsten: Er betrifft nicht eine Minderheit, sondern fast alle — nur eben zeitweise.

Was ausdrücklich keinen Kontrast braucht

• Rein dekorativer Text ohne Information.
• Text in einem Logo oder Schriftzug — dein Firmenlogo muss die Grenzwerte nicht erfüllen.
• Deaktivierte Bedienelemente, etwa ein ausgegrauter Absende-Button. Er sollte trotzdem nicht so blass sein, dass niemand merkt, dass es ihn gibt.
• Text, der in einem Foto vorkommt, aber nicht dessen Aussage trägt.

Wie du das selbst prüfst

• Einzelne Farbpaare: der Colour Contrast Analyser von TPGi, ein kostenloses Programm mit Pipette, oder online der Kontrastrechner von WebAIM. Nimm die tatsächliche Hintergrundfarbe auf, statt Weiß anzunehmen — sehr oft ist es ein leichtes Grau, und genau das kippt eine knappe Kombination.
• Eine ganze Seite: die Browser-Erweiterung WAVE markiert Kontrastfehler direkt auf der Seite. Guter Überblick, findet aber nicht alles — vor allem nichts über Bildern.
• Farbsehschwächen: Chrome simuliert sie in den Entwicklerwerkzeugen unter „Rendering". Keine Erweiterung nötig.
• Die ganze Palette auf einmal: In eine Kontrastmatrix trägst du deine Farbwerte ein und siehst, welche Textfarbe auf welchem Hintergrund funktioniert — am besten, bevor die Farben in der ganzen Website stecken.
• Ohne Werkzeug: der Draußen-Test. Telefon, vor die Tür, Startseite lesen. Was dort verschwindet, ist zu schwach.

Die Stellen mit den häufigsten Funden: Platzhalter in Formularfeldern, ausgegraute Hilfetexte, die Fußzeile in hellem Grau auf hellem Grund, Text auf farbigen Buttons, Text über Bildern, der Fokusrahmen, Beschriftungen in Diagrammen und die Hover-Farben von Links.

Was zu tun ist

Ändere die Farbe, nicht die Schriftgröße. Größere Schrift senkt die Anforderung von 4,5:1 auf 3:1. Wer Fließtext vergrößert, damit ein zu helles Grau formal durchgeht, hat das Problem versteckt, nicht gelöst.

Arbeite an der Palette, nicht am Einzelfall. In einer sauber gebauten Website liegen die Farben in Variablen. Eine Anpassung an einer Stelle wirkt dann überall. Wer einzelne Textstellen dunkler stellt, hat nach einem halben Jahr vierzehn verschiedene Grautöne.

Problematische Farbpaare in der Helligkeit auseinanderziehen. Wenn Rot und Grün nebeneinander nötig sind, hilft es nicht, sie kräftiger zu machen — eine dunkler, eine heller hilft.

Text über Bildern: eine Fläche dazwischen. Eine halbtransparente dunkle Ebene oder ein eigener farbiger Block für den Text. Das funktioniert unabhängig davon, welches Bild später eingesetzt wird — und später wird ein anderes eingesetzt. Kontrast über Fotos lässt sich übrigens nicht zuverlässig automatisch messen: Weiße Schrift ist an einer Stelle gut lesbar und zwei Zentimeter weiter nicht. Das muss ein Mensch beurteilen.

Prüfe während der Farbwahl, nicht danach. Wer beim Festlegen prüft, korrigiert einen Farbwert. Wer hinterher prüft, überarbeitet im Zweifel eine ganze Gestaltung.

Und plane Puffer ein. Die nächste Version der Richtlinien, WCAG 3.0, ist noch ein Entwurf, und ihr Kontrastverfahren steht ausdrücklich noch nicht fest — der Entwurf geht aber davon aus, dass Schriftgröße und Schriftstärke künftig einfließen. Niemand sollte deshalb heute eine Website umbauen. Wer aber gerade eine Palette festlegt, landet besser nicht genau auf 4,5:1.

Quellen

• W3C, Understanding WCAG 2.2 — 1.4.3 Kontrast (Minimum): Grenzwerte, großer Text, Ausnahmen, Begründung mit 20/40: w3.org
• W3C, Understanding WCAG 2.2 — 1.4.6 Kontrast (erhöht): w3.org
• W3C, Understanding WCAG 2.2 — 1.4.11 Nicht-Text-Kontrast: w3.org
• W3C, Understanding WCAG 2.2 — 1.4.1 Benutzung von Farbe: w3.org
• W3C, Understanding WCAG 2.2 — 1.3.3 Sensorische Eigenschaften: w3.org
• W3C, Definition des Kontrastverhältnisses und der relativen Leuchtdichte: w3.org
• Portal Barrierefreiheit des Bundes — WCAG 2.1 und EN 301 549: barrierefreiheit-dienstekonsolidierung.bund.de
• W3C, WCAG 3.0 Working Draft — das Kontrastverfahren ist noch nicht festgelegt: w3.org
• Adrian Roselli, WCAG3 Contrast as of April 2026 — APCA wurde 2023 aus dem Entwurf genommen: adrianroselli.com
• PubMed Central, Studie zur Farbsehschwäche — etwa einer von zwölf Männern und eine von 200 Frauen: ncbi.nlm.nih.gov
• TPGi, Colour Contrast Analyser: tpgi.com
• WebAIM, Contrast Checker: webaim.org
• WAVE, Evaluation Tool: wave.webaim.org
• Chrome for Developers, Sehschwächen in den Entwicklerwerkzeugen simulieren: developer.chrome.com
• Accessible Color Matrix: toolness.github.io