Grafik/Farbkonzept/Farben und Kontraste

Aus SELFHTML-Wiki
< Grafik‎ | Farbkonzept(Weitergeleitet von Kontrast)
Wechseln zu: Navigation, Suche
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[Bearbeiten]

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. [1]

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

Kontrast[Bearbeiten]

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.[2] 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.

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>
  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.
    Screenshot Webseite mit Seiteninspektor
  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.
    Screenshot Webseite mit Seiteninspektor

Komplementärfarben[Bearbeiten]

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:

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

Farbenfehlsichtigkeit[Bearbeiten]

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.[3] 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.

Screenshot Vorlagen im Wiki

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?[Bearbeiten]

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[Bearbeiten]

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

Screenshot der Farbeinstellung

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[Bearbeiten]

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

responsive Anpassung an Lichtverhältnisse[Bearbeiten]

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.[4]

Einstellungen im Betriebssystem[Bearbeiten]

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[Bearbeiten]

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;
  }
}

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

forced-colors[Bearbeiten]

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[Bearbeiten]

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.


Quellen[Bearbeiten]

  1. Dies ist die zweite große Überarbeitung eines Artikel aus dem SELFHTML-Aktuell-Bereichs: Kontraste und andere Hürden - über barrierefreies Webdesign von Jan Eric Hellbusch (2001)].
    2015 wurde er ins SELF-Wiki übernommen und verlinkte viele externe Analyse-Tools. Heute kann man dies direkt im Browser mit dem Seiteninspektor testen.
  2. W3C: Web Content Accessibility Guidelines
  3. wikipedia: Rot-Grün-Sehschwäche
  4. MDN: Using Lighting Events
  5. (developer.chrome.com) Emulate CSS media feature prefers-contrast


Analyzer: