WCAG-Farbkontrastverhältnis-Rechner
Berechnen Sie das relative WCAG 2.1-Kontrastverhältnis zwischen einer Vordergrund- und Hintergrundfarbe und prüfen Sie die AA- und AAA-Konformität für normalen und großen Text.
So verwenden Sie den WCAG-Farbkontrastverhältnis-Rechner
- Geben Sie die Vordergrundfarbe als Hex-Code ein (#rrggbb).
- Geben Sie die Hintergrundfarbe als Hex-Code ein.
- Klicken Sie auf „Berechnen", um das Kontrastverhältnis und die AA/AAA-Ergebnisse zu sehen.
Anwendungsfälle
- •Überprüfung von Design-Tokens während des Brandings.
- •Barrierefreiheits-Audits bestehender Benutzeroberflächen.
- •Prüfung von Text-über-Bild-Kompositionen.
Formel
Verhältnis = (L1 + 0,05) / (L2 + 0,05), wobei L1 die hellere und L2 die dunklere relative Leuchtdichte ist. Vereinfachte Leuchtdichte: 0,2126·R + 0,7152·G + 0,0722·B auf einer sRGB-Skala von 0–1.
Häufig gestellte Fragen
Warum ist AA das Minimum?
WCAG 2.1 Level AA ist das Ziel, das die meisten Regulierungsbehörden übernehmen (EN 301 549, Section 508, ADA-Rechtsprechung). AAA ist ein Ideal für umfangreiches Lesematerial.
Was gilt als großer Text?
Großer Text umfasst mindestens 18 pt (24 px) in normaler Schrift oder 14 pt (18,66 px) in Fettschrift. Alles andere gilt als normaler Text und muss 4.5:1 erfüllen.
Ist die vereinfachte Luminanz WCAG-konform?
Für die meisten sRGB-Paare ergibt sie dasselbe Bestehen/Nicht-Bestehen-Ergebnis wie die vollständige Formel. Für Grenzfälle nahe dem Schwellenwert sollten Sie mit der offiziellen WCAG-Formel oder APCA für neue Projekte gegenprüfen.