WCAG-Kontrastprüfer
Text mit geringem Kontrast ist der häufigste Fehler bei der Barrierefreiheit im Web. Geben Sie Ihre Text- und Hintergrundfarben ein, um das genaue Kontrastverhältnis und eine Gut/Schlecht-Bewertung für normalen Text, großen Text und UI-Komponenten zu erhalten.
Wichtige Fakten
- Kategorie
- Design & Farbe
- Preis
- Frei
- Konto
- Nicht erforderlich
- Verarbeitung
- In Ihrem Browser
- Eingang
- Lokale Dateien oder eingefügte Daten
- Plattform
- Moderne Desktop- und mobile Browser
Was es bewirkt
Text mit geringem Kontrast ist der häufigste Fehler bei der Barrierefreiheit im Web. Geben Sie Ihre Text- und Hintergrundfarben ein, um das genaue Kontrastverhältnis und eine Gut/Schlecht-Bewertung für normalen Text, großen Text und UI-Komponenten zu erhalten.
Messen Sie Textkontrastverhältnisse und prüfen Sie die AA/AAA-Konformität für normalen und großen Text.
Wie man es benutzt
Hier ist die Kurzversion der Verwendung von WCAG-Kontrastprüfer.
- Legen Sie Text und Hintergrund fest — Verwenden Sie die Farbeingaben oder fügen Sie Hexwerte aus Ihren Design-Tokens ein.
- Lesen Sie das Verhältnis — Das Tool berechnet die relative Leuchtdichte und das Kontrastverhältnis auf zwei Dezimalstellen genau.
- Reparieren und erneut testen — Wenn ein Paar fehlschlägt, passen Sie die Helligkeit an, bis es erfolgreich ist, und kopieren Sie dann die konformen Hexadezimalwerte.
Funktionen, die wichtig sind
Was WCAG-Kontrastprüfer gut macht.
- Nichts verlässt Ihr Gerät — Die Arbeit geschieht in Ihrem Browser-Tab. In dieser App gibt es keinen Upload-Endpunkt, sodass Ihre Dateien und Texte von uns nicht gespeichert, protokolliert oder eingesehen werden können.
- Keine Upload-Wartezeit — Sie überspringen den Hin- und Rückweg zu einem Server vollständig. Die Ergebnisse werden durch Ihre eigene CPU begrenzt, nicht durch die Netzwerkgeschwindigkeit oder die Warteschlangengröße.
- Kostenlos, kein Konto, keine Kontingente — Keine Anmeldewand, kein Wasserzeichen, kein Tageslimit. Optionale Konten existieren nur, um Favoriten und Voreinstellungen geräteübergreifend zu speichern.
Häufig gestellte Fragen
Ist die Verwendung meines Farbpaares hier sicher?
Ja. Dieses Tool läuft vollständig in Ihrem Browser und verwendet JavaScript. Nichts, was Sie einfügen oder öffnen, wird an einen Server gesendet und die Seite behält keine Kopie, nachdem Sie sie geschlossen haben.
Muss ich ein Konto erstellen?
Nein. Jedes Tool ist ohne Anmeldung vollständig nutzbar. Ein Konto fügt nur gespeicherte Favoriten und wiederverwendbare Voreinstellungen hinzu.
Funktioniert es auf einem Telefon?
Ja. Die Benutzeroberfläche ist „Mobile First“ mit großen Touch-Zielen und einem gestapelten Layout, sodass sie sowohl auf Telefonen und Tablets als auch auf Desktops funktioniert.
Welches Verhältnis verlangt die WCAG?
AA erfordert 4,5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett). AAA erhöht diese auf 7:1 und 4,5:1. Nicht-Text-UI-Komponenten benötigen mindestens 3:1.
Warum sieht eine Farbe gut aus, scheitert aber?
Die wahrgenommene Helligkeit weicht vom Farbton ab. Gesättigte Blau- und Grüntöne haben oft eine geringere Leuchtdichte, als sie erscheinen. Messen Sie daher immer das tatsächliche Paar, anstatt sich auf das Farbmuster zu verlassen.
Öffnen Sie WCAG-Kontrastprüfer
Probieren Sie es jetzt aus – es läuft in Ihrem Browser und erfordert kein Konto.
Öffnen Sie das Tool