Die Geschichte hinter dem Farbkontrast-Prüfer
Zu wenig Kontrast gehört zu den häufigsten Barrierefreiheitsproblemen im Web. Die Regeln dafür wirken wie magische Zahlen, doch jede hat einen Grund: wie Augen mit dem Alter Empfindlichkeit verlieren und wie Bildschirme Licht erzeugen.
Woher 4,5 und 7 kommen
WCAG 2.0 wurde im Dezember 2008 eine W3C-Empfehlung. Die Autoren gingen von einem Minimum von 3:1 aus der Norm ISO 9241-3 aus und erhöhten es, um den Verlust an Kontrastempfindlichkeit bei einer Sehschärfe von etwa 20/40 auszugleichen, die um das 80. Lebensjahr häufig ist. So entstand 4,5:1 für Stufe AA. Stufe AAA mit 7:1 macht dasselbe für eine Sehschärfe von etwa 20/80.
Relative Leuchtdichte
Die Formel wandelt jeden sRGB-Kanal zuerst in lineares Licht zurück und gewichtet Rot, Grün und Blau mit 0,2126, 0,7152 und 0,0722, denselben Gewichten wie in der Fernsehnorm ITU-R BT.709, weil das Auge für Grün am empfindlichsten ist. Das Verhältnis ist die hellere Leuchtdichte plus 0,05 geteilt durch die dunklere plus 0,05. Die 0,05 steht für vom Bildschirm reflektiertes Licht und begrenzt die Skala auf 1:1 bis 21:1, Schwarz auf Weiß.
Mehr als Text
Großer Text, mindestens 24 px oder fett 18,66 px, bleibt bei weniger Kontrast lesbar und braucht für AA nur 3:1. WCAG 2.1 vom Juni 2018 fügte das Erfolgskriterium 1.4.11 Nicht-Text-Kontrast hinzu: Rahmen von Eingabefeldern, Fokusringe, Symbole und die zum Verständnis nötigen Teile eines Diagramms brauchen 3:1 gegenüber ihrer Umgebung.
Farbenblindheit und was kommt
Etwa jeder zwölfte Mann und jede zweihundertste Frau hat eine Farbsehschwäche, meist bei Rot und Grün. Kontrast wird über die Leuchtdichte gemessen, ein bestehendes Paar bleibt also lesbar, aber Farben, die sich nur im Farbton unterscheiden, können gleich aussehen. Die Simulation hier nutzt das Modell von Machado, Oliveira und Fernandes aus dem Jahr 2009. Entwürfe von WCAG 3 erproben APCA, eine neuere Methode, die auch Schriftgröße und die Richtung dunkel auf hell oder hell auf dunkel berücksichtigt.
Häufig gestellte Fragen
Reicht guter Kontrast für Barrierefreiheit?
Nein. Er ist eine Anforderung unter vielen. WCAG verlangt auch, dass Farbe nicht das einzige Mittel ist, um Bedeutung zu zeigen, etwa durch ein Symbol oder eine Unterstreichung bei Links und Fehlern.
Zeigt die Simulation genau, was ein Mensch sieht?
Sie ist eine gute Annäherung an vollständige Dichromasie. Viele Menschen haben eine mildere Form, und jeder sieht etwas anders, nutzen Sie sie also als Orientierung.
Soll ich APCA statt des WCAG-2-Verhältnisses nutzen?
Für die Konformität heute gilt das WCAG-2-Verhältnis. WCAG 2.2 vom Oktober 2023 behält dieselbe Formel, und Gesetze und Normen wie EN 301 549 verweisen darauf. APCA ist noch in Entwicklung.
Verwandte Tools
Farbkontrast-Prüfer
Kostenloser WCAG-Farbkontrast-Prüfer: Text- und Hintergrundfarbe als HEX, RGB oder HSL eingeben, das Kontrastverhältnis mit AA- und AAA-Ergebnis sehen, die nächste bestehende Farbe erhalten und Farbenblindheit simulieren.
Farbpaletten-Generator
Erstellen, sperren und mischen Sie Farbpaletten im Browser. Kopieren Sie HEX, CSS-Variablen oder JSON, exportieren Sie PNG oder SVG und extrahieren Sie Farben aus einem Foto.
Farbrad
Wählen Sie eine Farbe auf einem interaktiven Rad aus, erstellen Sie komplementäre, analoge, triadische und andere Paletten und kopieren Sie HEX, RGB, HSL, HSV oder CMYK.
Verlaufseditor
Erstellen Sie lineare und radiale CSS-Verläufe im Browser. Ziehen Sie Farbstopps, stellen Sie den Winkel ein und kopieren Sie CSS, HEX, RGB, HSL, HSV oder CMYK.
Farben
Wie Farbe auf Bildschirmen und im Druck funktioniert: RGB, CMYK, HSL, Hex, Farbrad, Verläufe, Kontrast und PictorX-Werkzeuge.
Bereit, es auszuprobieren?
Öffnen Sie PictorX in Ihrem Browser – keine Installation, zum Starten ist keine Kreditkarte erforderlich.
Farbkontrast-Prüfer öffnen