Farbkontrast im UI prüfen: WCAG AA und AAA
Kurzueberblick
Prüfe Farbkontraste für dein UI nach WCAG AA und AAA. So erfüllst du die Werte für Text, Links, Buttons und Fokus sicher.
Warum Farbkontrast ein Grundpfeiler guten Designs ist
Farbkontrast beschreibt den Helligkeitsunterschied, also die Luminanz, zwischen zwei Farben. Im UI-Design geht es meist um den Kontrast zwischen Text und Hintergrund.
Auch wenn es wie eine Kleinigkeit wirkt, ist ausreichender Kontrast einer der wichtigsten Faktoren für Usability und Barrierefreiheit. Guter Kontrast sorgt dafür, dass deine Inhalte für wirklich jeden lesbar sind, auch für:
- Menschen mit Sehbehinderung und geringem Sehvermögen.
- Farbenfehlsichtige Nutzer, die Rot und Grün oder Blau und Gelb schwer unterscheiden.
- Nutzer bei hellem Sonnenlicht oder in dunklen Räumen.
- Personen mit älteren oder minderwertigen Displays.
Kurz gesagt: Wer für guten Kontrast entwirft, entwirft für alle. Er ist ein Grundbaustein von inklusivem Design und wirkt sofort professioneller.
WCAG-Kontraststufen verstehen
Die Web Content Accessibility Guidelines, kurz WCAG, definieren eine exakte mathematische Methode zur Messung des Kontrasts. Das Verhältnis reicht von 1 zu 1 bei Weiß auf Weiß bis 21 zu 1 bei Schwarz auf Weiß.
Die zwei wichtigsten Konformitätsstufen:
| Stufe | Normaler Text | Großer Text | Typischer Einsatz |
|---|---|---|---|
| AA Standard | mindestens 4,5 zu 1 | mindestens 3 zu 1 | Die meisten Websites und Apps |
| AAA Erweitert | mindestens 7 zu 1 | mindestens 4,5 zu 1 | Textlastige und behördliche Angebote |
AA (Standard)
Der am häufigsten angestrebte und in vielen Ländern gesetzlich vorgeschriebene Mindeststandard.
- Normaler Text: mindestens 4,5 zu 1
- Großer Text: mindestens 3 zu 1 WCAG definiert groß als ab 18 pt, also etwa 24 px, oder ab 14 pt, also etwa 18,66 px, in Fettschrift.
AAA (Erweitert)
Strengere Anforderung, empfohlen für textlastige oder behördliche Websites.
- Normaler Text: mindestens 7 zu 1
- Großer Text: mindestens 4,5 zu 1
Teste deine Farbkombinationen sofort mit unserem kostenlosen Kontrast-Checker. Gib Vordergrund und Hintergrund ein und du siehst direkt, ob AA und AAA für normalen und großen Text erfüllt sind.
Schnell-Checks vor dem Messen
Bevor du zum Tool greifst, helfen diese einfachen Tests, Probleme früh zu erkennen:
- Zukneifen-Test: Gehe auf Distanz und kneife die Augen zusammen, bis alles verschwimmt. Verschmelzen Text oder UI-Elemente mit dem Hintergrund, ist der Kontrast wahrscheinlich zu niedrig.
- Graustufen-Test: Schalte dein Design auf Graustufen um. Kannst du Elemente und Texte immer noch klar unterscheiden. Wenn nicht, verlässt du dich zu sehr auf Farbe allein. Wichtige Infos müssen auch in Schwarz-Weiß klar bleiben.
Diese Tests sind nützlich, aber subjektiv. Bestätige das Ergebnis immer mit einem validen Tool, denn dein Auge gewöhnt sich schnell an schwache Kontraste.
Ergänze die Checks durch einen Sonnenlicht-Test auf dem Handy und einen Zoom-Test mit 200 Prozent Textgröße. Was dort noch gut lesbar ist, funktioniert auch für Nutzer mit schwierigen Bedingungen.
So behebst du zu geringen Kontrast
Ein zu niedriger Kontrast bedeutet nicht, dass du deine Markenfarben aufgeben musst. Meist reichen kleine gezielte Anpassungen.
Beispiel: Hellgrauer Text mit dem Wert 888888 auf weißem Hintergrund mit dem Wert FFFFFF erreicht nur 2,9 zu 1 und liegt damit unter AA für normalen Text.
Mögliche Lösungen:
1. Text dunkler machen oder Hintergrund heller
Einfachste und effektivste Methode. Der Wert 767676 statt 888888 hebt den Kontrast auf 4,54 zu 1, also AA erfüllt. Der Unterschied ist optisch kaum wahrnehmbar, die Lesbarkeit aber deutlich besser.
Dunkle auch Rahmen, Platzhalter und Sekundärtexte in denselben Schritten ab, denn sie fallen in Audits zuerst durch. Lege dir für jede Marke drei Textstufen an: Standard, Sekundär und Dezent, alle mit geprüften Werten.
2. Schrift größer oder fetter machen
Wenn du die Farbe unbedingt behalten willst, helfen Größe und Strichstärke. Größere oder fette Schrift unterliegt der milderen 3-zu-1-Regel. Der Farbwert 888888 in 18 pt normal oder 14 pt fett liegt schon sehr nah am 3-zu-1-Grenzwert, ideal für Überschriften.
Nutze diesen Weg gezielt für Headlines, Kennzahlen und Buttons, nicht für lange Fließtexte. Dort bleibt die dunklere Farbe die bessere Lösung, weil langes Lesen bei schwachem Kontrast schnell ermüdet.
3. Nie ausschließlich auf Farbe setzen
Bei Links, Fehlermeldungen und Statusanzeigen nutze niemals Farbe als einzigen Hinweis.
- Links: Auch ein kontrastschwacher Blauton braucht eine Unterstreichung, besonders im Fließtext. So erkennen ihn alle, unabhängig vom Farbsehen.
- Fehlermeldungen: Färbe sie nicht nur rot, sondern nutze zusätzlich ein Icon wie ein Warndreieck plus Fettschrift und klare Worte.
Gleiches gilt für Pflichtfelder, Erfolgsmeldungen und Diagramme. Ergänze Farben dort durch Symbole, Muster oder Beschriftung direkt an der Grafik.
Die goldene Regel
Im Zweifel strebe für alle wichtigen Texte mindestens 4,5 zu 1 an.
Diese einfache Regel macht dein Design barrierefrei, professionell und für wirklich jeden nutzbar. Mache den Kontrast-Check zu einem festen Bestandteil deines Design-Workflows, nicht zu einem nachträglichen Gedanken.
Teste die Oberfläche jenseits des Farbmusters
Ein bestandenes Farbmuster garantiert keine bestandene Komponente. Prüfe Text über Verläufen und Bildern, deaktivierte Zustände, Hover, Fokusringe per Tastatur, Formularfehler, aktive Tabs und Links im Fließtext. Miss die echten Farben erst nach Deckkraft, Overlays, Schatten und Mischung, denn halbtransparente Ebenen verändern den wirksamen Kontrast stark.
Nutze Kontrast als Teil eines barrierefreien Designsystems. Kombiniere Farbe mit Text, Icons, Unterstreichungen, Rahmen oder Positionswechseln, damit niemand allein auf Farbton angewiesen ist. Prüfe deine Palette erneut nach Dark-Mode-Anpassungen und nach Übersetzungen, denn längere Labels umbrechen anders und verschieben Hierarchien.
Baue dir dafür eine kleine Routine: Mache nach jedem größeren Design-Sprint einen Durchlauf mit dem Kontrast-Checker, teste eine Seite nur per Tastatur und eine Seite mit 200 Prozent Zoom. Ergänze fehlende Fokusrahmen sofort, denn sie sind für viele Nutzer die einzige Orientierung. So wächst Barrierefreiheit mit deinem Produkt, statt am Ende als teures Extra dazuzukommen.