Farben und Kontraste

Anforderung gemäß BITV/EN 301 549
9.1.4 Nutzerinnen und Nutzern ist die Wahrnehmung des Inhalts und die Unterscheidung zwischen Vorder- und Hintergrund so weit wie möglich zu erleichtern.

Ausschließlich über Farben vermittelte Informationen sind für blinde Benutzer nicht zugänglich. Auch farbfehlsichtige Benutzer können Farben nicht oder nur eingeschränkt identifizieren und unterscheiden. Sie verstehen deshalb nicht, welche Information über eine (veränderte) Farbe transportiert wird. Es ist eine zusätzliche Hervorhebung nötig.

Eine Webseite mit guten Kontrasten hilft nicht nur seheingeschränkten Menschen, sondern ist für alle nutzerfreundlicher. Farbentscheidungen trifft in der Regel die Webagentur, manchmal binden Sie als Redakteur jedoch eine Grafik ein. Denken Sie dann an gute Farbkontraste.

Wie umsetzen?

Farbe als Informationsträger

Achten Sie darauf, Information nicht nur über Farbe zu vermitteln. Dies könnte zum Beispiel ein Schaubild mit unterschiedlichen Kurven betreffen: Die Kurven sollten sich nicht nur über die Farbe unterscheiden, sondern auch dadurch, dass eine Kurve beispielsweise gestrichelt, die andere gepunktet dargestellt wird.

Gute Farbkontraste

Falls Sie Grafiken einbinden, achten Sie auf ausreichende Kontraste. Ähneln sich Vordergrund- und Hintergrundfarbe in der Helligkeit, haben sie womöglich zu wenig Kontrast. Hier sind keine Fotos gemeint, sondern Symbole, Schaubilder oder Diagramme.

Nochmals testen?

Sie können die Qualität von Kontrasten mit dem Colour Contrast Analyser überprüfen. Laden Sie sich das kostenfreie Tool herunter und wählen Sie im Bereich Foreground mit der Pipette die Vordergrundfarbe aus, dann im Bereich Background die Hintergrundfarbe. Das Kontrastverhältnis sollte über 4,5:1 liegen, damit die Anforderung erfüllt und der Kontrast für seheingeschränkte Menschen wahrnehmbar ist.

Tiefergehende Informationen

Wer mehr erfahren möchte, dem empfehlen wir den Artikel Barrierefreie Kontraste (11/2020).