WCAG 2.2 auf Stufe AA verlangt 4,5:1 zwischen Text und Hintergrund, 3:1 für große Schrift ab 18,66 Pixel fett beziehungsweise 24 Pixel normal, und 3:1 für Bedienelemente und aussagekräftige Grafiken. Prüfen Sie nicht nur den Ruhezustand, sondern auch Hover, Fokus und Fehlermeldungen — und verankern Sie geprüfte Werte als Farb-Tokens im Design-System.
Welche Kontrastwerte gelten nach WCAG 2.2 auf Stufe AA?
Die Werte sind vom W3C dokumentiert und lassen keinen Auslegungsspielraum. Für normalen Text gilt ein Verhältnis von mindestens 4,5:1 zur Hintergrundfarbe. Große Schrift darf auf 3:1 zurückgehen, wobei groß definiert ist als mindestens 24 Pixel bei normaler Stärke oder mindestens 18,66 Pixel bei fetter Stärke.
Seit WCAG 2.1 kommt ein dritter Wert hinzu, der oft übersehen wird: 3:1 für Nicht-Text-Inhalte. Darunter fallen die Umrandung eines Eingabefelds, der Rand eines Schalters, das Symbol in einer Schaltfläche ohne Beschriftung und die Linien eines Diagramms, sofern sie Information tragen. Rein dekorative Elemente sind ausgenommen.
Das Kontrastverhältnis wird aus den relativen Leuchtdichten beider Farben berechnet, nicht aus dem gefühlten Farbunterschied. Deshalb kann ein kräftiges Orange auf Weiß durchfallen, obwohl es knallig wirkt, während ein stumpfes Dunkelblau mühelos besteht. Verlassen Sie sich beim Prüfen nie auf den Augenschein.
Ein häufiges Missverständnis betrifft die Größenangabe. Die Schwelle von 18,66 Pixeln entspricht 14 Punkt in fetter Auszeichnung, 24 Pixel entsprechen 18 Punkt in normaler — die Norm stammt aus der Druckwelt und wurde umgerechnet. Wer eine Zwischenüberschrift auf 22 Pixel setzt und sie nicht fett auszeichnet, fällt unter die strengere Regel, obwohl die Zeile groß wirkt.
Warum reicht es nicht, nur den Fließtext zu prüfen?
Fließtext auf weißem Grund ist der Fall, der in fast jedem Projekt bereits stimmt. Durch fallen die Randbereiche: hellgraue Hilfstexte unter Formularfeldern, Platzhaltertexte, Beschriftungen in Fußzeilen, Datumsangaben in Beitragslisten, Zahlen in Diagrammlegenden.
Ein weiterer Klassiker ist das eigene Grau-Repertoire. Viele Gestaltungen arbeiten mit einer Grauskala, in der ein mittleres Grau für Sekundärtext vorgesehen ist. Genau dieses Grau liegt oft bei etwa 3,5:1 auf Weiß — sichtbar genug für den Entwurf auf einem hochwertigen Monitor, zu schwach für die Norm und für Nutzer mit reduzierter Kontrastempfindlichkeit.
- Sekundär- und Hilfstexte in Grau sind der häufigste Fehler in ansonsten sauberen Gestaltungen.
- Platzhaltertexte in Formularen liegen oft weit unter dem Grenzwert.
- Helle Symbole ohne Beschriftung müssen 3:1 erreichen, sobald sie Information tragen.
- Rahmen von Eingabefeldern und Schaltern fallen häufig durch, weil sie als Dekoration behandelt werden.
- Text in Fußzeilen mit farbigem Hintergrund wird selten separat geprüft.
Nehmen Sie sich für die Prüfung die Komponentenbibliothek vor, nicht die Seitenliste. Eine Website hat vielleicht sechzig Seiten, aber nur fünfundzwanzig Bausteine. Wer die Bausteine absichert, sichert alle Seiten mit — auch die, die es noch gar nicht gibt.
Wie prüft man Zustände wie Hover, Fokus und Disabled?
Jeder Zustand ist eine eigene Farbkombination und braucht eine eigene Prüfung. Ein Schalter, der im Ruhezustand besteht, kann beim Überfahren durchfallen, wenn der Hintergrund aufhellt und die Schriftfarbe bleibt. Legen Sie deshalb für jede Komponente eine kleine Matrix an: Zustand mal Farbpaar mal gemessener Wert.
Der Fokusindikator verdient besondere Aufmerksamkeit, weil er für Tastaturnutzer die einzige Orientierung ist. Er braucht 3:1 gegen den umgebenden Hintergrund — und wenn er direkt am Element anliegt, zusätzlich gegen die Elementfarbe. Ein hilfreicher Kniff ist ein zweifarbiger Ring aus hellem und dunklem Anteil, der auf beiden Untergründen funktioniert. Den Fokusindikator komplett zu entfernen, ist der schwerwiegendste und zugleich häufigste Verstoß.
Deaktivierte Elemente sind von den Kontrastanforderungen formal ausgenommen. Das ist allerdings ein schwaches Argument in der Praxis: Wenn niemand lesen kann, was der ausgegraute Schalter anbietet, versteht auch niemand, warum er gesperrt ist. Halten Sie deaktivierte Zustände lesbar und signalisieren Sie die Sperre zusätzlich über Form oder einen Hinweistext.
Denken Sie auch an Zustände, die selten auftreten: die Fehlermeldung in Rot auf hellem Grund, den Erfolgshinweis in Grün, die Warnung in Gelb. Gelb auf Weiß ist der zuverlässigste Durchfaller der gesamten Statuspalette und braucht praktisch immer eine deutlich dunklere Textvariante oder einen getönten Hintergrund.
Was tun, wenn die Markenfarbe durchfällt?
Der Fall tritt oft ein. Ein Personaldienstleister mit einem frischen Hellgrün als Hauptfarbe erreicht darauf mit weißer Schrift vielleicht 1,9:1 — deutlich zu wenig für jeden Text. Die Farbe aufzugeben ist selten nötig, denn es gibt drei praktikable Auswege.
- Eine abgedunkelte Variante derselben Farbe für Text und Schaltflächen definieren, während der helle Originalton für Flächen, Diagramme und Akzente bleibt.
- Dunkle statt weißer Schrift auf der hellen Markenfarbe verwenden — häufig die einfachste Lösung mit dem geringsten Eingriff.
- Eine zweite, kontraststarke Aktionsfarbe einführen, die ausschließlich für Handlungsaufforderungen gilt und sich bewusst vom Flächenton unterscheidet.
Wichtig ist, das Ergebnis im Markenhandbuch festzuhalten, statt es im Projekt zu improvisieren. Ein Abschnitt zur digitalen Anwendung mit klaren Aussagen — welcher Ton für Text, welcher für Flächen, welche Paarungen verboten sind — verhindert, dass die Frage bei jedem neuen Modul neu verhandelt wird.
Achten Sie beim Abdunkeln darauf, den Farbton zu erhalten. Ein schlichtes Absenken der Helligkeit im HSL-Modell führt bei Gelb- und Grüntönen häufig zu einem schlammigen Ergebnis, das mit der Marke nichts mehr zu tun hat. Wahrnehmungsbasierte Farbräume wie OKLCH halten den empfundenen Farbcharakter deutlich stabiler, während Sie an der Helligkeit drehen.
Wie bekommt man Text auf Bildern zuverlässig lesbar?
Text über einem Foto ist der unsicherste Fall überhaupt, weil sich der Hintergrund pro Bild und pro Bildausschnitt ändert. Was auf dem Beispielbild aus dem Entwurf funktioniert, kann auf dem nächsten Bild aus der Redaktion unlesbar sein. Verlassen Sie sich deshalb nie auf das konkrete Bild, sondern auf eine Konstruktion, die mit jedem Bild funktioniert.
Die belastbarste Variante ist eine durchgehende Abdunklungsschicht mit fester Deckkraft zwischen Bild und Text, deren Kontrast gegen die Textfarbe einmal geprüft und dann als Regel festgeschrieben wird. Ein weicher Verlauf von unten nach oben wirkt eleganter, ist aber nur dann sicher, wenn der Text vollständig im dunklen Bereich des Verlaufs liegt.
Textschatten und Umrisse sind Notlösungen. Sie verbessern die gefühlte Lesbarkeit, gehen aber in keine Kontrastberechnung ein und versagen bei unruhigen Bildern. Die ruhigste Lösung bleibt ohnehin, den Text neben das Bild zu setzen statt darauf — was auf schmalen Bildschirmen ohnehin meist passiert.
Prüfen Sie nicht das Bild, das im Entwurf liegt, sondern das Bild, das die Redaktion in zwei Jahren hochlädt.
Welche Werkzeuge und welche Verankerung braucht der Alltag?
Für die Einzelprüfung genügen die Entwicklerwerkzeuge des Browsers: Die Farbauswahl zeigt das Kontrastverhältnis direkt an und markiert, ob AA erreicht ist. Ergänzend liefern automatisierte Prüfwerkzeuge eine Liste aller Verstöße auf einer Seite in einem Durchlauf.
Automatische Tests decken allerdings nur einen Teil ab. Text auf Bildern, Zustände hinter einer Interaktion, Inhalte in geschlossenen Aufklappbereichen und Zeichnungselemente in Diagrammen werden regelmäßig nicht erfasst. Eine manuelle Durchsicht der Komponentenbibliothek bleibt notwendig — dafür genügt sie einmal pro Komponente statt einmal pro Seite.
Der wirksamste Hebel liegt in den Farb-Tokens. Wenn im Design-System nicht Farbwerte, sondern benannte Paare hinterlegt sind — Textfarbe auf Flächenfarbe, Rahmenfarbe auf Flächenfarbe — und jedes Paar einmal geprüft und dokumentiert wurde, entsteht ein Verstoß nur noch dann, wenn jemand die Paarung verlässt. Ein SaaS-Anbieter mit dreißig Oberflächenkomponenten spart damit die Einzelprüfung jeder neuen Ansicht.
Nehmen Sie die Prüfung außerdem in die Abnahmekriterien auf. Ein automatischer Durchlauf im Auslieferungsprozess, der bei einem neu eingeführten Verstoß Alarm schlägt, kostet einmalig eine Stunde Einrichtung und verhindert dauerhaft das langsame Abrutschen, das sonst über Jahre unbemerkt passiert.
Was ändert sich im Dark Mode?
Eine dunkle Variante ist keine Umkehrung der hellen. Reines Weiß auf reinem Schwarz erreicht zwar den höchsten Messwert, erzeugt aber Nachzieheffekte und ermüdet die Augen. Bewährt haben sich ein sehr dunkles Grau als Grund und ein leicht gedämpftes Weiß als Text — die Norm ist damit weiterhin klar erfüllt, das Leseerlebnis aber ruhiger.
Farbige Elemente müssen für den dunklen Modus meist neu justiert werden. Ein Ton, der auf Weiß bei 4,8:1 liegt, kann auf Dunkelgrau bei 2,4:1 landen, weil sich die Leuchtdichteverhältnisse umkehren. Sättigung wirkt auf dunklem Grund zudem intensiver, weshalb kräftige Farben meist entsättigt und aufgehellt werden müssen.
Vergessen Sie dabei die Umschaltung selbst nicht. Wenn Sie zwischen hell, dunkel und Systemeinstellung wählen lassen, muss der Schalter in allen drei Zuständen erkennbar bleiben, und die aktive Auswahl darf nicht allein über einen Farbwechsel markiert sein.
Praktisch heißt das: Jedes Token existiert in beiden Modi und wird in beiden geprüft. Wer den dunklen Modus als nachträglichen Filter über bestehende Farben legt, produziert genau die Stellen, die niemand mehr kontrolliert. Diese Kontrastanforderungen sind im Übrigen nur ein Ausschnitt der Barrierefreiheit — den rechtlichen Rahmen dazu behandeln wir in eigenen Beiträgen.