Farbkontraste prüfen: 4,5:1 ohne Fachchinesisch

Das Wichtigste in Kürze

• Das Kontrastverhältnis vergleicht die Helligkeit von Schrift und Untergrund, nicht die Farben. Die Skala reicht von 1:1 (unsichtbar) bis 21:1 (Schwarz auf Weiß).
• Drei Schwellen gelten: 4,5:1 für normalen Text, 3:1 für großen Text (ab 24 px, fett ab 18,66 px) und 3:1 für Bedienelemente und aussagekräftige Grafiken.
• Der Klassiker ist weiße Schrift auf einer hellen Markenfarbe. Weiß auf einem typischen Orange erreicht rund 2:1 – weniger als die Hälfte des Geforderten.
• Die Faustregel für Markenfarben lautet: die Fläche abdunkeln, nicht die Schrift grau machen. Farbton und Sättigung bleiben, nur die Helligkeit wandert – die Marke bleibt erkennbar.
• Ein Scan misst Textfarbe gegen Hintergrundfarbe exakt und über alle Seiten hinweg. Text auf Fotos, Verläufe und Farben aus JavaScript sieht er nicht.
• Der häufigste Stolperstein sind Inline-Styles: Eine Farbe direkt im Element schlägt jedes Stylesheet und muss einzeln angefasst werden.
• Welche Farbe am Ende gilt, ist eine Markenentscheidung. Wir legen Varianten mit Zahlen vor – entscheiden tun Sie.

Was 4,5:1 überhaupt bedeutet

Hinter dem Kontrastverhältnis steckt eine Messgröße, die die WCAG „relative Leuchtdichte“ nennt: wie viel Licht eine Farbe abgibt, gewichtet nach der Empfindlichkeit des Auges. Grün wirkt heller als Blau, obwohl beide dieselbe Zahl im Farbcode tragen können. Diese Helligkeit wird für Schrift und Untergrund berechnet und ins Verhältnis gesetzt – immer heller zu dunkler, deshalb ist der Wert nie kleiner als 1.

Die Analogie, die am besten trägt, ist Lautstärke. Denken Sie an ein Restaurant: Der Hintergrund rauscht, Ihre Stimme muss sich darüber erheben. 1:1 heißt, die Stimme ist genauso laut wie das Rauschen – man hört nichts. 21:1 ist der leere Raum, in dem jedes Wort steht. 4,5:1 ist die Lautstärke, bei der auch jemand mitkommt, der nicht mehr das beste Gehör hat. Daher stammt die Zahl: Die WCAG leiten 4,5:1 aus dem Kontrastverlust bei einer Sehschärfe von etwa der Hälfte des Normalwertes ab – ein Nachlassen, das mit dem Alter kommt, ohne dass die Betroffenen sich für sehbehindert halten.

Zwei Folgerungen überraschen fast jeden. Erstens: Zwei sehr unterschiedliche Farben können trotzdem durchfallen. Sattes Rot auf sattem Grün ist ein grober Farbunterschied – die Helligkeiten liegen aber dicht beieinander, das Verhältnis landet bei etwa 1,3:1. Zweitens: Ihr eigener Eindruck taugt nicht als Prüfung. Sie kennen den Text, Ihr Monitor ist gut, das Büro ist abgedunkelt. Ihre Kundin liest denselben Text auf einem alten Telefon in der Mittagssonne.

Deshalb ist Kontrast der angenehmste Befund im Themenfeld: keine Geschmackssache, sondern eine Zahl, die zwei Personen unabhängig voneinander nachrechnen können. Wo er in der Rangliste der gemessenen Probleme steht, zeigt unsere Auswertung der häufigsten Barrierefreiheits-Fehler.

Die Grenzwerte sauber auseinandergehalten

„4,5:1“ ist die bekannteste Zahl, aber nicht die einzige. Die Anforderung unterscheidet nach Größe und Art des Elements. Wer das durcheinanderbringt, korrigiert zu viel oder übersieht die Hälfte.

Drei Details entscheiden in der Praxis. Erstens zählt die Größe, in der die Schrift beim Besucher ankommt, nicht die im Entwurf: Ein Standardbrowser stellt 1 rem als 16 px dar, „groß“ beginnt also erst bei 1,5 rem. Zweitens ist Fett kein Freibrief – die Erleichterung auf 18,66 px gilt nur für tatsächlich fette Schnitte, nicht für halbfette Varianten mit dünnen Strichen. Drittens ist 1.4.11 der Punkt, den fast alle übersehen: Ein hellgrauer Rahmen um ein Eingabefeld sieht aufgeräumt aus, macht aber unsichtbar, wo man klicken soll. Im Bestellablauf ist das teuer – warum, steht im Artikel zum barrierefreien Checkout.

Warum Markenfarben so oft durchfallen

Ein Muster begegnet uns in Prüfberichten immer wieder: weiße Schrift auf einer hellen Markenfarbe. Orange, Hellgrün, Gelb, helles Pink – Farben, die auf Papier hervorragend wirken und auf dem Bildschirm zu wenig Abstand zu Weiß haben. Die Werte sind ernüchternd:

Der erste Reflex im Marketing ist meist der falsche: die Schrift ändern. Weiß wird zu Grau, und die Schaltfläche sieht aus, als wäre sie deaktiviert. Die Faustregel lautet umgekehrt: Steht weiße oder schwarze Schrift auf einer Markenfarbe, wird die Fläche angepasst, nicht die Schrift. Technisch verschiebt man dabei nur die Helligkeit und lässt Farbton und Sättigung stehen. Das Ergebnis ist erkennbar dieselbe Farbe – ein dunkleres Orange bleibt Orange –, und der Abstand zur Schrift stimmt.

Beim Gelb zeigt sich der zweite Weg: #ffd400 mit schwarzer Schrift erreicht 14,67:1. Bei sehr hellen Farben ist der Wechsel auf schwarze Schrift oft ehrlicher als ein Gelb, das keines mehr ist. Die dritte Möglichkeit ist, die Fläche gar nicht zu bedrucken: Die leuchtende Originalfarbe darf als Akzent, Illustration oder Diagrammfarbe bleiben, solange kein Text darauf liegt – dort gilt die Schwelle 3:1.

Wichtig für das Gespräch mit der Agentur: Niemand tauscht das Corporate Design aus. Ein Markenhandbuch verträgt eine Textvariante derselben Farbe, so wie es längst getrennte Werte für Druck und Bildschirm kennt. Betroffen ist ein einziger Anwendungsfall – Farbe unter Schrift –, nicht die Marke.

Was ein automatischer Scan hier sieht – und was nicht

Kontrast ist die Paradedisziplin der automatischen Prüfung. Ein Prüflauf liest für jedes Textelement die wirksame Schriftfarbe und die Hintergrundfarbe aus, berechnet das Verhältnis und vergleicht es mit der Schwelle, die zur gemessenen Schriftgröße passt – über hunderte Seiten hinweg, ohne Ermüdung und ohne Ermessensspielraum. Jeder Befund ist nachrechenbar, deshalb gibt es darüber selten Diskussionen.

Genauso wichtig ist die Gegenseite. Vier Fälle bleiben der Automatik verschlossen:

• Text auf Fotos. Hinter dem Wort „Sommerschlussverkauf“ liegt kein Farbwert, sondern ein Bild. Wo das Motiv hell ist, verschwindet die Schrift, zwei Zentimeter weiter steht sie einwandfrei. Ein Werkzeug meldet hier bestenfalls „nicht beurteilbar“.
• Verläufe und halbtransparente Flächen. Ein Farbverlauf hat an jedem Punkt einen anderen Wert; dasselbe gilt für abgedunkelte Ebenen über einem Bild.
• Farben, die erst später entstehen. Was per JavaScript gesetzt wird – Fehlermeldungen nach einer ungültigen Eingabe, Hover- und Fokusfarben, aufgeklappte Menüs, Inhalte hinter dem Login –, existiert im Moment der Messung nicht.
• Was nicht sichtbar ist. Der zweite Reiter, der eingeklappte Filter, der Schritt hinter der Bezahlung: Was nicht geöffnet wird, wird nicht gemessen.

Diese Fälle verschwinden nicht aus der Welt, nur aus der Statistik – sie landen in der Kategorie „unvollständig“ und damit gern in der Ablage. Automatisierte Prüfung deckt die maschinell prüfbaren Kriterien ab; eine vollständige Konformitätsbewertung erfordert zusätzlich manuelle Prüfung. Beim Kontrast heißt das: einmal mit der Hand über die Zustände gehen, die eine Maschine nicht auslöst.

Der Stolperstein in der Umsetzung: Inline-Styles

Bis hierhin klingt Kontrast nach zwanzig Minuten Arbeit: eine Farbe zentral ändern, fertig. In der Praxis scheitert das fast immer am selben Punkt.

Eine Farbe kann an zwei Orten stehen: zentral im Stylesheet, wo ein einziger geänderter Wert überall wirkt – oder direkt am Element, als style="color:#999" mitten im Inhalt. Die zweite Schreibweise schlägt jede Regel aus dem Stylesheet – sie steht näher am Element und gewinnt. Wer die zentrale Farbe korrigiert, ändert dort nichts; jede Stelle muss einzeln angefasst werden.

Solche Inline-Farben entstehen selten mit Absicht. Sie kommen aus dem Texteditor, wenn ein Absatz aus einer Textverarbeitung eingefügt wurde, aus Baukasten-Modulen mit eigenem Farbwähler, aus alten Aktionsseiten und aus Erweiterungen mit eigenem Aussehen. In einem über Jahre gewachsenen Shop sammeln sich davon entsprechend viele Fundstellen an – wie viele es sind, sagt erst die Messung.

Dazu kommt eine Tücke beim Suchen: Derselbe Grauton lässt sich als #888, #888888, rgb(136,136,136) oder als Farbname schreiben. Wer nach der langen Schreibweise sucht, findet die kurze nicht – und übersieht ausgerechnet die ältesten Stellen. Auch Variablen verstecken den Wert hinter einem Namen. Ein Prüflauf hat dieses Problem nicht: Er misst, was im Browser ankommt, gleich wie es geschrieben wurde.

Was Sie in zehn Minuten selbst prüfen können

Für einen ersten Eindruck brauchen Sie nur den Browser, den Sie ohnehin geöffnet haben. Die Entwicklerwerkzeuge von Firefox, Chrome und Edge rechnen das Kontrastverhältnis selbst aus.

1. Klicken Sie mit der rechten Maustaste auf den Text und wählen Sie Untersuchen (alternativ F12).
2. Im rechten Bereich stehen die Stilregeln. Neben der Eigenschaft color sitzt ein kleines Farbquadrat.
3. Klicken Sie es an. Der Farbwähler öffnet sich und nennt das Kontrastverhältnis zum errechneten Hintergrund – mit Haken oder Kreuz für die Stufen AA und AAA.
4. Im Farbfeld markiert eine Linie die Grenze: Alles auf der einen Seite erfüllt 4,5:1, alles auf der anderen nicht. Sie sehen sofort, wie weit es fehlt.

Firefox hat zusätzlich eine Barrierefreiheits-Ansicht, die auf Knopfdruck alle Textstellen einer Seite mit zu geringem Kontrast auflistet – der schnellste Weg, eine ganze Vorlage zu überblicken.

Es gilt dieselbe Einschränkung wie beim Scan: Liegt der Text auf einem Foto oder einer halbtransparenten Fläche, kann auch das Browserwerkzeug den Hintergrund nicht bestimmen und zeigt statt eines Wertes eine Spanne. Keine Entwarnung, sondern die Stelle für das menschliche Urteil.

Sechs Stellen lohnen den Anfang, weil sie am häufigsten betroffen sind: die Haupt-Schaltfläche, Platzhaltertext in Formularfeldern, Links im Fließtext, die Fußzeile, Streichpreise und Rabatt-Badges sowie Fehlermeldungen in Rot. Prüfen Sie sie auf Ihren fünf wichtigsten Vorlagen – Startseite, Kategorie, Produktseite, Warenkorb, Bestellabschluss. Die breitere Prüfliste steht in der BFSG-Checkliste für Onlineshops.

Die Farbwahl bleibt Ihre Entscheidung

Hier endet die Technik und beginnt die Marke. Ein Messwert sagt, dass eine Kombination die Schwelle verfehlt. Er sagt nicht, welche Korrektur die richtige ist – ob das Orange dunkler wird, die Schrift auf Schwarz wechselt oder der Text neben die Farbe rückt.

Unsere Rolle ist deshalb klar abgegrenzt. Wir messen den Bestand, rechnen zu jeder beanstandeten Kombination die nächstliegende Variante aus, die die Schwelle erreicht, und legen sie mit Zahlen vor: Ausgangswert, Vorschlag, erreichtes Verhältnis, betroffene Stellen. Wir verschieben nur die Helligkeit und ändern kein Corporate Design im Alleingang. Die Entscheidung treffen Sie, gegebenenfalls mit Ihrer Agentur.

Der Nutzen liegt weniger im Ergebnis als im Verlauf: Eine Farbdiskussion mit zwei Zahlen auf dem Tisch ist nach zwanzig Minuten entschieden, dieselbe Diskussion ohne Zahlen dauert Wochen. Und sie fällt nur einmal an: Steht die geprüfte Palette, erben alle neuen Seiten sie. Kontrast ist damit einer der wenigen Punkte, die man abschließen kann – anders als Alt-Texte für Produktbilder, die mit jedem neuen Artikel neu entstehen.

Was der Kontrast nicht löst

Ein Shop, in dem jeder Wert über der Schwelle liegt, ist deswegen nicht barrierefrei. Kontrast ist ein Kriterium von vielen, zwei benachbarte werden regelmäßig mitverletzt. WCAG 1.4.1 verlangt, dass Farbe nie der einzige Träger einer Information ist: Ein rot umrandetes Feld muss zusätzlich sagen, was fehlt. WCAG 1.4.4 verlangt, dass Text sich auf 200 Prozent vergrößern lässt, ohne dass Inhalt verloren geht – daran zerbrechen viele Layouts, die den Kontrasttest bestehen.

Zum rechtlichen Rahmen nur das Sachliche: Das Barrierefreiheitsstärkungsgesetz (BFSG) gilt seit dem 28.06.2025; § 37 BFSG sieht Bußgelder bis 100.000 € vor. Die Ausnahme für Kleinstunternehmen nach § 3 Abs. 3 BFSG greift bei weniger als 10 Beschäftigten und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme – und nur für Dienstleistungen, nicht für Produkte. Ob sie Ihr Angebot erfasst, beurteilt eine Anwältin oder ein Anwalt; dieser Artikel ist eine technische Einordnung und keine Rechtsberatung.

Der Rat bleibt unspektakulär: Nehmen Sie den Kontrast zuerst – er ist messbar, abschließbar und nützt allen, die Ihre Seite draußen im Hellen auf dem Telefon öffnen.

Häufige Fragen

Dieser Artikel ist eine technische Einordnung und keine Rechtsberatung. Quellen: WCAG 2.1, Erfolgskriterien 1.4.3 Kontrast (Minimum) (Stufe AA), 1.4.11 Nicht-Text-Kontrast (Stufe AA), 1.4.1 Benutzung von Farbe (Stufe A) und 1.4.4 Textgröße ändern (Stufe AA); EN 301 549, Abschnitte 9.1.4.3, 9.1.4.11, 9.1.4.1 und 9.1.4.4; Gesetz zur Stärkung der Barrierefreiheit von Produkten und Dienstleistungen (BFSG), insbesondere §§ 3 und 37; Barrierefreiheitsstärkungsgesetz-Verordnung (BFSGV). Alle in diesem Artikel genannten Kontrastwerte sind für die jeweils angegebenen Farbwerte nach der WCAG-Formel nachgerechnet.