Farbkontrast-Prufer
Über dieses Werkzeug
Die Kontrastprüfung ist der Prozess der Messung des Helligkeitsunterschieds zwischen Vordergrund- und Hintergrundfarben, um festzustellen, ob Text für alle Nutzer lesbar bleibt, einschließlich solcher mit Sehbehinderungen. Die Web Content Accessibility Guidelines (WCAG), entwickelt vom World Wide Web Consortium (W3C), legen den internationalen Standard für digitale Barrierefreiheit fest und definieren spezifische Kontrastschwellenwerte, die jede Website und Anwendung einhalten sollte. WCAG 2.2 definiert zwei Konformitätsstufen für den Kontrast. Stufe AA, der Mindeststandard, der von den meisten Barrierefreiheitsgesetzen gefordert wird, verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt normal oder 14pt fett). Stufe AAA, der erweiterte Standard für Regierungs-, Gesundheits- und Bildungsinhalte, erfordert 7:1 für normalen Text und 4,5:1 für großen Text. Diese Schwellenwerte basieren auf Forschungen darüber, wie Menschen mit maessig eingeschraenktem Sehvermoegen Bildschirminhalte wahrnehmen. Barrierefreiheit ist in vielen Ländern auch eine gesetzliche Pflicht. Der Americans with Disabilities Act (ADA) in den USA, Section 508 des Rehabilitation Act und die europaeische Norm EN 301 549 schreiben vor, dass digitale Inhalte für Menschen mit Behinderungen wahrnehmbar sein müssen. Nichtkonformität kann zu Klagen, Geldstrafen und dem Ausschluss eines erheblichen Teils Ihres Publikums führen. Dieses Tool berechnet Kontrastverhältnisse, indem sRGB-Farbwerte in lineares RGB umgewandelt, die relative Leuchtdichte mit den ITU-R BT.709 Koeffizienten berechnet und die WCAG-Formel (L1 + 0,05) / (L2 + 0,05) angewendet wird. Es bietet außerdem eine Farbenblindheitssimulation für Protanopie, Deuteranopie und Tritanopie, damit Designer überprüfen können, ob ihre Farbwahl für die geschaetzten 300 Millionen Menschen mit Farbsehschwaeche funktioniert. Alle Berechnungen laufen lokal in Ihrem Browser.
Anleitung
- Geben Sie Ihre Text- (Vordergrund-) und Hintergrundfarben mit den Farbwahlern oder HEX-Codes ein.
- Prüfen Sie das Kontrastverhältnis und die WCAG-Konformitatsergebnisse. Grun bedeutet bestanden, rot fehlgeschlagen.
- Verwenden Sie die Farbenblindheitssimulation, um zu überprüfen, ob Ihre Farben für Benutzer mit Sehbehinderungen funktionieren.
Anleitung
- Geben Sie Ihre Text- (Vordergrund-) und Hintergrundfarben mit den Farbwahlern oder HEX-Codes ein.
- Prüfen Sie das Kontrastverhältnis und die WCAG-Konformitatsergebnisse. Grun bedeutet bestanden, rot fehlgeschlagen.
- Verwenden Sie die Farbenblindheitssimulation, um zu überprüfen, ob Ihre Farben für Benutzer mit Sehbehinderungen funktionieren.
Methodik
Die Kontrastverhältnisberechnung folgt dem WCAG 2.2 Algorithmus präzise. Zuerst wird der Hex-Code jeder Farbe in seine Rot-, Grün- und Blaukomponenten zerlegt, die dann auf Werte zwischen 0 und 1 normalisiert werden, indem durch 255 geteilt wird. Diese linearen Werte durchlaufen eine Gammakorrektur mit der sRGB-Transferfunktion: Werte bei oder unter 0,03928 werden durch 12,92 geteilt, während größere Werte die Formel ((Wert + 0,055) / 1,055) hoch 2,4 verwenden. Diese Gammakorrektur berücksichtigt die nichtlineare Art, wie Displays Licht emittieren. Anschliessend wird die relative Leuchtdichte mit den ITU-R BT.709 Koeffizienten berechnet: L = 0,2126R + 0,7152G + 0,0722B. Diese Gewichtungen spiegeln die unterschiedliche Empfindlichkeit des menschlichen Auges für jede Primärfarbe wider, wobei Grün am meisten zur wahrgenommenen Helligkeit beitraegt. Das endgültige Kontrastverhältnis wird als (L1 + 0,05) / (L2 + 0,05) berechnet, wobei L1 die Leuchtdichte der helleren Farbe ist. Die Ergebnisse reichen von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß). Das Tool bewertet dieses Verhältnis dann gegen die AA- und AAA-Schwellenwerte sowohl für normalen als auch für großen Text und liefert ein klares Bestanden- oder Fehlgeschlagen-Ergebnis für jede Konformitätsstufe.
Ihre Ergebnisse verstehen
Ein Kontrastverhältnis von 4,5:1 oder höher erfüllt WCAG AA für normalen Text, den Standard, den die meisten Websites anstreben sollten. Ein Verhältnis von 3:1 erfüllt AA für großen Text (18pt normal oder 14pt fett und größer) und reicht auch für UI-Komponenten wie Formulargrenzen, Symbole und Fokus-Indikatoren. Für die erweiterte AAA-Stufe benötigen Sie 7:1 für normalen Text und 4,5:1 für großen Text. Wenn das Tool "Fehlgeschlagen" zeigt, bedeutet dies, dass Benutzer mit maessigen Sehbehinderungen Schwierigkeiten beim Lesen haben könnten. Um den Kontrast zu verbessern und gleichzeitig die Markenidentität zu bewahren, versuchen Sie, eine Farbe schrittweise abzudunkeln oder aufzuhellen, anstatt sie vollständig zu ersetzen. Oft reicht eine Änderung von nur 10-15% der Helligkeit aus, um den Schwellenwert zu überschreiten. Häufige Fallstricke sind hellgrauer Platzhaltertext, dünne Schriftstaerken die den wahrgenommenen Kontrast verringern und das Übersehen des Kontrasts deaktivierter Elemente. Die Ergebnisse der Farbenblindheitssimulation sind ebenso wichtig. Selbst wenn Ihre Farben die Kontrastprüfung bestehen, können sie für Benutzer mit Farbsehschwaeche ununterscheidbar werden. Ein roter Button auf grünem Hintergrund könnte ausreichend Kontrast für normales Sehen haben, aber für jemanden mit Deuteranopie nahezu identisch erscheinen. Überprüfen Sie immer Ihr Design über alle simulierten Sehtypen hinweg und verwenden Sie zusätzliche Hinweise wie Symbole, Muster oder Textbeschriftungen.
Praktische Beispiele
Ein Startup, das seine Marketing-Website neugestaltet, testet seine Markenfarben (#2563EB blauer Text auf #F8FAFC hellgrauem Hintergrund) und findet ein Kontrastverhältnis von 5,2:1, das AA besteht aber AAA nicht. Sie verdunkeln das Blau zu #1D4ED8, erreichen 7,1:1 und erfüllen beide Standards, ohne ihre Markenidentität wesentlich zu ändern. Ein Entwickler einer Gesundheits-App überprüft das Styling seiner Fehlermeldungen (roter Text auf weiß) und stellt fest, dass #EF4444 auf #FFFFFF nur 3,9:1 erreicht und sogar AA für normalen Text nicht besteht. Die Farbenblindheitssimulation zeigt, dass es auch für Protanopie-Benutzer schwach erscheint. Sie wechseln zu #DC2626 und fuegen ein Warnsymbol hinzu. Ein UI-Designer validiert, dass alle Button-Labels, Formularränder und Fokus-Indikatoren in einer Komponentenbibliothek mindestens die 3:1-Anforderung für Nicht-Text-Elemente erfüllen, während der Fliesstext den vollständigen AA-Schwellenwert von 4,5:1 erreicht.
Praktische Tipps für barrierefreies Design
Beginnen Sie mit der Wahl kontrastreicher Farbpaare und bauen Sie dann Ihre Palette darum herum auf. Streben Sie mindestens 7:1 Kontrast für Fliesstext an, auch wenn nur AA (4,5:1) erforderlich ist, da dies einen komfortablen Sicherheitsabstand bietet. Verlassen Sie sich nie allein auf Farbe, um Informationen zu vermitteln. Verwenden Sie Symbole, Unterstreichungen oder Textbeschriftungen als sekundaere Indikatoren, damit farbenblinde Nutzer nicht ausgeschlossen werden. Testen Sie Ihre Designs im Graustufen-Modus, um Kontrastprobleme schnell zu erkennen. Wenn Elemente ohne Farbe verschwinden oder verschmelzen, ist der Kontrast unzureichend. Überprüfen Sie immer sowohl den hellen als auch den dunklen Modus. Dunkle Themes haben oft einen geringeren effektiven Kontrast, besonders bei farbigem Text auf dunklem Hintergrund. Prüfen Sie Hover- und Fokus-Zustände separat, da diese interaktiven Zustände manchmal hellere Farben verwenden, die die Anforderungen nicht erfüllen. Installieren Sie Barrierefreiheits-Browsererweiterungen wie axe DevTools oder WAVE, um ganze Seiten zu prüfen, und kombinieren Sie die Kontrastprüfung mit Farbenblindheitssimulation für umfassende Abdeckung.
Quellen
Alle Berechnungen werden lokal in Ihrem Browser durchgeführt. Es werden keine Daten an Server gesendet.