Die WCAG-Kontrastprüfung durchläuft einige einfache Schritte. Nichts verlässt Ihren Browser.
- Sie geben eine Vordergrund- und eine Hintergrundfarbe ein. Das Tool analysiert Hex-, rgb()-, hsl()- oder benannte CSS-Farben in ihre Rot-, Grün- und Blaukanalwerte.
- Jeder RGB-Kanal wird mithilfe der sRGB-Übertragungsfunktion linearisiert. Dies wandelt die gammakodierten Anzeigewerte in lineare Lichtintensitäten um.
- Die linearen Werte werden mit der Empfindlichkeit des menschlichen Auges für jeden Kanal gewichtet — 0,2126 für Rot, 0,7152 für Grün, 0,0722 für Blau. Die Summe ist die relative Leuchtdichte der Farbe.
- Das Kontrastverhältnis ist (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe und L2 die der dunkleren ist. Die zusätzlichen 0,05 halten die Formel für reines Schwarz gültig.
- Das Verhältnis wird mit den WCAG-Schwellen verglichen: AA-Normaltext benötigt mindestens 4,5:1, AA-Großtext 3:1, AAA-Normaltext 7:1 und AAA-Großtext 4,5:1. Großtext bedeutet mindestens 18pt oder 14pt fett.
FAQ
Häufige Fragen zur WCAG-Kontrastprüfung.
Was ist der Unterschied zwischen AA und AAA?
AA ist die Mindestkonformitätsstufe für die meisten Webinhalte. Es erfordert ein Kontrastverhältnis von mindestens 4,5:1 für Normaltext und 3:1 für Großtext. AAA ist ein höherer Standard, der 7:1 für Normaltext und 4,5:1 für Großtext verlangt. Sie können AAA für Schlüsselinhalte wie Fließtext auf einer Nachrichtenseite anstreben, während Sie AA für das allgemeine Design verwenden. AAA überall zu erfüllen kann mit Markenfarben schwierig sein, daher zielen viele Teams auf AA in der gesamten Anwendung und heben Schlüsseltexte auf AAA an, wo möglich.
Was gilt laut WCAG als «Großtext»?
WCAG 2.x definiert Großtext als mindestens 18 Punkt (24px) für normale Schriftstärke oder 14 Punkt (etwa 19px) für fette Schriftstärke. Symbole und Icons, die Teil einer Schriftart sind, folgen denselben Schwellen. Wenn Sie nicht sicher sind, welcher Schwellwert für Ihre UI gilt, prüfen Sie beide — AA Groß hat eine niedrigere Hürde (3:1), daher bestehen die meisten Farbpaare, die AA Normal nicht bestehen, AA Groß, wenn der Text groß genug ist.
Warum besteht mein Paar AA Groß, aber nicht AA Normal?
Weil AA Groß nur ein Verhältnis von 3:1 erfordert, während AA Normal 4,5:1 verlangt. WCAG setzt eine niedrigere Schwelle für Großtext, weil größere Zeichen auch mit weniger Kontrast leichter zu lesen sind. Ein Farbpaar, das beispielsweise 4,0:1 erreicht, besteht AA Groß (Schwelle 3:1), besteht aber AA Normal (Schwelle 4,5:1) nicht. Dies ist sehr häufig bei hellen Markenfarben, die als Vordergrund auf weißen Hintergründen verwendet werden.
Kann ich mich für das Barrierefreiheits-Audit allein auf dieses Tool verlassen?
Dieses Tool prüft eine Sache — das WCAG-2.x-Kontrastverhältnis zwischen zwei Vollfarben. Echte Barrierefreiheit umfasst mehr: Fokusindikatoren, Schriftgröße und -stärke, Farbe als alleiniges Mittel zur Informationsvermittlung sowie Kompatibilität mit Bildschirmleseprogrammen und Zoom-Tools. Verwenden Sie diese Kontrastprüfung zusammen mit anderen Auditmethoden, um ein vollständiges Bild der Barrierefreiheit Ihrer Anwendung zu erhalten.
Welche Farbformate akzeptiert die Eingabe?
Sie können 3-, 4-, 6- oder 8-stellige Hex-Codes (mit oder ohne #), rgb()- und rgba()-Werte in traditioneller Komma-Syntax oder moderner Leerzeichen-getrennter Syntax, hsl() und hsla() mit jeder standardmäßigen Farbton-Einheit (deg, rad, grad, turn), hsv(), hwb() und jede der 150 benannten CSS-Farben aus der CSS Color Module Level 4-Spezifikation einfügen. Die Farbe wird vollständig auf Ihrem Gerät analysiert.