WCAG-Kontrastverhältnisse erklärt (4,5:1, 3:1, 7:1)

Ein WCAG-Kontrastverhältnis vergleicht die relative Leuchtdichte der helleren von zwei Farben mit der dunkleren, auf einer Skala von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Drei Schwellenwerte erledigen die praktische Arbeit: 4,5:1 für Text in normaler Größe, 3:1 für großen Text und bedeutungstragende Interface-Komponenten und 7:1 für die strengere AAA-Stufe. Ein nützlicher Anker: 21:1 ist Schwarz auf Weiß, und 4,5:1 ist ungefähr ein mittleres Grau — #767676 — auf Weiß.

Die drei Zahlen werden meist als eine einzige Regel zitiert, und vieles, was in der Praxis schiefgeht, entsteht dadurch, dass der falsche Schwellenwert auf die falsche Sache angewendet wird. Diese Referenz geht durch, was das Verhältnis tatsächlich misst, was jeder Schwellenwert abdeckt, was ausgenommen ist und welche Fehldeutungen am häufigsten auftauchen — das Fundamentstück unseres Kontrast-Leitfadens. Jede Zahl in den Beispielen unten ist berechnet, nicht zitiert.

Was ist ein Kontrastverhältnis genau?

Das Verhältnis basiert auf der relativen Leuchtdichte: einem Maß dafür, wie viel Licht eine Farbe ans Auge sendet, von 0 für Schwarz bis 1 für Weiß. WCAG definiert das Kontrastverhältnis als (L1 + 0.05) / (L2 + 0.05) — die Leuchtdichte der helleren Farbe geteilt durch die der dunkleren, jeweils um eine kleine Konstante ergänzt, die Streulicht in der Umgebung modelliert. Zwei identische Farben ergeben 1:1; Schwarz gegen Weiß ergibt das Maximum, 21:1. Die Formel ist symmetrisch: Text und Hintergrund zu vertauschen ändert nichts an der Zahl.

Die Intuition hinter dem Maß: Die Kantenerkennung des Auges läuft fast vollständig über Unterschiede in der Helligkeit, nicht im Farbton. Ein kräftiges Blau und ein Grau mit derselben Leuchtdichte schneiden gegen Weiß nahezu gleich ab, denn für den Teil deines Sehens, der Buchstabenformen auflöst, sind sie nahezu gleich. Deshalb sagt ein rein auf Leuchtdichte aufgebautes Verhältnis die Lesbarkeit so gut voraus — und deshalb behebt „mach es einfach zu einer anderen Farbe” nichts, wenn die Helligkeit gleich bleibt.

Was deckt der Schwellenwert 4,5:1 ab?

Text in normaler Größe — in der Praxis alles unter 24px bei normaler Schriftstärke oder unter 18,66px bei Fettschrift: Fließtext, Labels, Bildunterschriften, Links, Platzhaltertext und Text in Bildern. Der Schwellenwert stammt aus Success Criterion 1.4.3, Contrast (Minimum), und die Zahl ist nicht willkürlich: Die erklärte Begründung des Standards lautet, dass 4,5:1 den Verlust an Kontrastempfindlichkeit ausgleicht, der ungefähr eine Sehschärfe von 20/40 begleitet — ein Schärfegrad, der bei älteren Leserinnen und Lesern sowie bei Menschen mit leichter Sehschwäche häufig ist. Der Schwellenwert ist so kalibriert, dass Text für sie lesbar bleibt, nicht nur für junge Augen auf hellen Bildschirmen.

Wann reicht 3:1 aus?

In zwei Fällen. Der erste ist großer Text: 24px und größer bei normaler Schriftstärke oder 18,66px und größer bei Fettschrift. Kräftigere Striche bleiben bei geringerem Kontrast lesbar, also lockert sich der Schwellenwert. Der zweite sind bedeutungstragende UI-Komponenten — die visuelle Information, die nötig ist, um einen Interface-Teil zu erkennen oder zu bedienen: der Rahmen, der markiert, wo ein Formularfeld ist, ein Icon, das für sich allein Bedeutung trägt, ein Fokus-Indikator, der visuelle Unterschied zwischen einem angehakten und einem nicht angehakten Bedienelement. Beide Fälle haben genug Randbedingungen, um eine eigene Behandlung zu verdienen; kurz gesagt ist 3:1 eine Ausnahme mit präzisen Grenzen, kein allgemeiner Rabatt.

Wann lohnt es sich, 7:1 anzustreben?

7:1 ist die AAA-Stufe — Success Criterion 1.4.6, „Contrast (Enhanced)” — und optional. Die meisten Vorschriften, die WCAG zitieren, beziehen sich auf die AA-Stufe, also ist 7:1 eine Entscheidung — und in bestimmten Situationen eine sinnvolle: leseintensive Produkte, bei denen Menschen Stunden im Fließtext verbringen, Dokumentation und Produkte für Zielgruppen mit einem höheren Anteil an Leserinnen und Lesern mit Sehschwäche. Es kostet Paletten-Spielraum — das Farbband, das 7:1 auf einem gegebenen Hintergrund erreicht, ist viel schmaler als das 4,5:1-Band — weshalb es besser als gezielte Entscheidung für Text-Rollen funktioniert denn als pauschale Regel.

Wie schneiden sechs echte Paarungen ab?

Sechs Paarungen, mit der WCAG-Formel berechnet, gegen alle drei Schwellenwerte geprüft. Das Markenblau ist #2563eb — oklch(0.546 0.215 262.9):

Zwei Zeilen lohnen die Aufmerksamkeit. Die Zeile Weiß-auf-Rot wird gegen die rote Fläche gemessen, nicht gegen die Seite — Text auf einer farbigen Schaltfläche wird immer gegen die Farbe geprüft, auf der er sitzt. Und das hellere Blau ist der klassische Grenzfall: unbrauchbar für Fließtext, völlig zulässig als Überschrift oder Icon.

Öffne diese Paarungstabelle als Live-Rollen-Panel in Scale Composer — jede der ~17 semantischen Rollen, die eine Oberfläche braucht, bei der Ableitung gegen ihren Schwellenwert geprüft, mit dem APCA-Lc-Wert neben jedem Verhältnis.

Was ist von den Kontrast-Schwellenwerten ausgenommen?

Vier Kategorien tragen keine Kontrastanforderung, und sie werden in beide Richtungen verfehlt — bemängelt, wenn sie ausgenommen sind, ignoriert, wenn sie es nicht sind:

• Deaktivierte Bedienelemente — die Beschriftung einer inaktiven Schaltfläche hat keinen Schwellenwert.
• Rein dekorative Elemente — Zierrat und Hintergrundmuster, die nichts vermitteln.
• Logos und Markennamen — eine Wortmarke ist als Logo ausgenommen; dieselben Wörter als Fließtext gesetzt sind es nicht.
• Beiläufiger Text — Text, der zufällig in einem Foto vorkommt, im Gegensatz zu Text, der über ein Bild gelegt wird, um gelesen zu werden.

Ein Vorbehalt: Ausnahme bedeutet keinen gesetzlichen Schwellenwert, nicht dass Unsichtbarkeit gutes Design ist. Deaktivierte Zustände müssen trotzdem auffindbar sein — ein Thema mit eigenen Feinheiten, besonders auf dunklen Hintergründen.

Was verstehen Leute an den Verhältnissen falsch?

Drei Fehldeutungen sind für die meiste Verwirrung verantwortlich. Erstens: Die Schwellenwerte gelten pro Paarung, nicht pro Palette — eine Farbe „besteht WCAG” nicht; eine Kombination aus zwei Farben tut es, und dasselbe Grau kann auf Weiß bestehen und auf einer getönten Karte scheitern. Zweitens: AA gegen AAA wird pro Kriterium entschieden, nicht pro Website — ein Produkt kann das AA-Kontrastkriterium erfüllen und das AAA-Kriterium für seine Leseansicht, und „wir sind AAA” über eine ganze Website zu sagen behauptet weit mehr als Kontrast. Drittens: „unsere Markenfarbe scheitert an WCAG” bedeutet fast immer, dass eine Paarung scheitert — meist die Markenfarbe als Fließtext auf Weiß — und die Behebung ist genauso eng gefasst: diese eine Paarung eine Stufe abdunkeln, die Farbe für großen Text und UI reservieren, wo 3:1 gilt, oder die Text-Rolle gegen jeden Hintergrund ableiten, statt überall einen Wert fest zu verdrahten.

Begleite eine Paarung bis an die Schwellenwerte

Die drei Zahlen werden in dem Moment intuitiv, in dem du eine echte Paarung sie überqueren siehst. Nimm eine Textfarbe und führe ihre Helligkeit in Richtung Hintergrund — das Verhältnis rutscht von komfortabel an 7:1 vorbei, dann 4,5:1, dann 3:1, und das Rollen-Panel markiert jeden Schwellenwert, sobald er bricht, sodass du genau siehst, wie viel Spielraum deine eigenen Farben haben, bevor sie für die Aufgabe, die sie erfüllen, nicht mehr zulässig sind.