Über den 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.
Wie man es benutzt
- 1Legen Sie Text und Hintergrund festVerwenden Sie die Farbeingaben oder fügen Sie Hexwerte aus Ihren Design-Tokens ein.
- 2Lesen Sie das VerhältnisDas Tool berechnet die relative Leuchtdichte und das Kontrastverhältnis auf zwei Dezimalstellen genau.
- 3Reparieren und erneut testenWenn ein Paar fehlschlägt, passen Sie die Helligkeit an, bis es erfolgreich ist, und kopieren Sie dann die konformen Hexadezimalwerte.
Warum diesen wcag-kontrastprüfer verwenden?
- 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.