Kontrastregeln für großen Text

Der Prüfbefund, mit dem niemand gerechnet hatte, war der Hero. Die Headline — Markenblau auf Weiß bei ≈3,3:1 — war Monate zuvor korrekt als ausgenommen von der Fließtext-Grenze eingestuft worden: Bei ihren 40px am Desktop galt sie als großer Text, wo 3:1 genügt. Was die Prüfung aufdeckte, war der mobile Breakpoint. Die responsive Skala schrumpfte dieselbe Headline auf 22px, und bei 22px normal ist sie kein großer Text mehr. Gleiche Farbe, gleiches Element, gleiches Stylesheet — ein Bestehen bei der einen Bildschirmbreite und ein Durchfallen bei einer anderen.

WCAG zählt Text ab 18pt (24px) bei normalem Schnitt als „groß”, oder ab 14pt (18,66px) bei fettem — und die Kontrastgrenze für großen Text sinkt von 4,5:1 auf 3:1. Entscheidend ist die gerenderte Größe auf dem tatsächlichen Bildschirm, nicht die Größe im breitesten Mockup. Die Ausnahme ist real und nützlich, und sie ist zugleich die am häufigsten falsch angewandte Regel in dieser Ecke des Standards — weshalb sie ihr eigenes Stück in unserem Kontrast-Leitfaden bekommt.

Was genau gilt als großer Text?

Die Definition von großem Text zieht zwei Grenzen: 18 Punkt bei normalem Schnitt oder 14 Punkt bei fettem. Der Standard spricht in Punkt, Bildschirme sprechen in Pixel, und die Umrechnung — unter Annahme des CSS-Referenzpixels, bei dem 1pt = 1,333px — landet bei den zwei Zahlen, die man sich merken sollte: 24px normal und 18,66px fett. Beide gelten „und aufwärts”: 24px normal qualifiziert sich, 23px normal nicht; 18,66px fett qualifiziert sich, 18px fett nicht.

Zwei unscharfe Kanten sollte man ehrlich benennen. „Fett” ist im Kriterium nicht an eine bestimmte Gewichtszahl gebunden — 700 ist sicher fett, und ob ein 600er Semibold zählt, ist Ermessenssache. Und die Definition macht unterhalb des normalen Schnitts keinen Unterschied: Eine 24px Thin-Schriftart qualifiziert sich nach dem Buchstaben der Regel, obwohl ihre haarfeinen Striche genau dort liegen, wo niedriger Kontrast am meisten schadet. Die Regel ist eine Untergrenze, kein Modell der Lesbarkeit.

Warum bekommt großer Text eine niedrigere Grenze?

Weil die Strichstärke verändert, was das Auge auflösen kann. Die Kontrastempfindlichkeit hängt von der räumlichen Frequenz ab — davon, wie fein das Detail ist. Die dünnen Striche kleiner Schrift sind hochfrequentes Detail, wo die menschliche Kontrastempfindlichkeit am schwächsten ist und jeder Kontrastpunkt zählt; die dicken Striche einer Display-Headline sind niederfrequent, wo das visuelle System nahezu am besten arbeitet und einen schwächeren Unterschied verträgt. Das ist die perzeptive Lesart der Ausnahme, mit Vorsicht vertreten: Größere Striche sind schlicht leichtere Signale, also verlangt der Standard weniger von ihrer Farbe.

Wo hilft die Ausnahme berechtigt?

Überall dort, wo eine Markenfarbe mittlerer Helligkeit auf Display-Schrift trifft. Viele Markenpaletten liegen in dem Band, das im Fließtext durchfällt, aber 3:1 überschreitet — und für sie ist die Ausnahme der Unterschied zwischen „unbrauchbar für Schrift” und „brauchbar genau dort, wo die Marke am lautesten sein will”.

Das durchgerechnete Beispiel: Ein helleres Markenblau, #4A8CF7, misst ≈3,3:1 gegen Weiß — berechnet und unterhalb der 4,5:1-Fließtextgrenze. Als 32px-Headline ist es großer Text, die Grenze liegt bei 3:1, und die Paarung besteht berechtigt. Dasselbe Blau als 16px-Fließtext fällt durch. Dreh die Paarung für einen Hero um: weißer Display-Text auf einem #4A8CF7-Hintergrund ergibt dieselben ≈3,3:1 — zulässig bei 48px, während der 16px große weiße Subhead darunter im selben Hero seine Grenze verfehlt. Eine Füllung, eine Headline, die besteht, und eine Zeile Kleingedrucktes, die es nicht tut.

Öffne dieses Blau an beiden Grenzen im Scale Composer — dieselbe Paarung, geprüft als Fließtext und als großer Text, eine Grenze gerissen und eine bestanden, mit dem APCA Lc daneben.

Welche Grenze gilt bei welcher Größe und welchem Schnitt?

Für AAA-Konformität gilt dieselbe Definition, mit beiden Grenzen angehoben: 7:1 für normalen Text, 4,5:1 für großen.

Was sind die häufigen Fehlanwendungen?

Vier Muster decken die meisten Fehleinschätzungen ab:

1. „Es ist eine Überschrift, also ist es groß.” Die Regel liest Größen, keine Semantik — ein h3 bei 18px normal ist normaler Text und schuldet 4,5:1.
2. Sie auf Buttons anwenden. Die meisten Button-Beschriftungen liegen bei 14–16px im normalen Schnitt, weit von beiden Schwellen entfernt; den einen übergroßen Button zu testen und zu verallgemeinern dehnt die Ausnahme stillschweigend auf eine ganze Komponentenklasse aus.
3. „Es ist fett, also ist es groß.” Fett senkt die Größenschwelle; es entfernt sie nicht. 18px fett liegt unter der 18,66px-Grenze und schuldet 4,5:1.
4. Die Breakpoint-Falle — der Fehler aus dem Einstieg. Die Regel folgt der gerenderten Größe, also wechselt fluide Schrift, die irgendwo in ihrem Bereich 24px (oder 18,66px fett) überschreitet, irgendwo in ihrem Bereich die Grenze. Die Prüfung gehört an die kleinste gerenderte Größe, nicht die größte.

Prüfe das Grenzband

Text, der zwischen etwa 17px und 24px liegt, ist der Bereich, in dem sich die Fehleinschätzungen häufen — nah genug an den Schwellen, dass Schnitt, fluide Skalierung oder eine einzige Design-Anpassung umkippt, welche Grenze gilt. Lade eine Grenzfall-Paarung und prüfe sie gegen beide Grenzen — eine Überschrift der 20px-Klasse, getestet bei 4,5:1 und bei 3:1, damit du siehst, ob deine Farbe eine Neueinstufung übersteht, bevor ein Breakpoint sie für dich entscheidet.