Kontrastprüfer

Fügen Sie eine Vordergrund- und Hintergrundfarbe ein (oder wählen Sie aus einem Screenshot); erhalten Sie das Kontrastverhältnis und welche WCAG-Stufen es erfüllt. WCAG 2.1 AA ist die rechtliche Barrierefreiheitsgrundlage in den meisten Rechtsordnungen; AAA ist der höhere Standard, der für kritische Inhalte empfohlen wird.

Die Schwellenwerte

• WCAG AA, normaler Text: mindestens 4.5:1.
• WCAG AA, großer Text (18pt+ oder 14pt+ fett): mindestens 3:1.
• WCAG AAA, normaler Text: mindestens 7:1.
• WCAG AAA, großer Text: mindestens 4.5:1.
• Nicht-Text-UI-Komponenten (Schaltflächen, Formularränder): mindestens 3:1 (WCAG 2.1+).

Warum Kontrast wichtig ist

Text mit geringem Kontrast ist für Benutzer mit Sehschwäche (etwa 4 % der Bevölkerung), Benutzer bei hellem Sonnenlicht, Benutzer mit billigen Monitoren und alternden Augen (irgendwann jeder) unlesbar. Viele Designsysteme verwenden standardmäßig Grau auf Grau, weil es auf einem kalibrierten 5K-Display des Designers elegant aussieht – und anderswo unlesbar ist.

Das Nichtbestehen von WCAG AA ist auch in den USA (ADA Title III), der EU (EAA) und vielen anderen Rechtsordnungen rechtlich relevant. Günstige Versicherung: Führen Sie jedes Text-/Hintergrundpaar vor der Auslieferung durch einen Prüfer.

Was wir melden

1. Kontrastverhältnis als Zahl (z. B. 4.71:1).
2. Bestanden/nicht bestanden für jede WCAG-Stufe und Textgröße.
3. Vorgeschlagene Korrekturen: der nächstgelegene dunklere Vordergrund oder hellere Hintergrund, der bestehen würde.
4. Live-Vorschau mit Beispieltext im Farbpaar.

Kombinieren Sie mit dem Farbenblindheitssimulator

Kontrast und Farbenblindheit sind unterschiedliche Barrierefreiheitsachsen. Führen Sie den Farbenblindheitssimulator auf derselben Benutzeroberfläche aus, um zu überprüfen, ob sie auch für Benutzer mit CVD funktioniert.