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

Unterstütze dieses Projekt

Wenn du unsere Tools nützlich findest, spendiere uns einen Kaffee!

Buy Me a Coffee

Beliebteste Tools