WCAG Kontraste richtig prüfen im Webdesign
Ein Button in Markenfarbe, hellgrauer Fließtext oder eine Statusmeldung mit rotem Hinweis: Solche Details wirken im Design oft stimmig und können trotzdem Menschen vom Inhalt ausschließen. Wer WCAG Kontraste richtig prüfen will, muss deshalb mehr tun, als einen Farbwert in einen Online-Rechner einzutragen. Entscheidend ist immer, wie Farbe, Schrift, Fläche, Interaktion und technische Umsetzung zusammenwirken.
Für Unternehmen ist das kein reines Gestaltungsthema. Unzureichende Kontraste beeinträchtigen die Nutzbarkeit, erhöhen Abbrüche und können bei öffentlich zugänglichen Angeboten rechtlich relevant sein. Eine systematische Prüfung schafft Klarheit - im Relaunch ebenso wie bei der Weiterentwicklung einer bestehenden TYPO3- oder WordPress-Website.
Was beim WCAG-Kontrast wirklich gemessen wird
Die Web Content Accessibility Guidelines, kurz WCAG, bewerten den Helligkeitsunterschied zwischen Vordergrund und Hintergrund. Das Ergebnis ist ein Kontrastverhältnis von 1:1 bis 21:1. Schwarz auf Weiß erreicht 21:1, identische Farben ergeben 1:1.
Dabei zählt nicht, ob sich zwei Farben subjektiv deutlich unterscheiden. Ein kräftiges Blau und ein dunkles Violett können für viele Menschen unterscheidbar wirken, aber dennoch ein zu geringes Kontrastverhältnis haben. Die Berechnung berücksichtigt die relative Helligkeit der verwendeten RGB-Farbwerte. Das menschliche Farbempfinden allein ist daher keine verlässliche Prüfmethode.
Für den Regelfall gelten nach WCAG 2.1 auf Konformitätsstufe AA diese Mindestwerte: Normaler Text braucht 4,5:1, großer Text 3:1. Als groß gilt Text ab 24 Pixeln oder ab etwa 18,7 Pixeln bei fetter Schrift. Auch Bedienelemente, aussagekräftige Icons sowie sichtbare Fokusmarkierungen benötigen in der Regel mindestens 3:1 gegenüber angrenzenden Farben.
Die strengere Stufe AAA fordert 7:1 für normalen und 4,5:1 für großen Text. Sie ist ein sinnvoller Qualitätsanspruch für besonders relevante Inhalte, lässt sich aber nicht in jedem Design durchgängig wirtschaftlich umsetzen. Gerade bei komplexen Markenauftritten sollte früh entschieden werden, wo AA verbindlich ist und an welchen Stellen ein höherer Standard sinnvoll ist.
WCAG Kontraste richtig prüfen: Nicht nur Text gegen Fläche
Der klassische Fehler: Eine Website prüft nur schwarze oder weiße Schrift auf den vorgesehenen Hintergrundfarben. In der Praxis entstehen kritische Kombinationen oft später - etwa durch CMS-Inhalte, transparente Overlays, Zustände von Formularen oder Bildmotive hinter Text.
Prüfen Sie deshalb jede Kombination in ihrem tatsächlichen Nutzungskontext. Ein heller Text kann auf dem vorgesehenen Headerbild funktionieren, auf einem später vom Redaktionsteam gewählten Foto aber nicht mehr lesbar sein. Wenn sich der Hintergrund dynamisch ändert, ist der Kontrastwert nicht dauerhaft gesichert. Eine einfarbige, ausreichend deckende Textfläche oder ein kontrollierter Bildausschnitt ist dann die verlässlichere Lösung.
Auch Transparenzen verdienen besondere Aufmerksamkeit. Eine weiße Schrift mit 80 Prozent Deckkraft verhält sich je nach Hintergrund anders. Der im Designsystem dokumentierte Hex-Wert reicht für die Bewertung nicht aus, wenn die Darstellung durch Alpha-Kanäle, Verläufe, Schatten oder Hintergrundbilder beeinflusst wird. Gemessen wird die Farbe, die Nutzerinnen und Nutzer tatsächlich sehen.
Textgrößen und Schriftschnitte korrekt bewerten
Die Ausnahme für großen Text wird häufig zu großzügig ausgelegt. Entscheidend ist nicht, ob eine Überschrift optisch groß erscheint, sondern ihre berechnete Schriftgröße und ihr Schriftschnitt im Browser. Responsive Layouts machen die Prüfung anspruchsvoller: Eine Headline kann auf dem Desktop als großer Text gelten und auf dem Smartphone unter den relevanten Schwellenwert fallen.
Hinzu kommt die Schrift selbst. Sehr feine Schnitte, schmale Laufweiten oder stark reduzierte Buchstabenformen können trotz rechnerisch bestandenem Kontrast schwer lesbar sein. WCAG definiert Mindestwerte, nicht automatisch eine gute Typografie. Für längere Texte sind ausreichende Schriftgröße, Zeilenhöhe und ein regulärer oder mittlerer Schriftschnitt meist die belastbarere Entscheidung.
Interaktive Zustände nicht vergessen
Ein Link, der nur durch Farbe erkennbar ist, kann problematisch sein, selbst wenn sein Kontrast zum Hintergrund ausreicht. Innerhalb eines Fließtexts sollte er zusätzlich durch Unterstreichung oder ein anderes nicht farbbasiertes Merkmal deutlich werden. Bei Buttons muss nicht nur die Beschriftung lesbar sein. Auch Umrandung, Icon und sichtbarer Fokuszustand brauchen genügend Kontrast.
Besonders oft übersehen werden Hover-, Fokus-, Aktiv-, Deaktiviert- und Fehlermeldungszustände. Ein dezenter Fokusrahmen kann in einem Entwurf elegant wirken, ist aber nutzlos, wenn er sich kaum von der umgebenden Fläche abhebt. Tastaturnutzende benötigen eine klare visuelle Orientierung. Bei Formularen darf ein Fehler außerdem nicht ausschließlich über Rot kommuniziert werden. Ein verständlicher Text, ein Icon oder eine eindeutige Feldbeschriftung ergänzt die Farbinformation.
Ein praxistauglicher Ablauf für die Kontrastprüfung
Die zuverlässigste Prüfung beginnt nicht kurz vor dem Go-live. Sie gehört in Designsystem, Komponentenbibliothek und Qualitätssicherung. So vermeiden Teams, dass jede neue Landingpage, Kampagne oder Inhaltsseite wieder einzeln diskutiert werden muss.
Zuerst werden die verbindlichen Farbpaare festgelegt: Standardtext auf hellen und dunklen Flächen, Überschriften, Links, Buttons, Formularfelder, Hinweise, Statusmeldungen und Fokuszustände. Für jede Paarung sollten Farbwerte, Einsatzbereich und erzieltes Kontrastverhältnis dokumentiert sein. Das erleichtert Freigaben und schützt vor späteren Abweichungen.
Danach folgt die Prüfung im Design und im Browser. Design-Tools liefern früh Hinweise, doch die Browseransicht bleibt maßgeblich. Hier zeigen sich Schrift-Rendering, Transparenzen, Hintergrundbilder und CSS-Zustände so, wie sie später ausgeliefert werden. Browser-Entwicklerwerkzeuge und spezialisierte Accessibility-Checker helfen, auffällige Elemente schnell zu identifizieren.
Automatisierte Tests sind hilfreich, ersetzen aber keinen fachlichen Blick. Sie erkennen viele unzulässige Farbpaare, bewerten jedoch nicht zuverlässig, ob ein Text über wechselnden Bildern lesbar bleibt oder ob ein Fokuszustand im Gesamtlayout auffällt. Für zentrale Seiten und wiederverwendbare Komponenten empfiehlt sich deshalb eine manuelle Sichtprüfung mit Tastaturbedienung.
Bei umfangreichen Websites lohnt sich ein Komponentenansatz. Wird ein Button einmal sauber entwickelt und getestet, profitiert jede Seite davon, die diese Komponente verwendet. Individuelle Inline-Styles, frei wählbare Textfarben und unkontrollierte Teaser-Varianten erzeugen dagegen Prüfaufwand und langfristige Risiken. Gute Barrierefreiheit ist oft auch ein Argument für ein klar gepflegtes Designsystem.
Typische Grenzfälle und sinnvolle Entscheidungen
Nicht jede Information unterliegt denselben Anforderungen. Dekorative Grafiken, inaktive Bedienelemente oder rein visuelle Gestaltungselemente müssen nicht immer die gleichen Werte erfüllen wie Fließtext. Die Abgrenzung muss jedoch nachvollziehbar sein. Sobald ein Element eine Funktion trägt oder eine Information vermittelt, ist Zurückhaltung bei Ausnahmen angebracht.
Markenfarben sind ein häufiger Konfliktfall. Viele Corporate Colors sind als Hintergrund oder Akzent hervorragend geeignet, als Textfarbe auf Weiß aber zu hell. Die Lösung muss nicht sein, die Marke zu verändern. Häufig genügt eine dunklere digitale Variante für Text und Interaktion, während der originale Ton für größere Flächen oder dekorative Elemente erhalten bleibt. Wichtig ist, diese Rollen verbindlich zu definieren.
Auch der Dark Mode braucht eine eigene Prüfung. Eine Farbkombination, die im hellen Erscheinungsbild besteht, lässt sich nicht einfach invertieren. Gedämpfte Grautöne, farbige Icons und sekundäre Texte verlieren auf dunklen Flächen schnell an Klarheit. Behandeln Sie den Dark Mode deshalb als eigenständiges Farbsystem, nicht als nachträgliche Umschaltung.
Kontrastqualität dauerhaft absichern
Ein bestandener Launch-Test garantiert keine dauerhaft barrierefreie Website. Neue Inhalte, Kampagnenmodule, Plugin-Updates und Anpassungen am Corporate Design können Kontraste verändern. Sinnvoll sind feste Prüfpunkte bei Designfreigaben, vor Releases und bei der Einführung neuer Komponenten.
Redaktionsteams benötigen zudem klare Leitplanken im CMS. Wenn Redakteurinnen und Redakteure Hintergrundfarben oder Textfarben wählen können, sollten nur geprüfte Kombinationen verfügbar sein. Wo freie Auswahl fachlich notwendig ist, helfen Warnhinweise und Vorschauen. Technische Freiheit ohne gestalterische Regeln führt sonst schnell zu uneinheitlichen und schwer lesbaren Seiten.
Kontrastprüfung ist keine Formalität für eine Checkliste. Sie entscheidet darüber, ob Inhalte unter schwierigen Lichtverhältnissen, mit eingeschränktem Sehvermögen oder bei konzentrierter Nutzung verständlich bleiben. Wer sie früh in Design, Entwicklung und redaktionelle Prozesse einbindet, erhält nicht nur eine besser zugängliche Website, sondern auch ein konsistenteres digitales System, das sich langfristig sicher weiterentwickeln lässt.
