Farbkontrast prüfen (WCAG)
Prüfe, ob zwei Farben die WCAG-Kontraststufen AA und AAA für normalen und großen Text erfüllen.
16.85:1
- AA normaler Text (4,5:1)Erfüllt
- AA großer Text (3:1)Erfüllt
- AAA normaler Text (7:1)Erfüllt
- AAA großer Text (4,5:1)Erfüllt
Prüft, ob eine Kombination aus Text- und Hintergrundfarbe die Kontraststufen AA und AAA der WCAG-2.x-Richtlinien für Barrierefreiheit erfüllt.
Berechnet die relative Leuchtdichte jeder Farbe nach der WCAG-Formel und ermittelt daraus das Kontrastverhältnis, das mit den Schwellenwerten 3:1, 4,5:1 und 7:1 verglichen wird.
Anwendungsfälle
- Prüfen, ob ein Button oder Text vor der Veröffentlichung lesbar ist.
- Die Barrierefreiheit einer Oberfläche prüfen.
- Markenfarben wählen, die WCAG AA erfüllen.
So funktioniert's
- 1
Text- und Hintergrundfarbe wählen
Gib beide Farben als HEX-Wert ein.
- 2
Verhältnis prüfen
Sieh dir das Kontrastverhältnis an und welche WCAG-Stufen es erfüllt.
Häufige Fragen
Was ist der Unterschied zwischen AA und AAA?
AA ist die empfohlene Mindeststufe (4,5:1 für normalen Text); AAA ist strenger (7:1) und wird für kritische Inhalte empfohlen.
Was gilt bei WCAG als großer Text?
Text ab 18pt oder 14pt fett, für den ein niedrigerer Kontrastschwellenwert gilt (3:1 bei AA).
Ähnliche Tools
- Border-Radius-GeneratorErstellt CSS-border-radius mit Vorschau.
- Box-Shadow-GeneratorErstellt CSS-Schatten mit Live-Vorschau.
- FarbwählerFarbe wählen und HEX, RGB und HSL erhalten.
- CSS-Verlauf-GeneratorErstellt CSS-Verläufe mit Vorschau.
- HEX zu HSLWandelt HEX mit Vorschau in HSL um.
- HEX zu RGBWandelt HEX mit Vorschau in RGB um.