Kontrastprüfer
Prüfe den Kontrast zwischen Textfarbe und Hintergrund nach WCAG 2.2, kostenlos und in deinem Browser. Der Kontrastprüfer zeigt das Verhältnis und welche Stufen bestehen. Fällt eine durch, schlägt er die nächste Textfarbe vor, die besteht. Nichts wird irgendwohin gesendet.
So prüfst du den WCAG-Kontrast deiner Farben
- 1Gib eine „Textfarbe“ ein oder wähle sie aus
- 2Gib eine „Hintergrundfarbe“ ein oder wähle sie aus
- 3Lies das Verhältnis und „Bestanden“ oder „Nicht bestanden“ ab
- 4Fällt eine Stufe durch, kopiere die vorgeschlagene Textfarbe
- Das Kontrastverhältnis, mit AA und AAA für jede Verwendung
So wird geprüft
- Abgerundet.Ein Verhältnis von 4,499 erscheint als 4,49:1. Steht 4,5:1 da, besteht die Farbe AA wirklich
- Eine Vorschau, die mitläuft.Großer Text mit 24 px und Fließtext mit 16 px erscheinen in deinen beiden Farben, während du tippst
- Nichts wird gesendet.Beide Farben werden von deinem Browser auf deinem eigenen Gerät geprüft
Was du tun kannst
- Eine Farbe als #hex, rgb(), hsl(), hwb(), lab(), lch(), oklch(), CSS-Farbnamen oder Tailwind-Namen wie sky-500 eingeben oder mit dem Farbwähler aussuchen
- Das Ergebnis für fünf Verwendungen sehen: Fließtext nach AA (4,5:1) und AAA (7:1), großer Text nach AA (3:1) und AAA (4,5:1) sowie Icons, Rahmen und Formularfelder nach AA (3:1)
- Die nächste Textfarbe bekommen, die AA oder AAA für Fließtext erreicht. Sie behält den Farbton und wird nur heller oder dunkler, du kannst sie kopieren
- Mit „Tauschen“ Text und Hintergrund vertauschen und die Gegenrichtung prüfen
Gut zu wissen
- Transparenz wird nicht berücksichtigt. Eine Farbe mit Alphawert wird so geprüft, als wäre sie voll deckend
- Jede Farbe wird zuerst auf ihren HEX-Wert gerundet, also auf die Farbe, die ein Bildschirm wirklich zeigt
- Großer Text heißt 24 px oder 18,66 px fett. Kleinerer Text muss die Stufen für Fließtext erreichen
- Erreicht keine hellere oder dunklere Version der Textfarbe eine Stufe auf diesem Hintergrund, sagt das Tool das, statt etwas vorzuschlagen
Fragen
Welches Kontrastverhältnis verlangt WCAG?
Für Fließtext verlangt AA 4,5:1 und AAA 7:1. Großer Text braucht 3:1 für AA und 4,5:1 für AAA. Icons, Rahmen und Formularfelder brauchen 3:1.
Reicht #777777 auf Weiß für WCAG AA?
Nein. #777777 auf Weiß ergibt 4,47:1, knapp unter 4,5:1. Eine Stufe dunkler, #767676, ergibt 4,54:1 und besteht AA für Fließtext.
Warum rundet der Kontrastprüfer ab?
WCAG vergleicht das genaue Verhältnis, 4,499:1 fällt bei AA also durch. Normal gerundet stünde dort 4,5:1, und es sähe wie bestanden aus. Abgerundet besteht, was auf dem Bildschirm besteht, auch nach der Regel.
Wie funktioniert die vorgeschlagene Farbe?
Das Tool öffnet mit #5B6770 auf Weiß: 5,8:1, das besteht AA für Fließtext, aber nicht AAA. Für AAA schlägt es #4F5A63 mit 7,05:1 vor, denselben Farbton etwas dunkler.
Werden meine Farben an einen Server gesendet?
Nein. Der Kontrast wird von deinem Browser auf deinem eigenen Gerät berechnet. Mit deinen Farben geht keine Anfrage hinaus.
Weitere Tools in „Web & Code“
Diese Seite gibt es nicht. Such unten oder zieh eine Datei hierher, um das passende Werkzeug zu finden.
Eine Website für jede Dateiaufgabe. Welche ist deine?
Schluss mit dem Hin und Her zwischen Konverter-Websites. Wähle eines von 410+ Tools oder ein Rezept, das mehrere aneinanderreiht.
- Dateien bleiben auf deinem Gerät
- Kein Wasserzeichen
- Funktioniert offline
Datei hierher ziehen
Eine eingefügte Datei geht auch.
oder such ein Tool
Eine App öffnen
Von „uff, diese Datei“ zu erledigt, in drei Schritten.
- Zieh sie rein oder wähl eine Aufgabe
Keine Datei? Such, was du brauchst. Dateien werden auf deinem Gerät verarbeitet, nicht zur Verarbeitung hochgeladen.
- Wähl, was du willst
Kleiner, ein anderes Format, unterschrieben, zusammengefügt. Ein Klick, ohne erst Einstellungen zu studieren.
- Mach ein Rezept daraus
Jede Woche dieselben drei Schritte? Reih sie einmal aneinander und lass beim nächsten Mal dasselbe Rezept laufen.
Ein freigegebener Werkzeugkasten für das ganze Team.
Ob im Büro, auf der Baustelle oder in der Agentur: Teams arbeiten den ganzen Tag mit vertraulichen Dateien. ToolRecipe gibt allen dieselben Werkzeuge und dieselben Rezepte, und die Dateien werden auf dem eigenen Computer jeder Person verarbeitet.
- Dateien werden auf dem Gerät der Mitarbeitenden verarbeitet
- Firmenrezepte, die alle gleich ausführen
- Ein Ort statt zehn Konverter-Seiten