WCAG-Farbkontrastprüfer
Bewerten Sie das Kontrastverhältnis von Text- und Hintergrundfarben gemäß den WCAG 2.1-Richtlinien. Erstellen Sie sofort barrierefreie Farbanpassungen.
Live-Textvorschau
Große Überschrift (18pt Fett / 24pt Normal)
Dies ist eine Vorstellung des großen Titeltextstils.
Normaler Text (unter 18pt)
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Kontrastverhältnis
WCAG 2.1 Konformitätsstatus
WCAG 2.1 Richtlinien
Überprüfen Sie einfach Kontraststandards, um barrierefreie Schnittstellen zu erstellen, die den Richtlinien von Section 508, ADA und WCAG AA oder AAA entsprechen.
Vorschlags-Engine
Automatisch passen Sie die Farben zunehmend entlang der HSL-Koordinate an, um die nächsten Alternativen zu finden, die den Kontrastverhältniskriterien erfüllen.
Vollständig Client-seitig
Berechnungen werden lokal in Ihrem Browser-Kontext ausgeführt. Es werden keine Farben, Dateien oder Telemetrie-Koordinaten an unsere Server übertragen.
Verwandte Farbtools
Farbkontrastprüfer
Berechnen Sie WCAG-Kontrastverhältnisse für Vorder- und Hintergrundfarben und zeigen Sie allgemeine Textgrößenergebnisse an.
- Eingabe
- Zwei gültige CSS-Farben und optionaler Vorschautext.
- Ausgabe
- Ein Kontrastverhältnis mit WCAG AA und AAA Pass oder Fail-Indikatoren.
- Reale Einschränkungen
- Die Berechnung deckt nur den Leuchtdichtekontrast ab; sie zertifiziert keine Schnittstelle oder berücksichtigt Schriftdarstellung, Bewegung, Fokus oder nicht-farbliche Hinweise.
- Datenschutz und Datenverarbeitung
- Zwei gültige CSS-Farbe und optionale Vorschautext werden in dieser Browserkarte verarbeitet. Convertr erhält es nicht oder speichert es; Schließen oder neu laden die Seite reinigt den Arbeitsstatus, es sei denn, das Tool explizit eine lokale Download bietet.
So verwenden Sie dieses Tool
- Geben Sie zwei gültige CSS-Farben und optionalen Vorschautext in den Tool-Steuerelementen an.
- Wählen Sie die Einstellungen, die ein Kontrastverhältnis mit WCAG-AA- und AAA-Bestanden/Nicht-Bestanden-Indikatoren beeinflussen, und führen Sie dann das Tool aus.
- Überprüfen Sie ein Kontrastverhältnis mit WCAG-AA- und AAA-Bestands- oder Fehlindikatoren vor dem Kopieren oder Herunterladen.
Häufige Fehlermodi
Ungültige Farben können nicht gemessen werden, und Transparenz ohne einen aufgelösten Hintergrund kann ein Verhältnis sinnlos machen.
Nützliches Beispiel
Vergleichen Sie #1f2937 Text auf #ffffff, um sein Verhältnis für normalen und großen Text zu überprüfen.