Finder für zugängliche Farbpaare

Die WCAG (Web Content Accessibility Guidelines) definiert minimale Kontrastverhältnisse zwischen Text und Hintergrundfarbe, um Lesbarkeit für Menschen mit Sehbehinderungen sicherzustellen. Das Kontrastverhältnis reicht von 1:1 (kein Kontrast) bis 21:1 (maximal, schwarz auf weiß). Die Ebene AA erfordert 4,5:1 für normale Textgröße und 3:1 für große Textgröße (18pt oder 14pt fett und höher). Die Ebene AAA erfordert 7:1 für normale Textgröße. Die Einhaltung dieser Standards stellt sicher, dass deine Website etwa 1 von 12 Männern und 1 von 200 Frauen mit Farbsehbehinderung sowie Menschen mit geringer Sehschärfe zugänglich ist.

AA ist die empfohlene Mindeststufe der Zugänglichkeit und erfordert ein Kontrastverhältnis von 4,5:1 für normale Textgröße und 3:1 für große Textgröße (18pt oder 14pt fett und höher). AAA ist die höchste Stufe, die 7:1 für normale Textgröße und 4,5:1 für große Textgröße erfordert. Die meisten Organisationen zielen auf AA-Konformität ab, da dies eine gute Zugänglichkeit bietet und eine angemessene Designflexibilität ermöglicht. AAA ist ideal für kritische Inhalte wie Körpertext auf Regierungs- oder Gesundheitsseiten. Große Texte haben geringere Anforderungen, da größere Zeichen automatisch leichter lesbar sind.

Der relative Helligkeitswert misst die wahrgenommene Helligkeit einer Farbe auf einer Skala von 0 (schwarz) bis 1 (weiss). Die WCAG-Formel konvertiert zunächst sRGB-Werte (0–255) in lineare RGB-Werte, indem man durch 255 teilt und eine Gamma-Korrektur anwendet. Für Werte unter oder gleich 0,04045 wird durch 12,92 geteilt. Für höhere Werte wird 0,055 addiert, durch 1,055 geteilt und dann auf die Potenz 2,4 erhoben. Der endgültige Helligkeitswert ergibt sich aus 0,2126 mal Rot plus 0,7152 mal Grün plus 0,0722 mal Blau. Diese Gewichte spiegeln die menschliche Wahrnehmung wider, wobei Grün den größten Anteil hat.

Ja. Gib deine Markenhintergrundfarbe ein und das Tool zeigt alle Textfarben an, die die Zugänglichkeitsstandards erfüllen. Dies ist besonders nützlich bei der Entwicklung oder Neuorientierung deiner Marke, wenn du sicherstellen musst, dass deine Farbpalette für zugängige Webdesigns geeignet ist. Du kannst auch bestehende Markenfarbkombinationen prüfen, um sicherzustellen, dass sie die WCAG-Anforderungen erfüllen. Die CSS-Export-Funktion ermöglicht es dir, zugängige Kombinationen direkt in deine Stylesheets zu kopieren, was die Entwicklungzeit spart und die Einhaltung von Anfang an gewährleistet.