Farbkontrast-Prüfer
Prüfe das WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe.
Dieses Tool läuft vollständig in deinem Browser. Deine Dateien werden niemals auf einen Server hochgeladen.
17.74:1
Contrast ratio
Pass
AA — normal text
Pass
AA — large text
Pass
AAA — normal text
Pass
AAA — large text
Was dieser Prüfer macht
Berechnet das WCAG-Kontrastverhältnis der relativen Leuchtdichte zwischen einer Vordergrund- (Text-) Farbe und einer Hintergrundfarbe und zeigt, ob dieses Verhältnis jeden Barrierefreiheitsschwellenwert besteht.
Anwendung
Gib Vordergrund- und Hintergrundfarbe als drei- oder sechsstellige HEX-Werte ein. Kontrastverhältnis, Live-Vorschau des Paares und Bestanden/Nicht-bestanden-Ergebnisse aktualisieren sich beim Tippen.
Rechenbeispiel
Ein Vordergrund von #767676 auf weißem (#ffffff) Hintergrund ergibt ein Kontrastverhältnis von etwa 4,54:1 — es besteht AA für normalen Text (4,5:1 nötig) und AA für großen Text, verfehlt aber AAA normal (7:1 nötig).
WCAG-Schwellenwerte
Das Tool prüft vier Schwellenwerte: AA normaler Text 4,5:1, AA großer Text 3:1, AAA normaler Text 7:1 und AAA großer Text 4,5:1. Großer Text bedeutet 18pt oder mehr, oder 14pt fett.
Warum Kontrast wichtig ist
Ausreichender Kontrast hält Text für Nutzer mit Sehschwäche oder Farbsehschwäche lesbar, und das Erreichen dieser Schwellenwerte ist eine Voraussetzung für WCAG-konforme Websites.
Grenzen
Dies prüft nur die beiden eingegebenen deckenden sRGB-Farben — Schriftgröße oder -stärke, Transparenz, Verläufe, Hintergrundbilder, Interaktionszustände oder der Rest deiner Seite werden nicht untersucht; behandle ein Bestehen daher als eine Prüfung, nicht als vollständiges Audit.
Datenschutz
Die Berechnung läuft vollständig in deinem Browser; eingegebene Farben werden nicht hochgeladen.
Häufig gestellte Fragen
- Welches Kontrastverhältnis brauche ich für WCAG AA?
- Mindestens 4,5:1 für normalen Text, oder 3:1 für großen Text (18pt+ oder 14pt+ fett).
- Und für WCAG AAA?
- AAA ist strenger: 7:1 für normalen Text und 4,5:1 für großen Text.
- Warum ist Barrierefreiheits-Kontrast wichtig?
- Ausreichender Kontrast macht Text für Nutzer mit Sehschwäche oder Farbsehschwäche lesbar und ist für WCAG-konforme Websites erforderlich.
Ähnliche Tools
Farbnamen-Finder
Finde die nächstgelegene benannte Farbe zu jedem Hex-Code.
CMYK-Farbkonverter
Konvertiere jede Hex- oder RGB-Farbe für den Druck in CMYK.
Farbverlauf-CSS-Generator
Erstelle einen zweifarbigen CSS-Farbverlauf und kopiere den Code sofort.
Analoge Farben-Generator
Erzeuge ein harmonisches analoges Farbschema aus jeder Grundfarbe.
Farbenblindheits-Simulator
Sieh dir an, wie eine Farbe bei Protanopie, Deuteranopie oder Tritanopie wirkt.
Farbpaletten-Generator
Erzeuge mit einem Klick eine zufällige 5-Farben-Palette.