Tipp 2 für Digitale Barrierefreiheit: Farbliche Gestaltung beachten


Die Farbgestaltung sollte niemals das einzige Mittel sein um eine Information zu transportieren.

Der Klassiker ist sicherlich: grün = richtig, rot = falsch. Zum Beispiel ein grün markierter Text soll veranschaulichen, dass die Information, die in dem Text steckt, richtig ist. Ein rot markierter Text soll veranschaulichen, dass die Information, die in dem Text steckt, falsch ist.

Für Menschen mit Rot-Grün-Sehschwäche wird diese Darstellung zum Problem.

Was können Sie tun?

Nutzen Sie niemals Farben als einziges Gestaltungsmittel um Informationen zu transportieren. Verwenden Sie stattdessen z.B. eine Kombination aus Farbe und Symbol um die entsprechende Information zu transportieren. Beispielsweise vor dem Text, der eine Falschinformation darstellen soll, könnte ein rotes Kreuz stehen. Vor dem Text, der eine richtige Information darstellen soll, könnte ein grünes Häkchen stehen.

Grafik zeigt links ein Beispiel wie "Farbe als alleiniger Informationsträger"  genutzt wird, indem einzelne Listenpunkte in einer Aufzählung rot oder grün markiert sind. Rechts auf der Grafik ist dargestellt wie "Information über zwei Wege (Farbe & Symbol)" dargestellt werden kann, indem vor den Listenpunkten einer Aufzählen ein grünes Häkchen oder ein rotes Kreuz dargestellt ist.
Abbildung: HD@DH.nrw (https://barrierefreiheit.dh.nrw/barrierefreiheit/tipps-zur-digitalen-barrierefreiheit/checkliste/universal-design-for-learning-udl)

Achten Sie auch an folgenden Stellen darauf, dass eine Kenntlichmachung nicht ausschließlich durch Farbe erfolgt:

  • bei Überschriften und Links in einem Text
    • z.B. Überschriften haben zusätzlich eine andere Schriftart oder –größe,
    • Links werden unterstrichen oder zusätzlich mit einem weiteren Symbol (z.B. Pfeil) dargestellt
  • bei Pflichtfeldern und Fehlermeldungen in Formularen
    • Pflichtfelder sind häufig zusätzlich mit einem Sternchen markiert
    • Fehlermeldungen könnten mit einem zusätzlichen Symbol (z.B. Ausrufezeichen) versehen werden
  • bei ausgewählten Menüeinträgen auf einer Website
    • der ausgewählte Menüpunkt wird zusätzlich unterstrichen oder mit einem Symbol versehen

Damit bauen Sie nicht nur Barrieren für Menschen mit Farbfehlsichtigkeit ab, sondern auch für Alle, die beispielsweise einen E-Book-Reader in Graustufen zum Lesen nutzen.

Eine gute Veranschaulichung zu Farbsehschwächen

finden Sie unter „An Alle(s) gedacht? – Farbsehschwäche“ – eine Kampagne zu Digitaler Barrierefreiheit auf dem HessenHub-Blog (Netzwerk digitale Hochschullehre Hessen).

Weitere Informationen zu Digitaler Barrierefreiheit

Foto mit Collage: Studierende sitzen im Computerraum, im oberen Bereich 7 Piktogramme mit Darstellungen zu: Schriftgröße, Brailleschrift, Gehirn, Hände, die Gebärdensprache machen, Ohr, Auge, Symbol für Digitale Barrierefreiheit
Quelle Originalbild: https://unsplash.com/photos/man-in-black-jacket-sitting-beside-black-flat-screen-computer-monitor-rWE7bTqgMJE

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert