Kontrastverhältnis und WCAG erklärt

Die Zahlen, die du brauchst

Die Web Content Accessibility Guidelines (WCAG 2.1 und 2.2 haben dieselben Kontrastregeln) legen drei Erfolgskriterien für Kontrast fest. Die meisten Gesetze und Vergaberegeln verweisen auf Stufe AA, das ist also das praktische Ziel für Websites und Apps.

Um ein Paar zu prüfen, gib im Tool unten deine Textfarbe ein (jede CSS-Farbe funktioniert: ein Hex-Code, rgb(), hsl() oder ein Name), trag die Hintergrundfarbe ein und lies die Ergebnisse in jeder Zeile ab. Tauschen vertauscht die beiden, praktisch für den Dark Mode.

So wird das Kontrastverhältnis berechnet

Das Verhältnis vergleicht die relative Leuchtdichte, also wie hell eine Farbe auf einem normalen sRGB-Bildschirm wirkt, von 0 für Schwarz bis 1 für Weiß. Zuerst wird jeder Rot-, Grün- und Blaukanal von der Skala 0 bis 255 auf 0 bis 1 umgerechnet und linearisiert (die Werte werden ungefähr mit 2,4 potenziert, weil Bildschirmwerte gammakodiert sind). Dann werden die Kanäle gewichtet: Leuchtdichte gleich 0,2126 mal Rot plus 0,7152 mal Grün plus 0,0722 mal Blau.

Die Gewichte erklären viele Überraschungen. Grün trägt am meisten zur wahrgenommenen Helligkeit bei und Blau sehr wenig. Reiner blauer Text auf Schwarz fällt deshalb deutlich durch, während Gelb auf Weiß fast unsichtbar ist (etwa 1,07:1). Das Verhältnis selbst ist (hellere Leuchtdichte plus 0,05) geteilt durch (dunklere Leuchtdichte plus 0,05). Die 0,05 berücksichtigen Spiegelungen auf dem Bildschirm und verhindern eine Division durch null.

Der Farbton kommt in der Formel überhaupt nicht vor. Zwei Farben können deutlich verschieden aussehen, etwa Rot und Grün, und trotzdem fast dieselbe Leuchtdichte haben. Genau diese Kombination können Menschen mit Rot-Grün-Sehschwäche nicht unterscheiden.

Echte Farbpaare und ihre Werte

Bei grauem Text scheitern die meisten Designs. Die Schwelle liegt auf Weiß bei etwa #767676: eine Stufe heller, und normaler Text besteht AA nicht mehr.

Welche Elemente welches Verhältnis brauchen

• Fließtext, Formularbeschriftungen, Linktext, Platzhaltertext mit wichtigen Informationen, Fehlermeldungen: 4,5:1.
• Überschriften und anderer Text ab 24 px, oder fetter Text ab etwa 19 px (18,66 px, das sind 14 pt): 3:1.
• Text auf Bildern oder Verläufen: Prüf die ungünstigste Stelle hinter den Buchstaben, nicht den Durchschnitt. Leg bei Bedarf eine deckende oder halbtransparente Fläche darunter.
• Rahmen von Eingabefeldern, Umrisse von Checkboxen, Zustände von Schaltern, Icons ohne Text, Fokusringe und Linien in Diagrammen: 3:1 gegenüber der angrenzenden Farbe (Kriterium 1.4.11, Nicht-Text-Kontrast).
• Deaktivierte Buttons, inaktive Bedienelemente, Logos und reine Dekoration sind ausgenommen. Ausgenommen heißt nicht unsichtbar: Nutzer müssen trotzdem erkennen, dass es einen deaktivierten Button gibt.
• Links im Fließtext, die nur durch ihre Farbe erkennbar sind, brauchen zusätzlich 3:1 gegenüber dem umgebenden Text oder eine Unterstreichung.

So korrigierst du Farben, die durchfallen

Den Farbton zu ändern, hilft selten, die Helligkeit zu ändern dagegen schon. Behalte den Farbton deiner Marke und mach den Text dunkler (auf hellem Hintergrund) oder heller (auf dunklem Hintergrund), bis er besteht. Die Zeile Abstufungen unter der Prüfung zeigt neun hellere und dunklere Varianten deiner Farbe, in OKLCH berechnet, damit die Schritte gleichmäßig wirken. Nimm die erste, die besteht, und übernimm sie in dein Design.

Wenn die Markenfarbe genau so bleiben muss, nutz sie für große Überschriften, Rahmen oder als Hintergrund von Buttons mit weißem oder schwarzem Text, und nimm für kleinen Text eine dunklere Variante. Viele Designsysteme führen aus diesem Grund zwei Versionen jeder Markenfarbe: eine für Flächen und eine für Text.

Halbtransparenter Text, etwa Weiß mit 60 Prozent Deckkraft, wird zuerst mit dem Hintergrund verrechnet. Die Prüfung macht diese Mischung mit, das angezeigte Verhältnis entspricht also dem, was Menschen tatsächlich sehen. Eine häufige Überraschung: Grauer Text mit reduzierter Deckkraft auf einer grauen Karte fällt durch, obwohl beide Farben einzeln auf Weiß bestehen.

Dark Mode, APCA und die Rechtslage

Dunkle Designs brauchen eine eigene Prüfung. Reines Weiß auf reinem Schwarz (21:1) ist technisch perfekt, kann bei manchen Lesern aber zu Überstrahlung führen. Gebrochen weißer Text wie #E6E6E6 auf dunkelgrauem Hintergrund ist oft angenehmer und besteht trotzdem AAA. Geh nicht davon aus, dass eine Palette, die im hellen Modus funktioniert, auch im dunklen besteht: Gedämpfte Akzentfarben rutschen auf dunklen Flächen oft unter 3:1.

Vielleicht liest du von APCA, einem neueren Kontrastmodell, das für ein künftiges WCAG 3 vorgeschlagen wird. Es berücksichtigt Schriftstärke und Polarität, ist aber noch ein Entwurf. Die Konformität wird heute mit dem WCAG-2-Verhältnis gemessen, und genau das berechnet diese Prüfung.

Auf WCAG 2.1 Stufe AA verweisen Gesetze und Normen zur Barrierefreiheit in vielen Ländern, darunter die europäische Norm EN 301 549, die für den European Accessibility Act und die Regeln für öffentliche Stellen gilt. In Deutschland setzt das Barrierefreiheitsstärkungsgesetz (BFSG) den European Accessibility Act um, und für Behörden gilt die BITV 2.0. In den USA dient WCAG AA häufig als Maßstab in ADA-Verfahren. Wenn du online an Verbraucher verkaufst, ist Kontrast eine der am leichtesten erfüllbaren Anforderungen und einer der häufigsten Fehler in automatischen Prüfungen.