Unzureichender Kontrast zwischen Text und Hintergrund ist eine der Barrieren, die in Barrierefreiheits-Scans am häufigsten auftritt, und gleichzeitig einer der am leichtesten zu vermeidenden Fehler. Es läuft schief, wenn hellgrauer Text auf weißem Hintergrund steht, wenn Schaltflächen nur durch eine subtile Farbänderung sichtbar sind, oder wenn Platzhaltertext in einem Formulierfeld als einziger Hinweis darauf dient, was eingefüllt werden muss. Für Menschen mit einer Sehbeeinträchtigung, aber auch für jeden, der einen Bildschirm in greller Sonneneinstrahlung nutzt, wird der Text dann buchstäblich unlesbar.
WCAG 2.1, die Norm, auf die EN 301 549 verweist, schreibt für Level AA ein Mindestkontrasrverhältnis zwischen Text und dem Hintergrund vor, auf dem er steht: normalerweise 4,5 zu 1 für gewöhnlichen Text und 3 zu 1 für großen Text und für Bedienelemente wie Schaltflächen und Formulierrahmen. Das klingt technisch, aber der zugrunde liegende Gedanke ist einfach: Kontrast ist keine ästhetische Wahl, sondern eine Voraussetzung, um Informationen vermitteln zu können.
Wo es in der Praxis schief läuft
Kontrastprobleme entstehen selten absichtlich. Sie schleichen sich durch Gestaltungsrichtlinien ein, die auf einem großen, scharfen Bildschirm in einem Designstudio großartig aussehen, aber auf einem durchschnittlichen Bildschirm bei einem durchschnittlichen Benutzer knapp unter der Norm liegen. Hellgrauer Schaltflächentext auf einem Pastellfarbhintergrund ist ein klassisches Beispiel. Dasselbe gilt für Links, die nur durch einen Farbunterschied erkennbar sind, ohne Unterstreichung oder anderes visuelles Signal, wodurch Menschen mit Farbenblindheit sie einfach nicht als anklickbar wahrnehmen.
Ein anderes häufig auftauchendes Muster ist der Hover-Status: Eine Schaltfläche, die im Ruhezustand einwandfrei der Norm entspricht, sich aber beim Bewegen der Maus zu einer Farbkombination ändert, die nicht überprüft wurde. Auch Fehlermeldungen in Formularen sind ein häufiger Fehler: roter Text auf einem hellrotem Hintergrund sieht konsistent mit der Gestaltungsrichtlinie aus, erreicht aber oft die erforderliche Verhältnis nicht. Wer neugierig ist, wie diese Art von Barrieren in der eigenen Umgebung aussieht, kann das in wenigen Fragen sehen, wo Ihre Website steht ohne dafür zunächst ein Konto erstellen zu müssen.
Warum ein automatischer Scan dies teilweise, aber nicht vollständig löst
Kontrasrverhältnisse lassen sich gut automatisch messen: Ein Scanner liest die Farbwerte von Text und Hintergrund ab und berechnet das Verhältnis. Damit ist dies eines der wenigen WCAG-Kriterien, die ein Tool zuverlässig überprüfen kann. Was ein Scan nicht sieht, ist Kontrast, der erst nach einer Interaktion entsteht, wie ein aufklappendes Menü, ein Tooltip, das beim Fokus erscheint, oder ein Status, der erst nach einer Benutzeraktion sichtbar wird. Das ist genau der Grund, warum jeder Bericht angibt, welcher Teil automatisch überprüft wurde und welcher Teil manuelle Bewertung erfordert; Kontrast ist ein Stärkebereich der automatischen Überprüfung, aber nicht das komplette Bild.
Wie Sie das strukturell vermeiden
Die häufigste Methode, um dieses Problem dauerhaft zu vermeiden, ist, Kontrast auf der Ebene des Designsystems festzulegen, anstatt pro Seite. Wenn die Grundfarben einer Gestaltungsrichtlinie bereits bei der Festlegung gegen die Norm überprüft werden, muss dies ein Redakteur oder Entwickler nicht jedes Mal erneut kontrollieren. Das verhindert auch, dass eine neue Seite, ein zeitweiliges Aktions-Banner oder ein extern beschafftes Widget das Kontrasrverhältnis unbemerkt beeinträchtigt.
Es ist zudem ratsam, den Kontrast bei jeder visuellen Änderung der Website explizit zu berücksichtigen, nicht nur bei der ersten Übergabe. Eine Überarbeitung des Corporate Design, ein neues Saisonthema oder ein angepasster Buttonstil kann ein Problem einführen, das in der vorherigen Version nicht vorhanden war. Barrierefreiheit ist in diesem Sinne kein Häkchen, das Sie einmalig setzen, sondern ein Aspekt, der bei der Wartung mitläuft. Mehr darüber, wie eine solche laufende Kontrolle in der Praxis funktioniert, erfahren Sie unter eine Erklärung, woher die Bewertung stammt.
Abschließend lohnt es sich, nicht nur auf die Mindestnorm zu schauen, sondern auf den Zweck dahinter: Kann jeder, auch unter weniger idealen Lichtverhältnissen oder auf einem älteren Bildschirm, den Text und die Schaltflächen tatsächlich unterscheiden. Häufig gestellte Zweifelsfälle, wie beispielsweise ob ein Logo oder ein dekoratives Bild die Kontrastanforderung erfüllen muss, sind auf der Seite mit Antworten auf Fragen, die häufiger gestellt werden.
ausgearbeitet. Möchten Sie wissen, ob Kontrast und die anderen wiederkehrenden Probleme auch in Ihrer eigenen Umgebung auftreten? Der kostenlose Quick-Scan gibt dazu einen ersten Hinweis, und die Wissensdatenbank mit Themen für jede Situation ausgewählt zeigt, wie diese Frage mit den übrigen Verpflichtungen der Richtlinie (EU) 2019/882 zusammenhängt.