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.
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.Alles wird live im Browser mit der WCAG 2.x Relative-Luminanz-Formel berechnet — keine Uploads, keine Registrierung, vollständig kostenlos.
Über Farbkontrast-Prüfer
Der Color Contrast Checker misst das WCAG-Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und bewertet das Paar dann gegen die Barrierefreiheitsstufen AA und AAA für normalen Text, großen Text und UI-Komponenten. Das Verhältnis und jedes Bestanden/Nicht-bestanden-Urteil aktualisieren sich live, sobald du eine der beiden Farben änderst.
Ein realistisches Vorschaupanel zeigt Überschriften, Fließtext, Kleingedrucktes, einen Button und einen Link in deiner gewählten Kombination, sodass du die Lesbarkeit mit echtem Inhalt statt abstrakter Farbmuster beurteilen kannst. Fällt ein Paar durch, schlägt das Tool die nächstliegende barrierefreie Textfarbe vor, die den AA-Schwellenwert von 4,5:1 erreicht, bereit zur Anwendung mit einem Klick.
Die Berechnung folgt der WCAG-2.x-Formel für relative Leuchtdichte und läuft vollständig in deinem Browser: Nichts wird hochgeladen, und die Prüfungen sind kostenlos. Du kannst auch einen kompakten Textbericht des Verhältnisses und der Bewertungen kopieren, um ihn in eine Barrierefreiheitsprüfung oder einen Pull Request einzufügen.
So verwenden Sie Farbkontrast-Prüfer
- Lege deine Textfarbe und Hintergrundfarbe mit den Farbwählern fest oder gib Werte ein.
- Lies das Kontrastverhältnis und die AA/AAA-Ergebnisse für normalen Text, großen Text und UI-Komponenten ab.
- Betrachte die Live-Vorschau, um echte Überschriften, Absätze, Buttons und Links in deinen Farben zu sehen.
- Fällt das Paar durch, wende die vorgeschlagene barrierefreie Textfarbe an oder tausche die beiden Farben.
- Klicke auf „Bericht kopieren“, um das Verhältnis und die Konformitätsergebnisse zu teilen.