WCAG-Kontrastverhältnisse erklärt: Ein Praxisleitfaden für Designer

Hier ist eine Zahl, zu der ich immer wieder zurückkomme: Im WebAIM-Million-Report 2025 war Text mit niedrigem Kontrast der mit Abstand häufigste Barrierefreiheitsfehler im Web, vorhanden auf 79,1 % der eine Million am häufigsten besuchten Startseiten. Nicht fehlender Alt-Text. Nicht unbeschriftete Buttons. Kontrast. Das am häufigsten erkannte Barrierefreiheitsproblem der Welt sind zwei Farben, die einander zu ähnlich sind, und fast jedes Team, das es ausliefert, ahnt nichts davon.

Ich habe diesen Bug selbst ausgeliefert. Vor Jahren baute ich ein "Premium"-Dashboard mit elegantem Text in Grau #9CA3AF auf Weiß, abgesegnet von allen im Raum, weil es auf einem nagelneuen Retina-Display in einem abgedunkelten Konferenzraum edel aussah. Eine Woche später kam ein Support-Ticket von einem Nutzer in einem sonnendurchfluteten Zug, der die Beschriftungen schlicht nicht lesen konnte. Der Text lag bei ungefähr 2.6:1. WCAG verlangt 4.5:1. Diese Lücke ist das ganze Thema dieses Artikels.

Was ein WCAG-Kontrastverhältnis eigentlich ist

Ein WCAG-Kontrastverhältnis ist eine einzelne Zahl, die beschreibt, wie unterschiedlich zwei Farben in ihrer Helligkeit sind, ausgedrückt als Verhältnis von 1:1 bis 21:1. Weiß auf Weiß ist 1:1 (unsichtbar). Reines Schwarz auf reinem Weiß ist 21:1 (das Maximum). Alles, was du gestaltest, liegt irgendwo dazwischen, und WCAG legt den Boden fest, unter den du nicht fallen darfst.

Das Entscheidende, das man früh verinnerlichen sollte: Beim Kontrast geht es um Leuchtdichte, nicht darum, ob Farben "unterschiedlich aussehen". Rot und Grün sehen für die meisten Menschen wild verschieden aus, aber ein gesättigtes Rot (#FF0000) auf einem gesättigten Grün (#008000) liegt bei nur etwa 1.3:1, weil sie nahezu dieselbe Helligkeit tragen. Für eine Person mit Rot-Grün-Sehschwäche – oder für jeden, der auf einen minderwertigen Bildschirm schaut – ist diese Kombination Brei. Dein Auge lässt sich vom Farbton täuschen; die Kontrastformel nicht.

Die Formel, in einfachen Worten

Das Verhältnis wird berechnet als (L1 + 0.05) / (L2 + 0.05), wobei L1 die relative Leuchtdichte der helleren Farbe und L2 die Leuchtdichte der dunkleren ist. Du wirst das fast nie von Hand berechnen, aber die beiden Stufen zu verstehen verrät dir, warum dein Instinkt dich in die Irre führt.

Zuerst wird die relative Leuchtdichte jeder Farbe ermittelt, indem man ihre Rot-, Grün- und Blaukanäle nimmt, sie "linearisiert" (die Gamma-Kurve rückgängig macht, die Bildschirme anwenden, nach der Regel, dass Kanäle mit Wert kleiner oder gleich 0.03928 durch 12.92 geteilt werden und höhere durch ((c + 0.055) / 1.055) ^ 2.4 laufen) und sie dann gewichtet: 0,2126 für Rot, 0,7152 für Grün und 0,0722 für Blau. Diese Gewichte sind nicht willkürlich. Das menschliche Auge ist außerordentlich empfindlich für Grün und im Vergleich dazu für Blau nahezu blind.

Das ist die mit Abstand nützlichste Erkenntnis aus der Mathematik: Grün trägt rund das Zehnfache der wahrgenommenen Helligkeit von Blau. Deshalb ist reiner blauer Text auf Schwarz schmerzhaft und besteht gerade so, während dieselbe "Dunkelheit" in Grün gut lesbar ist. Deshalb wirken deine blauen Links auf dunklem Hintergrund schwach, egal wie gesättigt du sie machst. Wenn du dir nur eine Sache über die Formel merkst, merke dir die Gewichte.

Die + 0.05 im Verhältnis ist eine Konstante, die das Umgebungslicht modelliert, das vom Bildschirm reflektiert wird, sodass selbst theoretisch perfektes Schwarz nie ein unendliches Verhältnis ergibt. Sie ist der Grund, warum Kontrastverhältnisse bei 21:1 enden.

Die drei Schwellenwerte, die du kennen musst

WCAG (die Web Content Accessibility Guidelines, gepflegt vom W3C) definiert eine kleine Menge von Zahlen. Lerne diese auswendig, und du hast den allergrößten Teil der realen Arbeit abgedeckt.

• 4.5:1 – das Minimum für normalen Fließtext bei Level AA. Das ist die Arbeitspferd-Zahl. Wenn du einen einzigen Wert anpeilst, peile diesen an.
• 3:1 – das Minimum für großen Text bei AA und außerdem das Minimum für Nicht-Text-UI-Elemente und Grafiken (mehr dazu weiter unten).
• 7:1 – normaler Text bei Level AAA, der erweiterten Stufe für Nutzer mit eingeschränktem Sehvermögen. Großer Text bei AAA braucht 4.5:1.

Beachte das Muster: Jede Stufe entspricht grob der nächsthöheren. Groß-AA und Nicht-Text teilen sich 3:1; Normal-AA und Groß-AAA teilen sich 4.5:1. Das ist weniger zu merken, als es aussieht.

AA vs. AAA: Welches schuldest du eigentlich?

AA ist der reale Standard. Es ist das, worauf sich der European Accessibility Act, die ADA-getriebenen Vergleiche in den USA, Section 508 und im Grunde jeder Beschaffungsvertrag beziehen. Wenn ein Jurist oder Auditor "WCAG-konform" sagt, meint er AA. AAA ist die Goldstufe, und die Richtlinien selbst sagen ausdrücklich, dass AAA-Konformität nicht als allgemeine Richtlinie für ganze Websites verlangt wird – teils, weil manche Inhalte 7:1 schlicht nicht erreichen können, ohne kaputt auszusehen.

Meine ehrliche Einschätzung nach Jahren damit: Gestalte Fließtext so, dass er AA bequem überschreitet, und behandle dann AAA als Ziel, das du für die wichtigsten Inhalte erreichst – die Hauptlesespalte eines Artikels, Fehlermeldungen, alles, was ein gestresster oder sehbeeinträchtigter Nutzer unter Druck erfassen muss. 7:1 auf jeder Bildunterschrift und jedem deaktivierten Label zu jagen, ist ein aussichtsloser Kampf, der deine ganze Palette zu Schwarz-auf-Weiß plattdrückt.

Normaler Text vs. großer Text – und die Falle darin

WCAG lässt großen Text einfacher davonkommen (3:1 statt 4.5:1), weil größere, kräftigere Buchstabenformen bei niedrigerem Kontrast lesbar sind. Aber die Definition von "groß" ist spezifisch, und die Leute verstehen sie ständig falsch.

• Groß = 18pt und mehr, also 24px bei normaler Schriftstärke.
• Oder 14pt und mehr, also etwa 18.5px, wenn der Text fett ist.

Die Umrechnung, über die alle stolpern, ist 1pt = 1,333px, weshalb aus 18pt 24px werden und aus 14pt ~18.5px. Eine 19px reguläre Überschrift ist also kein großer Text nach WCAG-Definition – sie schuldet immer noch die vollen 4.5:1. Ein 16px fettes Label ist ebenfalls nicht groß. Ich habe Designs in jemandes Kopf "bestehen" sehen, weil die Überschrift "groß aussah", während sie in Pixeln knapp unter der Schwelle lag und das strengere Verhältnis brauchte. Im Zweifel halte Fließtext und Zwischenüberschriften auf 4.5:1 und beanspruche die 3:1-Erleichterung nur für wirklich große Display-Schrift.

Nicht-Text-Kontrast: das Kriterium, das alle vergessen (1.4.11)

Hier ist die Stelle, an der die meisten sonst sorgfältigen Teams scheitern. WCAG 2.1 fügte Erfolgskriterium 1.4.11, Nicht-Text-Kontrast hinzu und verlangt 3:1 für zwei Kategorien, die nichts mit Lesen zu tun haben:

• Benutzeroberflächen-Komponenten – die visuelle Begrenzung eines Bedienelements, die dir verrät, dass es existiert und in welchem Zustand es ist. Der Rahmen eines Texteingabefelds, der Umriss einer nicht angekreuzten Checkbox, der Fokus-Ring um einen Button, die Schiene eines Toggles.
• Grafische Objekte – Teile von Icons, Diagrammen und Schaubildern, die zu ihrem Verständnis nötig sind. Die Linie in einem Sparkline-Diagramm, die Segmente eines Tortendiagramms, die Form eines Warn-Icons.

Der klassische Verstoß: ein Suchfeld, das nur eine #FFFFFF-Box mit einem #E5E7EB hellgrauen 1px-Rahmen auf einer weißen Seite ist. Dieser Rahmen liegt bei etwa 1.2:1. Sehende Nutzer mit eingeschränktem Sehvermögen finden buchstäblich nicht, wo sie klicken sollen. Blasser Platzhaltertext und Ghost-Button-Umrisse scheitern auf dieselbe Weise. Reine Dekoration ist ausgenommen, und ebenso der Text innerhalb der Komponente (der fällt stattdessen unter 1.4.3) – aber das, was "das ist interaktiv" signalisiert, muss 3:1 gegenüber dem erreichen, was direkt daneben liegt.

Wie man es misst – und wie man es behebt

Kontrast beurteilt man nicht nach Augenmaß. Man misst ihn. Mein Alltags-Workflow:

• Öffne im Browser die DevTools und inspiziere das Textelement. Chrome und Firefox geben beide das Kontrastverhältnis direkt im Farbwähler aus, mit Häkchen für AA und AAA, und zeichnen sogar eine Linie im Farbraum, die die Schwelle zeigt, an die du ziehen kannst.
• Um ein Paar Hex-Codes zu prüfen, bevor sie überhaupt in den Code gelangen, nutze einen dedizierten Checker. Der Farbpaletten-Generator auf dieser Seite enthält einen WCAG-Kontrast-Checker, sodass du Kombinationen validieren kannst, während du sie noch auswählst, statt das Problem in einem Audit zu entdecken.
• Für Durchläufe über ganze Seiten setze ein automatisiertes Tool ein. Aber kenne seine Grenze: Automatisierung erfasst Text auf einfarbigem Hintergrund und übersieht Text auf Fotos, Verläufen oder halbtransparenten Overlays. Die prüfst du von Hand.

Wenn etwas nicht besteht, widerstehe dem Drang, am Farbton zu drehen. Die Sättigung zu ändern bewegt den Kontrast kaum; die Helligkeit zu ändern bewegt ihn stark. Konkret:

• Dunkle den Vordergrund ab oder helle den Hintergrund auf, bis du die Linie überschreitest. Mein früheres Grau #9CA3AF musste auf etwa #6B7280 auf Weiß gehen, um ~4.5:1 zu erreichen – dieselbe Familie, nur ein paar Stufen tiefer.
• Bei hellem Text auf Farbe ist es meist schneller, den Hintergrund zu vertiefen. Ein #FFFFFF-Label auf einem blauen Button #60A5FA besteht nicht; setze den Button auf #2563EB, und du erreichst AA, ohne den Text anzufassen.
• Bei Diagrammen und Icons füge eine dünne dunklere Kontur oder eine dezente Hintergrundtönung hinzu, statt darum zu kämpfen, jede Füllung dunkel zu machen.

Die Fehler, die ich in echten Teams sehe

• Abnahme auf einem perfekten Bildschirm. Ein makelloses MacBook in einem schummrigen Raum schmeichelt allem. Echte Nutzer haben Blendung, billige Panels, Blaulichtfilter und "Night Shift", das die Weißtöne wärmt. Gestalte für die schlechteste plausible Betrachtungsbedingung, nicht für die Demo.
• Dem Farbton mehr vertrauen als der Leuchtdichte. Zwei kräftige, aber gleich helle Farben (wieder dieses Rot-auf-Grün) können für farbenblinde Nutzer unsichtbar sein und deine Bauchgefühl-Prüfung trotzdem bestehen. Berechne die Zahl.
• Platzhaltertext und deaktivierte Zustände vergessen. Platzhalter sind weiterhin Text und schulden weiterhin Kontrast, wenn sie Bedeutung tragen. Deaktivierte Bedienelemente sind tatsächlich ausgenommen, aber missbrauche das nicht, um Inhalte mit niedrigem Kontrast hinter einem "deaktivierten" Aussehen zu verstecken.
• Overlays ignorieren. Weißer Text auf einem Hero-Foto besteht über der dunklen Ecke und scheitert über dem hellen Himmel. Ein Scrim – eine halbdurchlässige dunkle Schicht zwischen Bild und Text – ist die Standardlösung.
• 4.5:1 als Ziel statt als Untergrenze behandeln. Genau auf 4.5:1 zu landen ist fragil; ein Designer, der einen Farbton anpasst, zerbricht es erneut. Baue Reserve ein.

Ein Wort zur Zukunft: WCAG 3 erkundet ein wahrnehmungsbasiertes Modell namens APCA, das Kontrast eher so beurteilt wie das menschliche Auge und Textgröße und -stärke gemeinsam berücksichtigt statt eines pauschalen Verhältnisses. Es ist vielversprechend und im Auge zu behalten, aber Stand heute sind die Verhältnisse in diesem Artikel – gestützt auf W3Cs Understanding 1.4.3 – das, was dich rechtlich und praktisch konform macht. Baue danach, lass dir einen Spielraum, und miss, statt zu raten. Die 79,1 % der Seiten, die scheitern, scheiterten größtenteils, weil niemand geprüft hat. Prüfen ist die ganze Aufgabe.