Webstandards/Farben und Kontraste

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ohne Zweifel stehen Sehbehinderte und Blinde vor den größten Barrieren, wenn sie mit dem Computer arbeiten und damit auch ins Internet wollen. Dies liegt daran, dass sie sich spezieller Hilfsprogramme wie Screenreader oder Bildschirmlupen (Screen magnifier) bedienen müssen. Aber auch Benutzer, die keine solchen technischen Hilfen benötigen, leiden häufig unter nicht optimal ausgesuchten Farben und zu geringen Kontrasten.

Die Gründe für solch einen Mangel an Benutzerfreundlichkeit liegen zum Teil an den individuellen Einschränkungen der Sehfähigkeit der Benutzer, weitaus häufiger aber an der suboptimalen Darstellung auf älteren Monitoren, kleinen Bildschirmen von Mobilgeräten gekoppelt mit schlechten Lichtverhältnissen bzw. übermäßiger Sonnenstrahlung am Standort des Benutzers:

Lichtverhältnisse verschiedener Geräte

Inhaltsverzeichnis

[Bearbeiten] Kontrast

Die W3C fordert einen ausreichend hohen Kontrast (lat für. Unterschied) zwischen Text und Hintergund, damit er auch von Benutzern mit eingeschränkten Sehfähigkeiten erkannt werden kann.[1] Die Fähigkeit Texte mit geringen Kontrasten entziffern zu können, nimmt mit fortschreitendem Alter rapide ab. Auch wenn Texte mit ähnlichen Helligkeitswerten von Text und Hintergrund noch gelesen werden können, steigt doch die Lesedauer. Im Extremfall wandern Benutzer von der Webseite ab, ohne den gesamten Inhalt gelesen zu haben.

Viele Webdesigner versuchen in ihrem Farbkonzept eine perfekt farblich abgestimmte Webseite zu erstellen, vernachlässigen dabei jedoch die gute Lesbarkeit:

Lesbarkeit

Empfehlung: Testen Sie Ihre Webseiten, ob diese einen ausreichenden Kontrast besitzen:

[Bearbeiten] Farben

Es leuchtet den meisten ein, dass rote Schrift auf grünem Hintergrund schwieriger zu erkennen ist als gelb auf blau oder schwarz auf weiß. Bei der Gestaltung von Webseiten sollte die Auswahl der Farben bestimmten Kriterien entsprechen.

  • Die Farben sollten sich komplementär ergänzen. Eine Farbpalette aus aufeinander abgestimmten Farben wirkt sympathischer und stimmiger.
Empfehlung: Nutzen Sie online-Tools zur Auswahl einer Farbpalette:
  • Text und Hintergrund sollten einen hohen Kontrast aufweisen, um eine Überanstrengung der Augen zu vermeiden und die Aufmerksamkeit auf den Text zu lenken:

Beispiel für Kontraste

Beachten Sie: Komplementärfarben mit hohem Kontrast bewirken nicht automatisch eine gute Lesbarkeit, wenn eine der Farben zu grell wirkt.

Beispiel für Lesbarkeit

[Bearbeiten] Farbenfehlsichtigkeit

https://de.wikipedia.org/wiki/Rot-Gr%C3%BCn-Sehschw%C3%A4che

Auch die Farbwahrnehmung unterscheidet sich; Schätzungen besagen, dass bei 8 bis 10% der Männer eine Rot-Grün-Schwäche bis hin zur Rot-Grün-Blindheit vorliegt. [2] Menschen mit einer solchen Einschränkung haben Schwierigkeiten, zwischen bestimmten Farbtönen zu differenzieren, da die Zapfen für die Erkennung von roten, bzw. grünen Farben fehlen. Die beiden Farben werden nur als unterschiedliche Abstufungen von Brauntönungen erkannt.

Empfehlung: Sie sollten Rot und Grün nicht als kritische Erkennungsmerkmale einsetzen und Ihre Seiten bei der Gestaltung immer von einem Farbblinden oder einem Colorblind Web Page Filter Analyzer überprüfen lassen.

Verwenden Sie lieber Helligkeitsabstufungen gegenüber Farbvariationen, da diese von Rot-Grün-Sehschwachen oft besser wahrzunehmen sind.

Viel seltener ist die Gelb-Blau-Sehschwäche, bei der die Rezeptoren für Blau fehlen.

[Bearbeiten] Strategien zur Barrierefreiheit

[Bearbeiten] Einstellungen der Benutzer

Sie (und die Benutzer Ihrer Webseiten) können Betriebsystem und Browser auf kontrastreiche Einstellungen umschalten.[3]

Beachten Sie: Bei einer kontrastreichen Ansicht werden Hintergrundbilder nicht angezeigt. Legen Sie alternativ zu Hintergrundbildern immer eine passende Hintergrund-Farbe bereit. So ist der Text trotzdem noch sichtbar.
Beispiel
p {
  background-color: black;
  background-image: url(...);
  color: white;
}

[Bearbeiten] responsive Anpassung an Lichtverhältnisse

Auch von Seiten der W3C und der Browser-Hersteller wird versucht, die aktuellen Lichtverhältnisse zu brücksichtigen. Mit dem light-level in media queries und dem lightingDevice-Event überprüft der Helligkeitssensor der Kamera die Lichtverhältnisse und ermöglicht dann eine Anpassung der Farbeinstellungen der Webseite.[4]


[Bearbeiten] Wie testet man die Seite auf Barrierefreiheit?

Um eine erste Einschätzung der Barrierefreiheit zu bekommen, empfiehlt sich ein einfacher Test mit Ihrem Browser. In den Einstellungen von Standard-Browsern gibt es die Möglichkeit, die Anzeige von Grafiken auszuschalten. Wenn sich Ihre Webseiten auch bei ausgeschalteter Grafikfunktion des Browsers ohne Informationsverlust lesen lassen, können Webseiten auch von blinden und sehbehinderten Menschen genutzt werden.


[Bearbeiten] Farbinvertierungs-Test

In den Optionen für die Bildschirmdarstellung im Browser können Sie die Farbanzeige selbst einstellen. Wenn Sie als Extremfall die Farben auf Text = "weiß", Hintergrund = "schwarz" und Links = "gelb" einstellen, und dabei die Option zur Unterdrückung der Farben der Webseite aktivieren, dann muss die Seite noch lesbar sein.

[Bearbeiten] Siehe auch

[Bearbeiten] Quellen

  1. W3C: Web Content Accessibility Guidelines
  2. wikipedia: Rot-Grün-Sehschwäche
  3. Sozialnetz Hessen: Einfach Surfen - So macht Ihr Browser, was Sie wollen
  4. MDN: Using Lighting Events

[Bearbeiten] Weblinks


Analyzer:


Web-Interface für alle Screen Reader:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML