Farbkontrast-Prüfer

Alle Tools
Farbkontrast-Prüfer
WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe prüfen — AA/AAA-Bestehen/Nicht-Bestehen-Bewertungen für Normaltext, Großtext und UI-Komponenten anzeigen, mit Livevorschau und Vorschlägen für barrierefreie Farben.
Textfarbe
Tint
Hintergrundfarbe
Tint
Kontrastverhältnis
--:1
Normaler Text
Fließtext unter 18px (oder unter 14px fett)
AA AAA
Großer Text
18px+ regulär oder 14px+ fett
AA AAA
UI-Komponenten
Icons, Rahmen, Formularelemente & Grafiken
AA AAA
Live-Vorschau

Der schnelle braune Fuchs

Großer Text ist gut lesbar, wenn der Kontrast ausreichend ist.

Dies ist ein Beispielabsatz mit normalem Fließtext. Guter Farbkontrast macht Ihre Inhalte für alle lesbar, auch für Menschen mit Sehschwäche oder Farbenblindheit. ein Beispiellink.

Kleindruck und Bildunterschriften sind am schwierigsten zu lesen — sie brauchen den höchsten Kontrast.
Beispiel-Button Beispiel-Button
Vorschlag

Alles wird live im Browser mit der WCAG 2.x Relative-Luminanz-Formel berechnet — keine Uploads, keine Registrierung, vollständig kostenlos.

Teilen
Verwandte Tools
Farbenblindheits-Simulator

Bild oder Palette so sehen, wie Menschen mit Protanopie, Deuteranopie, Tritanopie oder Achromatopsie — läuft vollständig im Browser, nichts wird hochgeladen.
Farbcode-Konverter

Farben zwischen HEX, RGB, RGBA, HSL, HSLA und HSV konvertieren — Farbe auswählen, Alpha anpassen und jedes Format sofort kopieren.
Paletten-Exporter

Eine Reihe von Farben einfügen oder importieren und sofort in CSS-Variablen, SCSS, Tailwind-Config, JSON oder SVG-Farbfelder exportieren — der Abschlussschritt für jede Palette.
Beliebte Suchen
Farbkontrast-Prüfer WCAG-Kontrastverhältnis Barrierefreiheits-Kontrastprüfer Textkontrast-Prüfer AA-AAA-Kontrasttest Farbkontrast online prüfen

Füge dieses kostenlose Tool zu deiner eigenen Website hinzu — kopiere den Code unten und füge ihn ein.