Zum Inhalt springen

Farbkontrast-Checker

Prüfen Sie WCAG 2.1 Farbkontrastverhältnisse. Erhalten Sie Bestanden/Nicht bestanden Badges für AA und AAA mit barrierefreien Alternativen.

Der schnelle braune Fuchs springt über den faulen Hund.

Großer Text (18pt+)

Kontrastverhältnis

12.63:1

WCAG 2.1 Ergebnisse

AA Normaler TextBestanden

Min. erforderlich: 4.5:1

AA Großer TextBestanden

Min. erforderlich: 3:1

AAA Normaler TextBestanden

Min. erforderlich: 7:1

AAA Großer TextBestanden

Min. erforderlich: 4.5:1

Kostenloser Farbkontrast-Checker – WCAG 2.1 Barrierefreiheits-Tool

Farbkontrast ist einer der kritischsten Faktoren der Web-Barrierefreiheit. Die Richtlinien für barrierefreie Webinhalte (WCAG) 2.1, gepflegt vom W3C, legen Mindest-Kontrastverhältnisse zwischen Text- und Hintergrundfarben fest, um sicherzustellen, dass Inhalte von allen lesbar sind, einschließlich Menschen mit Sehschwäche oder Farbenblindheit. Unser kostenloser Farbkontrast-Checker berechnet sofort das Kontrastverhältnis zwischen zwei beliebigen Farben.

Die WCAG 2.1 Richtlinien definieren vier Konformitätsstufen. Stufe AA erfordert ein Mindestverhältnis von 4.5:1 für normalgroßen Text (unter 18pt oder 14pt fett) und 3:1 für großen Text (18pt und mehr, oder 14pt fett und mehr). Stufe AAA, der höchste Standard, erfordert 7:1 für normalen Text und 4.5:1 für großen Text.

Das Kontrastverhältnis wird anhand der relativen Luminanz berechnet, einem Maß dafür, wie hell eine Farbe dem menschlichen Auge erscheint. Die Formel wandelt sRGB-Farbwerte in lineare Lichtwerte um und gewichtet sie dann nach der menschlichen Wahrnehmung: Grün trägt am meisten zur wahrgenommenen Helligkeit bei (71,52%), gefolgt von Rot (21,26%) und Blau (7,22%).

Schlechter Farbkontrast betrifft einen erheblichen Teil der Webnutzer. Etwa 8% der Männer und 0,5% der Frauen haben eine Form von Farbsehschwäche. Ältere Erwachsene erleben natürlich eine verminderte Kontrastempfindlichkeit. Umgebungsfaktoren wie Bildschirmblendung reduzieren den effektiven Kontrast zusätzlich.

Über die Konformität hinaus verbessert guter Kontrast das gesamte Benutzererlebnis. Leicht lesbarer Text reduziert Augenbelastung, erhöht die Lesegeschwindigkeit und verbessert das Verständnis. Marken, die barrierefreies Design priorisieren, profitieren auch von besserem SEO. Unser Tool vereinfacht die Überprüfung Ihrer Farbwahl vor der Implementierung.

Wenn Ihre Farbkombination die WCAG-Standards nicht erfüllt, schlägt unser Tool automatisch eine barrierefreie Alternative vor. Es passt die Vordergrundfarbe an den nächstliegenden Farbton an, der die AA-Normal-Anforderung (4.5:1) erfüllt, und bewahrt dabei Ihre Designabsicht so weit wie möglich.

FAQ

Teilen

FAQ

Was ist ein gutes Kontrastverhältnis für Web-Barrierefreiheit?+
WCAG 2.1 Stufe AA erfordert mindestens 4.5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett). Stufe AAA erfordert 7:1 für normalen Text und 4.5:1 für großen Text. Ein Verhältnis von 4.5:1 oder höher gilt als gut.
Was zählt als "großer Text" in den WCAG-Richtlinien?+
Großer Text ist definiert als Text von mindestens 18 Punkt (24px) in normalem Gewicht oder mindestens 14 Punkt (ca. 18.66px) in Fettschrift. Großer Text hat eine niedrigere Kontrastanforderung, da seine größere Größe ihn inhärent lesbarer macht.
Wie wird das Kontrastverhältnis berechnet?+
Das Kontrastverhältnis verwendet die relative Luminanz beider Farben. Jede RGB-Komponente wird von sRGB linearisiert, dann gewichtet (R × 0.2126 + G × 0.7152 + B × 0.0722). Das Verhältnis ist (L1 + 0.05) / (L2 + 0.05), wobei L1 die Luminanz der helleren Farbe ist.
Funktioniert dieses Tool für farbenblinde Benutzer?+
Dieses Tool prüft den luminanzbasierten Kontrast, den WCAG-Standard. Ausreichender Luminanzkontrast gewährleistet Lesbarkeit unabhängig von Farbsehschwäche.
Kann ich es für das Design von mobilen Apps verwenden?+
Ja. Die WCAG 2.1 Richtlinien gelten für alle digitalen Inhalte, einschließlich mobiler Apps, Web-Apps und Desktop-Software. Die gleichen Kontrastverhältnisse sollten für Text auf farbigen Hintergründen in jeder digitalen Oberfläche eingehalten werden.

Beliebteste Tools