Grafik/Farbkonzept/Farben und Kontraste

Text-Info

20min

einfach

Grundkenntnisse in
● HTML
● CSS

Dieses Tutorial zeigt, wie man seine Farben so wählt, dass Webseiten möglichst barrierearm sind und wie man Einstellungen der Nutzer im Betriebssystem bei der Formatierung mit CSS berücksichtigt.

Strategien zur Barrierefreiheit

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:

Kontrast

Die W3C fordert einen ausreichend hohen Kontrast (lat für. Unterschied) zwischen Text und Hintergrund, damit er auch von Benutzern mit eingeschränkten Sehfähigkeiten erkannt werden kann. 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:

Empfehlung:

Testen Sie Ihre Webseiten, ob diese einen ausreichenden Kontrast besitzen.

Früher benötigte man dafür externe Analyse-Tool - heute reicht ein Rechtsklick oder die Tastenkombination F12, um den Seiteninspektor zu öffnen.

Kontraste ansehen …

<section style="background:#eee">
  <h2 style="color:#333">Grautöne …</h2>
	<p style="color: #666" >wirken edel, lassen sich bei …</p>
	<p style="color: #999">schlechten Lichtverhältnissen </p>
	<p style="color: #aaa">aber nicht gut lesen.</p>
</section>

ansehen …

1. Öffnen Sie das Beispiel mit einem Klick auf Vorschau in einem neuen Tab. Dann öffnen Sie mit F12 den Seiteninspektor.
2. Untersuchen Sie die Webseite, indem Sie den Reiter "Barrierefreiheit" anklicken. (Auf kleinen Viewports verbirgt er sich im Menü.)
   Dort könenn Sie sich einen Überblick über alle Fehler verschaffen.
   
3. Untersuchen Sie einzelne Bereiche der Webseite. Mit einem Klick auf die Farbzuweisung des Elements können Sie den Kontrast für jedes Element ermitteln.
   

Komplementärfarben

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.
• Text und Hintergrund sollten einen hohen Kontrast aufweisen, um eine Überanstrengung der Augen zu vermeiden und die Aufmerksamkeit auf den Text zu lenken:

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

Farbenfehlsichtigkeit

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. 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.

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

Empfehlung:

Sie sollten Rot und Grün nicht als kritische Erkennungsmerkmale einsetzen und Ihre Seiten bei der Gestaltung immer von einem Farbblinden oder im Seiteninspektor überprüfen lassen.

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

SELFHTML verwendet für seine Hinweise und Warn-Boxen Grün und Rot. Dabei wurde Wert darauf gelegt, dass sich diese Farben in der Helligkeit unterscheiden.

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.

Farbinvertierungs-Test

In den Optionen für die Bildschirmdarstellung im Browser können Sie die Farbanzeige selbst einstellen (im Firefox unter

Einstellungen > Allgemein > Sprache und Erscheinungsbild > Farben

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.

Benutzereinstellungen abfragen

Auch von Seiten des W3C und der Browser-Hersteller wird versucht, die aktuellen Lichtverhältnisse zu berücksichtigen.

responsive Anpassung an Lichtverhältnisse

Ursprünglich sollte der Helligkeitssensor der Kamera die Lichtverhältnisse überprüfen und dann eine Anpassung der Farbeinstellungen der Webseite´mit dem light-level in media queries und dem lightingDevice-Event ermöglichen.

Einstellungen im Betriebssystem

Mittlerweile ist man davon wieder abgekommen und lässt den Nutzer im Browser oder sogar direkt im Betriebsystem einstellen, welche Schriftgröße und -Art, welche Farben und welche Kontraste er bevorzugt.

Diese Einstellungen können dann mit Medienabfragen ermittelt und entsprechende Formatierungen ausgeliefert werden.

prefers-contrast

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

Mit prefers-contrast kann dies abgefragt werden:

höhere Kontraste bei prefers-contrast ansehen …

 .light {
  background-color: #eee;
  color: #999;
 }
  .dark{
		background-color: #113;
		color: #f9f8cc;
  }   
@media (prefers-contrast: more) {
  .light {
		background-color: white;
		color: #000;
  }

  .dark * {
		opacity: 1;
  }
}

ansehen …

In den Dev Tools von Google Chrome können Sie dies simulieren.

forced-colors

Mit forced-colors kann abgefragt werden, ob Nutzer einen kontrastreichen Modus mit erzwungenen Farben (in Windows z. B. schwarzer Hintergrund mit weißer Textfarbe und gelben Links) bevorzugen.

Auch dies kann in den Developer Tools von Chrome simuliert werden.

Dark Mode

Nutzer können entscheiden, ob sie einen Dark Mode bevorzugen.

Wie dies mit prefers-color-scheme abgefragt wird und welche Feinheiten sie dort berücksichtigen müssen, wird im nächsten Kapitel erklärt.

• Beispiel für Paletten
• Farbkonzept
  (Übersicht)
• Dark Mode

Quellen

• J. E. Hellbusch: Barrierefreies Webdesign

• viget.com: Color Contrast for Better Readability
• webdesignerdepot.com: Fully Understanding Contrast in Design
• webdesignledger.com: The Principle of Contrast in Web Design
• alistapart.com: Easy Color Contrast Testing vom 09.04.2014
• tutsplus.com: An Introduction to Color Theory for Web Designers
• nngroup.com: Ensure High Contrast for Text Over Images vom 18.10.2015

Analyzer:

• Color Contrast Analyzer
• Check my Colors
• Colorblind Web Page Filter