Farbkontrast-Prüfer
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich
Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich
Was ist Farbkontrast-Prüfer
Dieses Tool misst das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und prüft es gegen die WCAG 2.1 Barrierefreiheitsrichtlinien. Es zeigt eine Live-Vorschau beider Farben zusammen und sagt dir, ob das Paar AA oder AAA für normalen und großen Text besteht, damit du Lesbarkeitsprobleme erkennst, bevor sie in Produktion gehen.
Verwendung
- Wähle oder tippe die Textfarbe im ersten Feld als HEX-Code ein.
- Wähle oder tippe die Hintergrundfarbe im zweiten Feld ein.
- Prüfe das Kontrastverhältnis und die Bestanden/Nicht-bestanden-Kennzeichen für AA und AAA.
- Klicke auf den Tausch-Button, um die Farben umgekehrt zu testen.
- Kopiere die URL, um das genaue Farbpaar mit deinem Team zu teilen.
Wann ist es nützlich?
Du wählst gerade die Textfarbe für ein neues Design und bist dir nicht sicher, ob sie gut lesbar ist? Gib deine Text- und Hintergrundfarbe ein, zum Beispiel #767676 auf #FFFFFF, und du erhältst ein Verhältnis von 4.54:1: bestanden für AA bei normalem Text, durchgefallen bei AAA. Das ist der Unterschied zwischen einem barrierefreien Produkt und einem Punkt im Audit-Bericht, egal ob du die Website eines Kunden prüfst oder deine eigene App launchst.
Häufig gestellte Fragen
Was ist ein gutes Kontrastverhältnis für Text?
WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text (18pt oder 14pt fett und größer). WCAG AAA ist strenger: 7:1 für normalen Text und 4.5:1 für großen Text.
Was ist das maximal mögliche Kontrastverhältnis?
21:1, das Verhältnis zwischen reinem Schwarz (#000000) und reinem Weiß (#FFFFFF). Kein Farbpaar übersteigt diesen Wert.
Warum sind meine Farben bei AA durchgefallen, obwohl das Design für mich gut aussieht?
Beim Kontrastverhältnis geht es um Barrierefreiheit, nicht um persönlichen Geschmack. Jemand mit Sehschwäche, oder wer einen Bildschirm bei hellem Sonnenlicht betrachtet, braucht mehr Kontrast als ein Paar, das für ein durchschnittliches Auge akzeptabel wirkt.
Prüft dieses Tool auch Farbenblindheit?
Nein. Das Tool prüft den Luminanzkontrast nach der WCAG-Formel, was allen Nutzern zugutekommt, einschließlich vieler Formen von Farbenblindheit, simuliert aber keine spezifischen Farbsehschwächen.
Kann ich dieses Tool mit vorausgefüllten Eingaben teilen?
Ja. Die URL aktualisiert sich automatisch, während du Farben auswählst. Kopiere den Link aus der Adressleiste oder klicke auf Teilen, wer den Link öffnet, sieht deine genauen Farben bereits eingestellt.
Ähnliche Werkzeuge
Seitenverhältnis-Rechner
Berechne das Seitenverhältnis, finde die fehlende Breite oder Höhe und skaliere Bilder und Videos unter Beibehaltung der Proportionen. Kostenlos.
Base64-Decoder
Dekodiere Base64-Strings sofort zu Klartext im Browser. Unterstützt vollständige Unicode-Ausgabe mit Emojis. Kostenloser Base64-Decoder.
Base64-Encoder
Kodiere Text in Sekunden zu Base64 im Browser. Unterstützt Unicode, Emojis und Sonderzeichen. Kostenloser Online-Base64-Encoder.