Farbkontrast-Prüfer mit Korrekturvorschlägen
Prüfen Sie das WCAG-Kontrastverhältnis von Text- und Hintergrundfarbe und erhalten Sie bestehende Farbalternativen
Sobald Sie zwei Farben auswählen, berechnet dieses Werkzeug das Kontrastverhältnis in Echtzeit und zeigt an, ob die Stufen AA und AAA der WCAG 2.1 erfüllt sind. Für Webdesignerinnen und Entwickler, die die Lesbarkeit von Texten überprüfen möchten, ist das besonders praktisch: Wird ein Grenzwert verfehlt, schlägt das Werkzeug automatisch Alternativfarben mit angepasster Helligkeit (Lightness) vor, die Sie direkt übernehmen können. Sämtliche Berechnungen laufen unmittelbar im Browser ab – Ihre Farbwerte werden nicht an einen Server übertragen.
🔒 Alles läuft zu 100 % in Ihrem Browser. Ihre Dateien und Eingaben werden niemals auf einen Server hochgeladen.
Anleitung
- Geben Sie die Textfarbe (Vordergrundfarbe) über den Farbwähler oder als Hex-Code ein.
- Tragen Sie die Hintergrundfarbe auf dieselbe Weise ein.
- Prüfen Sie die Vorschau, das Kontrastverhältnis und die Bewertung nach AA/AAA.
- Wird der Grenzwert verfehlt, übernehmen Sie eine vorgeschlagene Farbe mit der Schaltfläche „Übernehmen“.
FAQ
- Worin unterscheiden sich die Stufen AA und AAA?
- AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger und fordert mindestens 7:1 für normalen Text sowie 4,5:1 für großen Text.
- Wie werden die vorgeschlagenen Farben berechnet?
- Farbton (Hue) und Sättigung (Saturation) der Ausgangsfarbe bleiben unverändert. Lediglich die Helligkeit (Lightness) wird im Bereich von 0 bis 100 % variiert, bis das gewünschte Kontrastverhältnis erreicht ist – vorgeschlagen wird jene Farbe, die dem Original am nächsten kommt.
- Werden meine Farbwerte auf einem Server gespeichert?
- Nein. Alle Berechnungen finden ausschließlich in Ihrem Browser statt, die Farbwerte verlassen Ihr Gerät nicht.