Farbkontrast-Checker
Prüfen Sie, ob Text- und Hintergrundfarben die WCAG-Kontrastanforderungen erfüllen, und erhalten Sie sonst die nächstgelegene barrierefreie Farbe.
Beispiel für großen Text
Beispiel für normalen Fließtext, wie der Großteil Ihrer Seite.
Kontrastverhältnis
4.83:1
- WCAG AA, normaler Text (4.5:1) Bestanden
- WCAG AA, großer Text (3:1) Bestanden
- WCAG AA, Bedienelemente und Icons (3:1) Bestanden
- WCAG AAA, normaler Text (7:1) Nicht bestanden
- WCAG AAA, großer Text (4.5:1) Bestanden
Was der Kontrast-Checker zeigt
Alles, was Sie für gut lesbare Farben brauchen.
Kontrastverhältnis
Das exakte WCAG-Verhältnis zwischen Ihren beiden Farben.
AA- und AAA-Ergebnisse
Normaler Text, großer Text und Bedienelemente gegen die WCAG-Schwellen.
Live-Vorschau
Sehen Sie Ihre Farben beim Anpassen an Beispieltext.
Barrierefreie Empfehlung
Der nächste Ton Ihrer Textfarbe, der AA erfüllt.
So funktioniert es
Zwei Farben wählen
Nutzen Sie den Farbwähler oder geben Sie Hex- oder RGB-Werte ein.
Ergebnis ablesen
Verhältnis und Bestanden oder nicht für jede WCAG-Stufe aktualisieren sich sofort.
Lösung übernehmen
Nutzen Sie die empfohlene Farbe, wenn Ihr Paar durchfällt.
Kontrast ist eine von vielen WCAG-Anforderungen. Führen Sie ein vollständiges Barrierefreiheits-Audit durch, um die ganze Seite zu prüfen.
Fragen
WCAG AA verlangt 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente. AAA verlangt 7:1 und 4,5:1.
Mindestens 24 px normal oder etwa 18,7 px fett (18 pt oder 14 pt fett).
Nein, es prüft ein Farbpaar. Das Barrierefreiheits-Audit prüft den Kontrast auf einer Live-Seite.
Prüfen Sie Ihre ganze Seite auf Barrierefreiheit
WCAG-zugeordnete Befunde inklusive Kontrast aus einem kostenlosen Audit Ihrer Live-Website.
Kostenlosen Audit starten