Kontrast-Verhältnis

Das Kontrastverhältnis ist das Verhältnis zwischen der Helligkeit der hellsten und der dunkelsten Farbe, die auf einer Webseite nebeneinander angezeigt werden. Das Verhältnis wird in einer Zahl ausgedrückt, z. B. 4,5:1 oder 7:1. Je höher die Zahl ist, desto größer ist der Unterschied zwischen den Farben und desto besser ist die Lesbarkeit. Für Text auf einer Website beträgt das Mindestkontrastverhältnis 4,5:1 für normalen Text und 3:1 für großen Text gemäß der internationalen Zugänglichkeitsrichtlinie WCAG 2.1. Ohne ausreichenden Kontrast können Besucher mit Sehschwäche, Farbenblindheit oder älteren Menschen Ihren Text nicht lesen, egal wie gut Ihr Inhalt ist.

Wie das Kontrastverhältnis berechnet und angewendet wird

Die Berechnung des Kontrastverhältnisses erfolgt nach einer bewährten Formel, bei der die relative Leuchtdichte zweier Farben verglichen wird. Die hellste Farbe erhält dabei immer die höchste Zahl im Verhältnis. Ein Kontrastverhältnis von 21:1 ist der maximale Kontrast zwischen reinem Weiß und reinem Schwarz. Ein Verhältnis von 1:1 bedeutet, dass beide Farben identisch und damit unlesbar sind. Für Webdesigner und Entwickler gibt es Tools wie den WebAIM Contrast Checker oder integrierte Funktionen in Figma und Adobe XD, die sofort zeigen, ob eine Farbkombination zufriedenstellend ist. Achten Sie bei der Gestaltung von Schaltflächen, Formularen und Navigationselementen nicht nur auf den Text, sondern auch auf Symbole, Rahmen und Fokusindikatoren. Ein häufiger Fehler ist, dass Designer nur mit perfekten Bildschirmen in einem gut beleuchteten Raum testen, während Besucher Ihre Website auch auf einem Smartphone in hellem Sonnenlicht betrachten.

Warum das Kontrastverhältnis zu einer rechtlichen und geschäftlichen Norm wurde

Die Richtlinien für das Kontrastverhältnis entstanden im Rahmen des W3C-Programms für Zugänglichkeitsrichtlinien für Webinhalte , das seit 1999 an Standards für barrierefreies Web arbeitet. In Deutschland gilt die europäische Zugänglichkeitsrichtlinie seit 2018 für staatliche Websites und ab 2025 für viele kommerzielle Websites größerer Unternehmen. Aber auch ohne gesetzliche Verpflichtung hat ein ausreichendes Kontrastverhältnis einen direkten geschäftlichen Nutzen. Besucher, die Ihren Text nicht lesen können, werden wegklicken, kein Formular ausfüllen oder einen Anruf tätigen. Untersuchungen von WebAIM zeigen, dass etwa 86 % der Homepages großer Websites immer noch eine Kontrastverzerrung aufweisen. Das bedeutet, dass Sie mit einem guten Kontrastverhältnis bereits die meisten Ihrer Konkurrenten übertreffen können, ohne dass dies zusätzliche Kosten verursacht.

Was das Kontrastverhältnis für Ihre Website und die Konversion bringt

Ein korrektes Kontrastverhältnis verbessert nicht nur die Barrierefreiheit, sondern auch das Nutzererlebnis für alle Besucher. Ein gut lesbarer Text sorgt für niedrigere Absprungraten, eine längere Sitzungsdauer und eine höhere Konversion. Wenn Sie eine Website erstellen lassen oder neu gestalten, ist das Kontrastverhältnis eine der wenigen Designentscheidungen, die messbare Auswirkungen haben, ohne dass der Inhalt neu geschrieben werden muss. In der Praxis sehen wir bei KMU-Kunden, dass vor allem Call-to-Action-Buttons und Formularfelder oft keinen Kontrast zum Hintergrund haben. Die Anpassung der Farbe einer Schaltfläche von Hellgrau auf Dunkelblau kann die Zahl der ausgefüllten Kontaktformulare um 15-20 % erhöhen. Darüber hinaus schneidet eine Website mit ausreichendem Kontrast bei Zugänglichkeitsprüfungen besser ab, was zu Ihrem Ranking in Google und Ihrem Ruf als vertrauenswürdig beiträgt.

Das Kontrastverhältnis spielt in fast allen Bereichen Ihrer Website eine Rolle, in denen Text, Icons oder interaktive Elemente erscheinen. Im Folgenden finden Sie vier konkrete Situationen, in denen Sie das Kontrastverhältnis aktiv überwachen und anwenden sollten, um sowohl die Barrierefreiheit als auch die Konversion zu verbessern.

Text auf den Bildern und Heldenabschnitten

Eine häufige Situation ist ein großes Heldenbild mit einer Überschrift und einem Aufruf zum Handeln darüber. Wenn das Hintergrundbild helle und dunkle Bereiche enthält, kann der Text an manchen Stellen unleserlich werden. Auch wenn Sie ein Overlay verwenden, sollten Sie darauf achten, dass das Kontrastverhältnis überall über 4,5:1 liegt. In der Praxis sehen wir, dass KMU oft ein schönes Markenbild wählen, aber vergessen, dass der Text auf dem Handy schmaler wird und daher über einen anderen Teil des Bildes fällt. Eine Lösung ist ein dunkles Overlay mit mindestens 60 % Deckung oder ein fester Bereich hinter dem Text. Bei der Erstellung eines Online-Shops ist dies besonders wichtig, da Produktfotos mit Preis- und Rabattangaben sonst auf kleineren Bildschirmen nicht mehr lesbar sind.

Formulare und Eingabefelder

Formulare sind ein wichtiger Konversionspunkt, aber Platzhaltertext und Beschriftungen sind oft nicht kontrastreich genug. Graue Standardplatzhalter in Eingabefeldern haben manchmal ein Kontrastverhältnis von nur 2:1, was weit unter der Norm liegt. Das macht es schwierig zu erkennen, welches Feld ausgefüllt werden muss, besonders für ältere Besucher oder solche mit Sehschwächen. Achten Sie darauf, dass die Beschriftungen immer in einer dunklen Farbe gehalten sind und dass Fehlermeldungen nicht nur in Rot, sondern auch mit einem klaren Symbol und ausreichendem Kontrast angezeigt werden. Ein praktisches Beispiel: Ein B2B-Dienstleister mit einem Formular für ein Angebot konnte die Zahl der Eingaben um 18 % steigern, indem er den Beschriftungstext von hellgrau auf schwarz und die Schaltfläche von pastellblau auf dunkelblau umstellte. Dabei handelt es sich nicht um größere Designänderungen, sondern um direkte Umsatzsteigerungen.

Navigation und interaktive Elemente

Menüs, Schaltflächen und Links sollten nicht nur im Standardzustand, sondern auch im Hover-, Fokus- und Aktiv-Zustand einen ausreichenden Kontrast aufweisen. Ein häufiger Fehler ist, dass der Fokusindikator um eine Schaltfläche oder einen Link zu hell ist, so dass Tastaturbenutzer nicht sehen können, wo sie sich in der Navigation befinden. Dies ist nicht nur ein Zugänglichkeitsproblem, sondern auch ein Problem der Benutzerfreundlichkeit für alle, die mit der Tabulatortaste auf Ihrer Website navigieren. Überprüfen Sie daher auch die ARIA-Labels und stellen Sie sicher, dass das Kontrastverhältnis von Rahmen, Unterstreichungen und Hintergrundfarben angemessen ist. Bei einer Website mit vielen Seiten oder einem Webshop mit Filtern ist dies Teil einer soliden SEO-Strategie, da Google die Barrierefreiheit in seinem Ranking berücksichtigt.

Wann ist das Kontrastverhältnis die richtige Wahl und wann nicht?

Das Kontrastverhältnis ist immer dann relevant, wenn Sie Text, Icons oder interaktive Elemente auf Ihrer Website haben, also eigentlich für jede Website. Es gibt jedoch Situationen, in denen Sie sich bewusst für ein niedrigeres Kontrastverhältnis entscheiden, z. B. für dekorative Elemente, Wasserzeichen oder Hintergrundmuster, die keine informative Funktion haben. In diesen Fällen müssen Sie die 4,5:1-Norm nicht einhalten. Achten Sie darauf, dass Sie wesentliche Informationen wie Preise, Geschäftsbedingungen oder Anleitungen nicht in einem niedrigen Kontrastverhältnis platzieren. Im Zweifelsfall: Testen Sie Ihr Design mit einem Kontrastprüfprogramm und lassen Sie mindestens zwei Personen außerhalb Ihres Teams die Website auf verschiedenen Geräten und bei unterschiedlichen Lichtverhältnissen betrachten. Auf diese Weise vermeiden Sie, dass Ihr schönes Design für einen Teil Ihrer Zielgruppe unbrauchbar wird.