WCAG-Kontrastverhältnisse im echten Produktdesign — Fallstudien und Fallen
Was ein Kontrastverhältnis wirklich misst
Ein WCAG-Kontrastverhältnis vergleicht die relative Luminanz zweier Farben — Text und sein Hintergrund — auf einer Skala von 1:1 (identisch) bis 21:1 (reines Schwarz auf reinem Weiß). Die Formel ist (L1 + 0.05) / (L2 + 0.05), wobei L1 die Luminanz der helleren Farbe und L2 die der dunkleren ist. Das Schlüsselwort ist Luminanz, nicht Farbton: Kontrast betrifft, wie hell oder dunkel Farben sind, nicht wie verschieden sie aussehen.
Deshalb können zwei kräftige, offensichtlich verschiedene Farben trotzdem durchfallen. Ein mittleres Rot und ein mittleres Grün können fast dieselbe Luminanz haben, was ein Verhältnis nahe 1:1 ergibt — Text in der einen auf einem Hintergrund der anderen ist nahezu unlesbar, obwohl es 'verschiedene Farben' sind. Kontrast und Buntheit sind nicht dasselbe.
Die Schwellen, präzise
WCAG-2-Stufe AA verlangt 4.5:1 für normalen Text und 3:1 für großen Text. Groß ist definiert als mindestens 24px (18pt) oder 18.66px (14pt) bei Fettschrift — eine kleinere Pixelgröße zählt nur als 'groß', wenn sie fett ist. Stufe AAA hebt dies auf 7:1 normal und 4.5:1 groß.
Es gibt eine eigene Regel, die man vergisst: Erfolgskriterium 1.4.11 (Nicht-Text-Kontrast) verlangt 3:1 für UI-Komponenten und bedeutungstragende Grafiken — Button-Ränder, Eingabefeld-Umrisse, Icons, Fokusindikatoren — gegenüber ihren angrenzenden Farben. Deaktivierte Steuerelemente sind von Kontrast-Mindestwerten ausgenommen, doch diese Ausnahme wird weithin missbraucht, um schwer sichtbare inaktive Zustände zu rechtfertigen.
Wo echte Designs scheitern
Der häufigste Fehler ist hellgrauer Fließtext auf Weiß im Namen der 'Eleganz'. Ein Mittelgrau wie #999999 auf Weiß liegt nur bei etwa 2.8:1 — es fällt AA glatt durch. Platzhaltertext ist meist noch heller und besteht fast nie, und doch packen Teams routinemäßig echte Anweisungen hinein.
Markenfarben sind eine weitere Falle: Viele Markenpaletten in Mitteltönen fallen AA für eine Button-Beschriftung auf weißem Feld durch, also muss die Beschriftung oder der Button dunkler werden. Text über einem Hero-Bild oder Verlauf ist der subtilste Fall — das Kontrastverhältnis ändert sich Pixel für Pixel, also kann eine Bildunterschrift über dem dunklen Teil eines Fotos bestehen und über dem hellen durchfallen. Der Dunkelmodus wird auch vergessen: ein kontrastarmes Dunkelgrau auf Schwarz fällt genauso durch wie sein Hellmodus-Vetter.
Die Fallen, die ein Checker nicht erkennt
Ein Kontrast-Checker vergleicht zwei flache Farben, aber echter Text ist nicht flach. Ein Verhältnis, das mit normaler Stärke besteht, kann in einer haarfeinen oder leichten Schrift schlecht lesbar sein, weil die Mathematik die Strichbreite ignoriert — dünne Glyphen bringen weniger Tinte auf den Schirm, als das Verhältnis nahelegt. Kleiner kantengeglätteter Text senkt den Kontrast an den Rändern ebenfalls.
Zwei weitere Fallen: die Großtext-Ausnahme auf Text anzuwenden, der fett, aber noch klein ist (er muss die Größenschwelle erreichen), und ein bestandenes Verhältnis als vollständige Barrierefreiheit zu behandeln. Kontrast (1.4.3) und das Nicht-allein-auf-Farbe-Verlassen (1.4.1) sind getrennte Anforderungen — ein Link, der den Kontrast besteht, sich aber nur durch Farbe vom Fließtext abhebt, fällt trotzdem durch. Teste Text über Bildern und Verläufen immer am Worst-Case-Pixel, nicht am Durchschnitt.
WCAG 2 heute, APCA morgen
Das WCAG-2-Verhältnis ist nützlich, aber unvollkommen. Weil es weder Schriftgröße, Stärke noch modelliert, wie menschliches Sehen hell-auf-dunkel gegenüber dunkel-auf-hell tatsächlich wahrnimmt, kann es bei manchen Helltext-Kombinationen zu streng und bei manchen dunklen zu lax sein. Designer spüren das, wenn eine Paarung 'gut aussieht', aber durchfällt, oder 'dünn aussieht', aber besteht.
Der vorgeschlagene Ersatz ist APCA (Accessible Perceptual Contrast Algorithm), erkundet für das künftige WCAG 3. APCA gewichtet Textgröße, Stärke und Kontrastpolarität, um der Wahrnehmung näherzukommen. Es ist noch nicht normativ — du kannst keine Konformität dagegen beanspruchen. Die pragmatische Haltung: Liefere heute nach WCAG 2 AA und beobachte APCA dafür, wohin der Standard steuert.
Erkenntnisse
Merke dir zwei Zahlen: 4.5:1 für Fließtext, 3:1 für großen Text und UI-Komponenten. Die meisten Entscheidungen kommen darauf zurück.
Vertraue nicht der 'Eleganz' von Grau auf Weiß — #999 auf Weiß fällt AA durch; prüfe vor dem Ausliefern.
Teste Text über Bildern und Verläufen am schlechtesten Pixel, nicht am Durchschnitt, weil das Verhältnis über die Fläche variiert.
Ein bestandenes Verhältnis mit einer haarfeinen Schrift fällt bei echten Lesern trotzdem durch — bedenke Stärke und Größe, nicht nur die Zahl.
Kontrast und Farbunabhängigkeit sind getrennte Anforderungen — nutze Farbe nie als einziges Signal. Der Farbkontrast-Checker auf dieser Seite berechnet das WCAG-2-Verhältnis und das AA/AAA-Ergebnis für jedes Paar.