Farbkontrast ist nicht nur eine Designfrage – er ist eine rechtliche und nutzerfreundliche Anforderung. Gemäß den WCAG 2.1 AA Richtlinien und deutschen Barrierefreiheitsgesetzen wie der BITV 2.1 müssen Websites bestimmte Kontrastverhältnisse einhalten, um Inhalte für Nutzer mit Sehbeeinträchtigungen lesbar zu machen. Was ist Farbkontrast? Farbkontrast bezeichnet den Unterschied in der Leuchtdichte zwischen Text (oder UI-Elementen) und dem Hintergrund. Schlechter Kontrast erschwert das Lesen – besonders für Menschen mit Sehschwäche oder Farbenblindheit. Gesetzliche Anforderungen an den Kontrast Um WCAG 2.1 AA (und damit BITV 2.1 / EAA in Deutschland) zu erfüllen: Normaler Text muss ein Kontrastverhältnis von mindestens 4,5:1 aufweisen Großer Text (18pt oder 14pt fett) benötigt mindestens 3:1 UI-Komponenten (Buttons, Formularfelder) müssen dieselben Regeln befolgen Es darf nicht ausschließlich auf Farbe zur Informationsvermittlung gesetzt werden Warum ist das wichtig? Mobile Nutzer haben oft Probleme mit Blendung und schlechten Lichtverhältnissen – Kontrast verbessert die Lesbarkeit. Menschen mit Sehbeeinträchtigungen (wie Katarakt oder Farbenblindheit) sind auf klaren Kontrast angewiesen. Rechtliche Nicht-Einhaltung kann zu Bußgeldern und Klagen führen. Tools zur Überprüfung des Kontrasts Nutze diese Tools, um deine Website zu messen und zu optimieren: WebAIM Contrast Checker Color Contrast Analyzer (TPG) axe DevTools Chrome Extension Best Practices Verwende dunkle Schrift auf hellem Hintergrund oder umgekehrt. Platziere keinen Text direkt über Bildern, außer das Bild ist unscharf oder abgedunkelt. Teste mit echten Nutzern – auch mit Farbenblinden.