WCAG Farbkontrast: AA-, AAA-Regeln & wie du testest (2026)

# WCAG Farbkontrast: Der praktische Leitfaden 2026 (AA, AAA, so testest du)

Ein Farbkontrastverhältnis ist der Luminanzunterschied zwischen zwei Farben, ausgedrückt als Zahl von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß). Bei Text auf einer Webseite entscheidet diese eine Zahl darüber, ob Menschen deinen Inhalt lesen können oder ob sie blinzeln und zoomen müssen. Sie entscheidet auch, ob deine Seite WCAG besteht. Das ist der Standard, der in den USA ADA-Klagen und in der EU die EAA-Durchsetzung stützt.

Die magische Zahl: 4,5:1 für normalen Fließtext. Triff sie und du bestehst WCAG 2.2 Level AA. Dieser Leitfaden behandelt jeden Schwellenwert, die Mathematik, wie du in Sekunden testest, und Lösungen für die häufigsten Fehler.

WCAG-Kontrastverhältnisse Spickzettel

Die Web Content Accessibility Guidelines unterteilen die Kontrastanforderungen nach Textgröße und Elementtyp. Hier sind die Zahlen, die du kennen musst.

Ein paar Hinweise, über die viele stolpern:

• Großer Text bedeutet 18 pt (~24 px) regulär oder 14 pt (~18,66 px) fett. Überschriften qualifizieren sich meistens; Fließtext nicht.
• UI-Komponenten umfassen Formularränder, Fokusringe, bedeutungstragende Icons und Diagrammelemente.
• Deaktivierte Steuerelemente sind ausgenommen, aber nur, wenn sie wirklich nicht interaktiv sind.
• Logos sind ausgenommen. Dekorative Wasserzeichen ebenso.

Die meisten Teams streben AA an. AAA wird für Inhalte mit hohem Stellenwert empfohlen (Behörden, Gesundheitswesen), ist aber nicht gesetzlich vorgeschrieben.

Wie du ein Kontrastverhältnis berechnest

Die Formel aus der W3C-Spezifikation lautet:

(L1 + 0.05) / (L2 + 0.05)

Wobei L1 die relative Luminanz der helleren Farbe und L2 die der dunkleren ist. Die relative Luminanz ist eine gammakorrigierte gewichtete Summe der sRGB-Kanäle (Rot 21,26 %, Grün 71,52 %, Blau 7,22 %: Grün dominiert, weil das menschliche Auge dort am empfindlichsten ist).

Du wirst das fast nie von Hand berechnen. Für die vollständigen Gleichungen siehe die W3C-Kontrastminimum-Spezifikation. Für alles andere nimm einen Checker.

So prüfst du den Farbkontrast (5 Wege)

Du hast viele Optionen zum Testen des Kontrasts, die meisten kostenlos. Wähl die, die zu deinem Workflow passt.

1. Unser kostenloser Farbkontrast-Checker (am schnellsten)

Der schnellste Weg, ein Farbenpaar zu testen, ist unser Color Contrast Checker. Füge einen Hex- oder RGB-Wert ein und du erhältst das Verhältnis plus AA/AAA Pass/Fail-Badges für normalen Text, großen Text und UI-Komponenten. Keine Anmeldung. Tausche Vorder- und Hintergrund mit einem Klick, um invertierte Schemata zu testen.

Lass ihn über jede Text-/Hintergrundkombination in deinem Designsystem laufen, bevor du ausspielst.

2. Browser-DevTools

Chrome, Edge und Firefox zeigen Kontrastverhältnisse in ihren Farbwählern an. Inspiziere ein Textelement, klicke auf das Farbfeld im Styles-Bereich, und der Picker zeigt das Verhältnis mit AA/AAA-Häkchen. Er zeichnet auch eine Linie auf dem Spektrum bei der nächstgelegenen bestehenden Farbe.

3. Browser-Erweiterungen

Für ganzseitige Audits nimm axe DevTools oder WAVE. Beide scannen eine Seite und markieren jeden Kontrastfehler mit Selektoren und Werten. axe ist die Engine hinter den meisten automatisierten Barrierefreiheitstests.

4. Figma-Plugins

Erkenne Probleme schon im Design mit Stark oder Able. Beide laufen live und bewerten jede Textebene gegen AA und AAA, während du arbeitest.

5. WebAIM Contrast Checker

Der WebAIM Contrast Checker ist das langjährige Standardtool von einem Team, das die meistzitierte Forschung zur Barrierefreiheit im Web veröffentlicht. Speichere ihn als Sicherheitscheck.

Häufige Kontrastfehler (und wie du sie behebst)

Das sind die fünf Kontrast-Bugs, die wir auf fast jeder Seite finden, die wir auditieren.

Hellgrauer Text auf Weiß

#999999 auf Weiß ergibt 2,85:1 und fällt damit durch. #767676 ist das hellste Grau, das 4,5:1 auf Weiß besteht. Lösung: dunkle den Text auf mindestens #767676 ab oder erhöhe die Schriftstärke.

Sample body text2.85:1fails AA

Sample body text4.54:1AA pass

Markenfarbe auf dunklem Hintergrund

Lebendige Markenfarben fallen auf dunkler UI auseinander. Ein mittleres Blau wie #3B82F6 auf #1F2937 ergibt nur 3,4:1. Das besteht für großen Text und UI, fällt aber für Fließtext durch. Lösung: Verwende einen helleren Ton der Markenfarbe für Fließtext oder reserviere die Markenfarbe für Überschriften über 18 pt.

Sample body text3.4:1AA large only

Text über Bildern oder Verläufen

Text auf einem Hero-Bild fällt fast immer irgendwo durch. Lösung: Lege ein halbtransparentes dunkles Overlay (40 bis 60 % Schwarz) unter den Text oder platziere den Text in einem soliden Panel über dem Bild.

Formular-Platzhalter zu hell

Die Standard-Browser-Platzhalterfarbe liegt um #A9A9A9, weit unter 4,5:1. Lösung: Style Platzhalter auf mindestens #595959 und nutze Platzhalter nie als Ersatz für sichtbare Labels.

Sample body text2.5:1fails AA

Sample body text7.0:1AAA pass

Verblasste deaktivierte Links und Buttons

Deaktivierte Steuerelemente sind ausgenommen, aber nur, wenn sie eindeutig nicht interaktiv sind. Ein „deaktivierter" Link, auf den Nutzer trotzdem klicken wollen, ist ein Usability-Fehler. Lösung: Blende nicht zutreffende Steuerelemente aus oder kombiniere den deaktivierten Zustand mit einer kurzen Begründung.

Was ist mit Dark Mode?

Dark Mode hat seine eigene Falle: reines Weiß auf reinem Schwarz erreicht 21:1, fühlt sich aber hart an und verursacht „Halation" (vibrierender oder verschwimmender Text) bei vielen Lesern, besonders bei Astigmatismus. Mildere beide Enden ab: gebrochenes Weiß (#E5E7EB) auf einer fast schwarzen Oberfläche (#111827 oder #1F2937) landet bei 14:1+ und bleibt dabei angenehm.

Dieselben WCAG-Verhältnisse gelten im Dark Mode, nur gemessen zwischen der dunklen Oberfläche und dem hellen Text.

Gesponsert von den Machern

Genug von langweiligen Screenshots? Probier ScreenSnap Pro.

Wunderschöne Hintergründe, professionelle Annotationen, GIF-Aufnahme und sofortiges Cloud-Sharing — alles in einer App. Einmalig 39 $, für immer deins.

Sieh, was es kann

WCAG 3 und APCA: das neue Kontrastmodell

Die Formel von WCAG 2.x wurde in den 1990ern entworfen und behandelt jede Farbe gleich. Forscher haben seitdem gezeigt, dass sie dunkel-auf-hell-Paare überbewertet und einige hell-auf-dunkel-Paare unterbewertet. Der Nachfolger, APCA (Advanced Perceptual Contrast Algorithm), ist Teil von WCAG 3 und liefert eine genauere Bewertung, die Schriftstärke, Größe und Kontrastrichtung berücksichtigt. Der Output, Lc, verwendet Schwellenwerte wie Lc 75 statt 4,5:1. WCAG 3 ist noch ein Entwurf und wird 2.2 für die Compliance noch jahrelang nicht ablösen. Bleib für Compliance bei WCAG 2.2 und behandle APCA als Qualitätsbonus.

WCAG-Grundlagen in 60 Sekunden

WCAG (Web Content Accessibility Guidelines) ist der internationale Standard für Web-Barrierefreiheit. Er gruppiert Anforderungen in drei Konformitätsstufen (A, AA und AAA) über vier Prinzipien hinweg: wahrnehmbar, bedienbar, verständlich, robust. AA ist die Stufe, die in den meisten Gesetzen zitiert wird, einschließlich ADA in den USA und dem European Accessibility Act. Farbkontrast fällt unter das Prinzip „wahrnehmbar".

Für die vollständige Aufschlüsselung der WCAG-Stufen, was jedes Prinzip bedeutet, und wie du ein vollständiges Audit planst, lies unseren Was-ist-WCAG-Leitfaden. Er passt zu diesem Artikel: der eine erklärt das Rahmenwerk, dieser geht in eine Regel in die Tiefe.

Wo Kontrast in deinen Workflow passt

Kontrast ist eine der am leichtesten zu testenden WCAG-Regeln und eine der häufigsten, an der Seiten scheitern. Zehn-Minuten-Lösung: Zieh jede Text-/Hintergrundkombination aus deinem Designsystem in den Color Contrast Checker, notiere die Verhältnisse in deinem Style Guide und repariere alles unter 4,5:1. Kombiniere das mit Alt-Text auf Bildern, einer sinnvollen Website-Farbpalette und einer Grundlage aus Farbtheorie. So deckst du die visuelle Hälfte von WCAG ab.

Häufig gestellte Fragen

Was ist das WCAG-Farbkontrastverhältnis?

Der Luminanzunterschied zwischen einer Vordergrundfarbe (meist Text) und ihrem Hintergrund, auf einer Skala von 1:1 bis 21:1. WCAG 2.2 Level AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text oder UI-Komponenten.

Was ist der Unterschied zwischen WCAG AA- und AAA-Kontrast?

AA ist das Minimum, das von den meisten Barrierefreiheitsgesetzen gefordert wird (4,5:1 normal, 3:1 groß). AAA ist die erweiterte Stufe für Inhalte mit hohem Stellenwert (7:1 normal, 4,5:1 groß). Die meisten Teams zielen auf AA.

Wie prüfe ich den Farbkontrast kostenlos?

Verwende einen kostenlosen Online-Checker. Unser Color Contrast Checker liefert dir das Verhältnis plus AA/AAA Pass/Fail in einer Sekunde. WebAIMs Checker ist eine weitere vertrauenswürdige Option, und die Chrome DevTools zeigen den Kontrast direkt im Farbwähler an.

Gilt der WCAG-Farbkontrast für meine Website?

Wenn deine Seite Nutzer in den USA, der EU, Großbritannien, Kanada oder Australien bedient, mit ziemlicher Sicherheit ja. ADA, der European Accessibility Act und AODA zitieren alle WCAG AA. E-Commerce und jedes Unternehmen mit physischer Präsenz haben das höchste Klagerisiko.

Welches Kontrastverhältnis braucht der Dark Mode?

Dieselben Verhältnisse wie der Light Mode (4,5:1 normal, 3:1 groß), gemessen zwischen dem hellen Text und dem dunklen Hintergrund. Vermeide reines Weiß auf reinem Schwarz; mildere zu gebrochenem Weiß auf Fast-Schwarz für Komfort.

Müssen Logos den WCAG-Kontrast erfüllen?

Nein. Logos, Markenzeichen und rein dekorative Elemente sind ausgenommen. Text in einem Logo, der echte Informationen vermittelt (etwa ein Slogan), muss den Schwellenwert weiterhin erfüllen.

Als Nächstes: der Rest von WCAG

Kontrast ist die häufigste Verletzung in Sachen Volumen, aber nur eine Regel von Dutzenden. Wenn deine Farbpaare sauber sind, ist die nächste Schicht Tastaturnavigation, Alt-Text, Fokussichtbarkeit und semantisches Markup. Unser Was-ist-WCAG-Leitfaden führt durch das Rahmenwerk, die vier POUR-Prinzipien und einen 4-Schritte-Nachmittagsplan, der über Kontrast hinausgeht.

Musst du jetzt sofort ein bestimmtes Farbenpaar testen? Wirf es in unseren Color Contrast Checker: kostenlos, keine Anmeldung, sofortiges AA/AAA-Urteil.