Farbkontrastprüfung
Der Farbkontrastprüfer ist ein kostenloses Online-Tool, das das Kontrastverhältnis zwischen zwei Farben bewertet, um sicherzustellen, dass sie den Barrierefreiheitsstandards der WCAG (Web Content Accessibility Guidelines) entsprechen. Geben Sie zwei Farben ein oder wählen Sie sie aus — Vordergrund (Text) und Hintergrund — und das Tool berechnet sofort das Kontrastverhältnis und zeigt an, ob die Kombination die WCAG 2.1 Level AA- oder AAA-Anforderungen für normalen und großen Text erfüllt. Unverzichtbar für Webdesigner, Entwickler und Ersteller von Inhalten, die sicherstellen müssen, dass ihr Text für Benutzer mit Sehbehinderungen oder bei schwierigen Lichtverhältnissen lesbar ist.
Was ist
Der Farbkontrast ist der Unterschied in der Leuchtdichte (wahrgenommene Helligkeit) zwischen Vordergrundtext und seinem Hintergrund. Die Web Content Accessibility Guidelines (WCAG) 2.1 definieren minimale Kontrastverhältnisse, um sicherzustellen, dass Text für Menschen mit Sehbehinderungen lesbar ist. WCAG-Kontrastanforderungen: - Stufe AA (Minimum): 4,5:1 für normalen Text (unter 18pt/24px), 3:1 für großen Text (18pt+ fett oder 24pt+ normal) - Stufe AAA (verbessert): 7:1 für normalen Text, 4,5:1 für großen Text - Nicht-Text-Elemente (Symbole, UI-Komponenten): 3:1 gegenüber benachbarten Farben Wie das Kontrastverhältnis berechnet wird: Die Formel lautet: (L1 + 0,05) / (L2 + 0,05) Wobei L1 die relative Leuchtdichte der helleren Farbe ist und L2 die relative Leuchtdichte der dunkleren Farbe. Die relative Leuchtdichte wird berechnet, indem sRGB-Werte mithilfe der Gammakorrektur in lineares Licht umgewandelt werden. Das Kontrastverhältnis reicht von 1:1 (kein Kontrast, gleiche Farbe) bis 21:1 (maximaler Kontrast, Schwarz auf Weiß). Warum Kontrast wichtig ist: - 1 von 12 Männern hat eine Farbsehschwäche - Alterung verringert die Kontrastempfindlichkeit - Bildschirmnutzung im Freien erfordert höheren Kontrast - Menschen mit Sehbehinderung sind auf hohen Kontrast angewiesen - Gesetzliche Anforderungen: ADA, Section 508, EN 301 549 Das Tool akzeptiert Farbformateingaben in beliebiger Form und liefert Echtzeit-Feedback zu den Konformitätsstufen mit klaren visuellen Indikatoren für Bestehen/Nichtbestehen.
Wie zu verwenden
- Wählen Sie Ihre Vordergrundfarbe (die Textfarbe) mit dem Farbwähler, der Hex-Eingabe oder durch Einfügen eines beliebigen unterstützten Farbformats. Häufige Optionen sind dunkle Grautöne (#333333) oder Ihre Markenfarbe.
- Wählen Sie Ihre Hintergrundfarbe mit denselben Methoden. Dies könnte Weiß (#FFFFFF), ein helles Grau oder eine beliebige Hintergrundfarbe sein, die in Ihrem Design verwendet wird.
- Sehen Sie das berechnete Kontrastverhältnis deutlich hervorgehoben. Das Tool zeigt sowohl das numerische Verhältnis (z.B. 7,23:1) als auch visuelle Bestehen/Nicht-Bestehen-Indikatoren für jede WCAG-Stufe.
- Überprüfen Sie die WCAG-Konformitätsergebnisse: Das Tool zeigt an, ob Ihre Farbkombination die AA- und AAA-Stufen sowohl für normalen als auch für großen Text besteht. Grüne Indikatoren bedeuten bestanden, rote bedeuten nicht bestanden.
- Verwenden Sie die Schieberegler für Helligkeit/Dunkelheit, um Ihre Farben in Richtung Konformität zu bewegen, während Sie Ihre Designabsicht beibehalten. Visuelle Vorschauen zeigen, wie Ihr Text auf dem gewählten Hintergrund aussieht.
- Testen Sie schnell mehrere Farbvarianten, indem Sie mit der Schaltfläche "Tauschen" die Vorder- und Hintergrundfarben vertauschen. Kopieren Sie die endgültigen konformen Farbpaarwerte zur Verwendung in Ihrem CSS.
Beispiele
Eingabe: Vordergrund: #000000, Hintergrund: #FFFFFF
Prozess: L1=1.0, L2=0.0 → (L1+0.05)/(L2+0.05)
Ergebnis: Kontrastverhältnis: 21:1 (AAA bestanden für alle Größen)
Eingabe: Vordergrund: #767676, Hintergrund: #FFFFFF
Prozess: Relative Luminanz-Berechnung → Verhältnisformel
Ergebnis: Kontrastverhältnis: 4.54:1 (AA bestanden, AAA nicht bestanden für normalen Text)
Verwandte Suchen
Leute suchen auch nach: Farbkontrastprüfer, WCAG-Kontrast, Barrierefreiheitskontrast, Kontrastverhältnis.
FarbkontrastprüferWCAG-KontrastBarrierefreiheitskontrastKontrastverhältnis
Häufig gestellte Fragen
Was ist ein akzeptables Kontrastverhältnis für normalen Text?
Für normalen Text (unter 18pt fett oder 24px normal) erfordert WCAG 2.1 Level AA ein minimales Kontrastverhältnis von 4.5:1. Level AAA erfordert 7:1. Wenn Ihr Verhältnis unter 4.5:1 liegt, müssen Sie den Text abdunkeln oder den Hintergrund aufhellen. Ein Verhältnis von 7:1 oder höher erfüllt sowohl AA als auch AAA für normalen Text und bietet die beste Zugänglichkeit.
Ändert sich das Kontrastverhältnis für großen Text?
Ja. Großer Text (18pt fett oder größer, oder 24pt normal oder größer) hat niedrigere minimale Kontrastanforderungen: 3:1 für AA und 4.5:1 für AAA. Dies liegt daran, dass größerer Text auch bei geringerem Kontrast leichter lesbar ist. Wenn Ihr Text jedoch 4.5:1 erreicht, ist es sicherer, da Benutzer aufgrund von Browser-Zoom oder Geräteunterschieden möglicherweise nicht immer die erwartete Größe sehen.
Gibt es Ausnahmen von den WCAG-Kontrastanforderungen?
Ja. WCAG nimmt aus: 1) Logos und Markennamen (keine Kontrastanforderung). 2) Dekorativer Text, der keine Informationen vermittelt. 3) Inaktive/deaktivierte UI-Elemente. 4) Text in Fotos oder Bildern (obwohl alternativer Text bereitgestellt werden sollte). Wenn Text jedoch Informationen vermittelt, muss er unabhängig vom Kontext die Kontrastanforderungen erfüllen.
Kann ich einen halbtransparenten Hintergrund verwenden, um den Kontrast zu verbessern?
Ja, aber die Berechnung wird komplexer. Wenn Ihr Hintergrund halbtransparent ist und über einer anderen Farbe liegt, ist die effektive Hintergrundfarbe die Mischung. Das Tool ermöglicht es Ihnen, die Alpha-Transparenz zu berücksichtigen, indem es das gemischte Ergebnis anzeigt. Die endgültig wahrgenommene Farbe (nach Alpha-Compositing) ist für Kontrastberechnungen ausschlaggebend.
Wie wähle ich zugängliche Farben aus meiner Markenpalette?
Beginnen Sie mit Ihren Markenfarben entweder als Vordergrund oder Hintergrund und passen Sie dann die andere Farbe an, um die Konformität zu erreichen. Verwenden Sie den Helligkeitsregler: Wenn Ihre Markenfarbe dunkel ist, kombinieren Sie sie mit einem hellen Hintergrund; wenn sie hell ist, kombinieren Sie sie mit einem dunklen/grauen Text. Alternativ können Sie etwas dunklere oder hellere Nuancen Ihrer Markenfarbe verwenden, die die Markenidentität bewahren und gleichzeitig die Kontrastanforderungen erfüllen.