Was ist ein Color Contrast Checker?
Ein Farbkontrast-Checker misst den Luminanzunterschied zwischen einer Vordergrund- (Text-)Farbe und einer Hintergrundfarbe und erzeugt ein Kontrastverhältnis, wie es in den Web Content Accessibility Guidelines (WCAG) 2.1 definiert ist. Dieses Verhältnis bestimmt, ob Text für Benutzer mit Sehschwäche oder Farbmängeln lesbar ist. WCAG definiert zwei Konformitätsstufen - AA (Minimum) und AAA (Enhanced) - mit jeweils unterschiedlichen Schwellenwerten für normalgroßen Text und großen Text. Dieses Tool berechnet das Verhältnis sofort und simuliert auch, wie Ihr Farbpaar unter gängigen Formen der Farbblindheit erscheint.
So verwenden Sie den Color Contrast Checker
- 1Geben Sie Ihre Vordergrundfarbe (Textfarbe) als HEX-Wert ein (z. B. #1e293b) oder verwenden Sie den Farbwähler.
- 2Geben Sie Ihre Hintergrundfarbe als HEX-Wert ein (z. B. #ffffff) oder verwenden Sie den Farbwähler.
- 3Sehen Sie sich die Live-Vorschau an, die Ihren Text in verschiedenen Größen vor dem Hintergrund zeigt.
- 4Überprüfen Sie das Kontrastverhältnis und die unten angezeigten WCAG AA/AAA Pass or Fail-Ergebnisse.
- 5Verwenden Sie die Schaltfläche Farben austauschen, um Vorder- und Hintergrund schnell umzukehren.
- 6Scrollen Sie nach unten, um Farbblindheitssimulationen für Protanopie, Deuteranopie und Tritanopie zu sehen.
Häufige Anwendungsfälle
Web Accessibility Compliance
Stellen Sie sicher, dass die Text- und Hintergrundfarbenkombinationen Ihrer Website vor der Bereitstellung die Anforderungen von WCAG 2.1 AA oder AAA erfüllen.
Validierung des Entwurfssystems
Testen Sie alle Farbmarkenpaarungen in Ihrem Designsystem, um sicherzustellen, dass jede Kombination zugänglich und konform ist.
Farbblindheitsprüfung
Vorschau, wie Benutzer mit Protanopie, Deuteranopie oder Tritanopie Ihre Farbauswahl wahrnehmen und sich entsprechend anpassen.
Kunden- und Stakeholderberichte
Generieren Sie eindeutige Pass/Fail-Beweise für Zugänglichkeits-Audits, ADA-Compliance-Reviews oder Abschnitt 508-Bewertungen.
Häufig gestellte Fragen
Welches Kontrastverhältnis ist für die Einhaltung der WCAG AA erforderlich?
WCAG AA erfordert ein Mindestkontrastverhältnis von 4,5:1 für normalgroßen Text und 3:1 für großen Text (18px+ oder 14px+ fett). Diese Schwellenwerte gewährleisten die Lesbarkeit für die meisten Benutzer mit mäßigen Sehstörungen.
Was ist der Unterschied zwischen WCAG AA und AAA?
WCAG AAA ist ein strengerer Standard, der 7:1 für normalen Text und 4,5:1 für großen Text erfordert. Während aa als das akzeptable mindestniveau gilt, bietet aaa eine verbesserte lesbarkeit und wird für körpertexte auf websites mit hohem verkehr oder auf staatlichen websites empfohlen.
Wie funktioniert die Farbblindheitssimulation?
Das Tool wendet wissenschaftlich abgeleitete Farbtransformationsmatrizen an, die annähern, wie Menschen mit Protanopie (Rotblind), Deuteranopie (Grünblind) und Tritanopie (Blaublind) Farben wahrnehmen. Es berechnet das Kontrastverhältnis für jedes simulierte Paar neu, so dass Sie die Zugänglichkeit unter verschiedenen Sichtbedingungen überprüfen können.
Kann ich RGB- oder HSL-Werte anstelle von HEX verwenden?
Derzeit akzeptiert das Tool HEX-Farbcodes (#rrggbb-Format). Sie können das Companion Color Converter & Picker-Tool verwenden, um RGB- oder HSL-Werte zuerst in HEX zu konvertieren und dann das Ergebnis hier einzufügen.