Webmaster-Crashkurs

Farbkontraste analysieren

Für die Analyse der Farbkontraste, für die ab der WCAG 2 nun Empfehlungen in Zahlen gibt, gibt es verschiedene Software. Wichtig ist immer, dass Schrift lesbar ist und dazu benötigte diese einen ausreichend hohen Kontrast zum Hintergrund vom mindestens 4.5 (bei normaler Schrift, bei großer Schrift 3).

Folgende Beispiele zur Analyse von Farbkontraste anhand der Software Contrast Analyser.

Contrast Analyser

Die Software Contrast Analyser kann kostenfrei heruntergeladen werden unter: http://www.paciellogroup.com/resources/contrast-analyser.html#download

Der Contrast Analyser liegt in den Sprachen Deutsch, Englisch, Chinesisch, Italienisch, Französisch, Spanisch und Tschechisch vor. Nach dem Start kann im oberen Bereich die Farbe gewählt werden:

Farbkontraste analysieren mit Colour Contrast Analyser

Unten ist das Kontrastverhältnis und ob die Vorgaben erfüllt sind. Über die Pipette erhält man ein Lupe mit Fadenkreuz, um die zu untersuchende Farbe auszuwählen.

Auswahl der zu analysierenden Farbe

Das gleiche macht man mit der Hintergrundfarbe und schon erhält man das Ergebnis. Die Farbwahl dieser Website ist durchgefallen.

Farbkombination fällt durch

Über die Auswahl „Kontrastergebnis für Farbenblindheit anzeigen“ sieht man anhand des Beispieltextes „Kontrastverhältnis beträgt“ wie dies Normalsichtige sehen, wie es mit Rotblindheit, Grünblindheit und Blaublindheit wahrgenommen wird und welche verschiedenen Kontrastverhältnisse dann vorliegen.

ungeeignetes Kontrastverhältnis

Farb-/Helligkeitsdifferenz

Zusätzlich kann die Farb-/Helligkeitsdifferenz ausgewertet werden. Hier im Beispiel wurde noch „Details einblenden“ ausgewählt für weiterführende Informationen zu Farb-/Helligkeitsdifferenz

Helligkeitsdifferenz zu niedrig

Sehschwäche simulieren

Eine sehr interessante Funktion ist die Sehschwäche zu simulieren.

Sehschwäche simulieren

Wird Bildschirmbereich umwandeln gewählt, bekommt man ein Fenster mit durchsichtigem Bereich, in dem alle auf dem Desktop liegenden Elemente angezeigt werden.

Rotblindheit simulieren

Beim Simulator kann nun die gewünschte Farbschwäche ausgewählt werden.

Blaublindheit simulieren

Neben Rotblindheit, Grünblindheit, Blaublindheit, Graustufen und Invertiert steht auch der „graue Star“ zur Auswahl. Beim grauen Star kommt eine Unschärfe dazu. Diese ist für kleine Schriften tödlich.

Grauer Star simulieren

Weitere Tools zur Farbkontrast-Analyse

Unter der Seite von http://www.webforall.info/index.php?option=com_content&view=article&id=84&Itemid=84 findet sich ein weiteres Tool

HTML5-Video-Kurs:
hier klicken für
mehr Informationen
© 2008-2024   •   www.webmaster-crashkurs.de - HTML5 Tutorial mit VideosImpressumDatenschutzerklärung
weitere eigene Projekte: