Es gibt einen Fehler, den ich in praktisch jedem Audit finde – und es ist zugleich der mit Abstand häufigste WCAG-Verstoß im gesamten Web: zu geringer Farbkontrast. Wenn Sie die Barrierefreiheit Ihrer Farben testen, stoßen Sie fast garantiert auf Stellen, an denen Text oder Bedienelemente die Mindestwerte verfehlen – meist dort, wo das Design besonders elegant wirken sollte. Das Tückische daran: Kontrastfehler entstehen selten aus Nachlässigkeit, sondern aus bewussten Designentscheidungen. In diesem Ratgeber zeige ich Ihnen die geforderten Mindestwerte, erkläre den Rechenweg hinter dem Kontrastverhältnis und benenne die drei Stellen, an denen Designer die 4,5:1-Regel am häufigsten reißen.
Welche Kontrastwerte die WCAG vorschreibt
Die WCAG fordern auf der gesetzlich relevanten Konformitätsstufe AA ein Kontrastverhältnis von mindestens 4,5:1 zwischen Text und Hintergrund. Für großen Text – ab 18 Punkt beziehungsweise 14 Punkt fett – genügen 3:1, weil größere Schrift auch bei geringerem Kontrast lesbar bleibt. Daneben verlangt das Kriterium 1.4.11 für grafische Bedienelemente und aussagekräftige Grafiken ebenfalls mindestens 3:1. Auf der höchsten Stufe AAA steigen die Anforderungen auf 7:1 für normalen und 4,5:1 für großen Text. Maßgeblich für die Praxis ist die Stufe AA.
Die Mindestwerte im Überblick
| Element | Stufe AA | Stufe AAA |
|---|---|---|
| Normaler Text (unter 18 pt bzw. 14 pt fett) | 4,5:1 | 7:1 |
| Großer Text (ab 18 pt bzw. 14 pt fett) | 3:1 | 4,5:1 |
| Grafische Bedienelemente und Icons (1.4.11) | 3:1 | 3:1 |
| Logos und inaktive Elemente | ausgenommen | ausgenommen |
Wie das Kontrastverhältnis berechnet wird
Hinter der scheinbar simplen Zahl 4,5:1 steckt eine Formel, die man kennen sollte, um die Werte einordnen zu können. Das Kontrastverhältnis ergibt sich aus der relativen Luminanz – also der wahrgenommenen Helligkeit – beider Farben:
(Lhell + 0,05) / (Ldunkel + 0,05)
Dabei ist L die relative Luminanz einer Farbe, die sich aus ihren Rot-, Grün- und Blauanteilen zusammensetzt – gewichtet danach, wie empfindlich das menschliche Auge für die jeweilige Grundfarbe ist. Grün wird am stärksten gewichtet, Blau am schwächsten. Das Ergebnis liegt immer zwischen 1:1 (zwei identische Farben) und 21:1 (reines Schwarz auf reinem Weiß).
Ein konkretes Beispiel macht die Knappheit der Grenze deutlich: Ein mittleres Grau mit dem Hex-Wert #767676 auf weißem Grund erreicht ein Verhältnis von rund 4,54:1 – es besteht also gerade so. Ein Hauch heller, #777777, kommt nur noch auf etwa 4,48:1 und fällt damit durch. Eine einzige Stufe im Hex-Code entscheidet über Bestehen oder Scheitern. Genau deshalb sollten Sie sich nicht auf das Augenmaß verlassen, sondern messen.
Die drei Stellen, an denen Designer die 4,5:1-Regel reißen
In meiner Audit-Praxis tauchen Kontrastfehler überraschend zuverlässig an denselben drei Stellen auf. Sie haben eines gemeinsam: An allen drei Orten steht Ästhetik gegen Lesbarkeit – und meistens hat die Ästhetik gewonnen.
Platzhaltertext in Formularfeldern
Der hellgraue Platzhalter im Eingabefeld – „Ihre E-Mail-Adresse“ in zartem Grau – ist der Klassiker. Designer empfinden ihn als dezent, aber genau diese Dezenz bedeutet meist einen Kontrast deutlich unter 4,5:1. Platzhaltertext, der echte Information trägt, muss die Mindestwerte erfüllen. Wenn er nur ein Beispiel zeigt, sollte er trotzdem lesbar sein, damit Nutzer überhaupt erkennen, was erwartet wird.
Text auf Bildern und Hero-Bannern
Weißer Text über einem Foto sieht auf der Designvorlage großartig aus – über einem hellen Himmelausschnitt verschwindet er aber komplett. Das Problem: Der Kontrast variiert je nach Bildstelle, und an der hellsten Stelle reißt die Regel. Wer Text über Bilder legt, braucht ein abdunkelndes Overlay, einen Textschatten oder einen blickdichten Hintergrundbalken, damit der Kontrast überall stimmt.
Buttons und Links in heller Markenfarbe
Helle Markenfarben sind die dritte Dauerbaustelle. Ein Button in hellem Markenblau, Gelb oder Hellgrün mit weißer Beschriftung unterschreitet die 4,5:1-Grenze fast immer. Hier kollidiert der Wunsch nach Markenkonsistenz mit der Lesbarkeit. Die Lösung ist selten der Verzicht auf die Markenfarbe, sondern eine abgedunkelte Variante speziell für Flächen mit Text – die Marke bleibt erkennbar, der Text wird lesbar.
Die oft vergessene Regel: Kontrast von Bedienelementen
Eine Anforderung wird selbst von erfahrenen Teams regelmäßig übersehen: Kriterium 1.4.11 verlangt auch für Nicht-Text-Inhalte einen Mindestkontrast von 3:1. Das betrifft die Umrandung von Eingabefeldern, die Kontur von Icons, den Fokus-Indikator und grafische Bedienelemente. Ein hellgrau umrandetes Formularfeld auf weißem Grund kann den Text-Kontrast bestehen und trotzdem an dieser Regel scheitern, weil die Feldgrenze selbst nicht erkennbar ist. Diese Kategorie taucht in Audits fast so häufig auf wie die klassischen Textkontraste.
Womit Sie Farben auf Barrierefreiheit testen
Für die Messung einzelner Farbpaare gibt es etablierte Werkzeuge – Kontrast-Checker, die Sie zwei Hex-Werte eingeben lassen und das Verhältnis samt Bestanden-Status ausgeben. Sie sind nützlich und gehören in jeden Design-Workflow. Aber sie haben eine entscheidende Grenze: Ein Checker prüft das Farbpaar, das Sie ihm geben. Er weiß nicht, welche Farbe an welcher Stelle Ihrer Website tatsächlich auf welchem Hintergrund landet – schon gar nicht bei dynamischen Inhalten, Hover-Zuständen, Text über Bildern oder nutzergenerierten Beiträgen. Wenn Sie also Ihre Farben isoliert testen, beantworten Sie nur die halbe Frage.
Was ein einzelnes Tool nicht sieht
Der Kontrast einer Farbe ist eine Sache. Ob diese Farbe in Ihrer realen, gerenderten Seite überall die Mindestwerte einhält, ist eine andere. Genau diese Lücke schließt ein automatisiertes Audit der echten Seite statt einzelner Farbwerte. Unser kostenloser Access Score scannt Ihre Website im realen Rendering, erkennt Kontrastverstöße im tatsächlichen Kontext – inklusive der drei oben beschriebenen Problemstellen – und übersetzt die Befunde in konkrete Handlungsempfehlungen. So sehen Sie nicht nur, dass ein Wert zu niedrig ist, sondern wo auf Ihrer Seite er auftritt.
Kontrast ist dabei nur eine von vielen Stellschrauben für gute Gestaltung. Welche Designprinzipien insgesamt den größten Wirkungshebel haben, lesen Sie in Barrierefreies Webdesign: Die Prinzipien, die wirklich Wirkung zeigen. Und welche Kriterien mit der aktuellen Version hinzugekommen sind, finden Sie in WCAG 2.2 einfach erklärt: Die wichtigsten Erfolgskriterien für die Praxis.
