Prüfen Sie das Kontrastverhältnis zwischen zwei Farben für WCAG 2.1 Barrierefreiheits-Konformität. Testen Sie AA- und AAA-Stufen für normalen und großen Text.
Geben Sie Ihre Text-/Vordergrundfarbe ein oder wählen Sie sie mit der Farbauswahl oder durch Eingabe eines HEX-Werts aus. Dies ist typischerweise Ihre Textfarbe.
Geben Sie Ihre Hintergrundfarbe ein oder wählen Sie sie aus. Verwenden Sie die Tauschen-Schaltfläche, um Vorder- und Hintergrund schnell zu vertauschen.
Prüfen Sie das Kontrastverhältnis und die WCAG-Konformitäts-Badges. Grüne Badges zeigen Bestehen an, rote zeigen Nichtbestehen. Streben Sie mindestens AA-Konformität für alle Texte an.
Verwenden Sie den Vorschaubereich, um zu sehen, wie Ihre Farbkombination mit echtem Text in verschiedenen Größen aussieht, bevor Sie sie in Ihrem Design implementieren.
WCAG (Richtlinien für barrierefreie Webinhalte) definiert Kontrastanforderungen, um sicherzustellen, dass Inhalte von Menschen mit Sehbeeinträchtigungen lesbar sind. Stufe AA erfordert 4.5:1 für normalen Text und 3:1 für grossen Text. Stufe AAA erfordert 7:1 bzw. 4.5:1.
Die relative Luminanz misst die wahrgenommene Helligkeit einer Farbe mit der Formel: L = 0.2126R + 0.7152G + 0.0722B. Die Köffizienten spiegeln die Empfindlichkeit des menschlichen Auges wider, wobei Grün am prominentesten ist. Werte werden vor der Berechnung aus sRGB linearisiert.
Die Formel für das Kontrastverhältnis lautet: (L1 + 0.05) / (L2 + 0.05), wobei L1 die Luminanz der helleren Farbe und L2 die der dunkleren ist. Der Versatz von 0.05 verhindert Division durch Null und berücksichtigt Umgebungslicht.
Grosser Text ist definiert als 18pt (24px) bei normalem Gewicht oder 14pt (18.5px) fett. Grosser Text hat niedrigere Kontrastanforderungen, da seine grössere Grösse ihn natürlich lesbarer macht, auch bei weniger Kontrast.
Etwa 8% der Männer und 0.5% der Fraün haben eine Farbsehschwäche. Text mit niedrigem Kontrast ist auch schwer zu lesen für ältere Benutzer, bei hellem Sonnenlicht oder auf Displays mit niedriger Qualität. Guter Kontrast nützt allen.
Ein Kontrastverhältnis misst den Unterschied in der Luminanz (Helligkeit) zwischen zwei Farben. Es reicht von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Höhere Verhältnisse bedeuten bessere Lesbarkeit und Zugänglichkeit.
Dies ist normaler Absatztext. Guter Kontrast gewährleistet Lesbarkeit für alle Benutzer, einschließlich Menschen mit Sehbeeinträchtigungen.
Dies ist kleiner Text, der noch besseren Kontrast für die Lesbarkeit erfordert.
Kontrastverhältnis
Klicken Sie auf ein Paar, um es als Vordergrund-/Hintergrundfarben zu verwenden
Gespeicherte Voreinstellungen ist eine Supporter-Funktion.
Werkzeugverlauf ist eine Supporter-Funktion.
Werkzeug-Notizen ist eine Supporter-Funktion.
