Farbkontraste auf Webseiten sind sehr wichtig und sollten wenn möglich beachtet und optimiert werden.

Bei der Gestaltung von Webseiten spielt die Farbwahl immer ein sehr wichtige Rolle. Farben geben den Webseiten Charakter und das gewünschte Look&Feel und lösen beim Besucher entsprechende Gefühle aus. Nun, schön und gut, nur leider wird bei der Farbwahl der Kontrast oft völlig ausser acht gelassen.

Gelbe Schrift auf weissem Hintergrund beispielsweise ist keine gute Wahl, vorallem für Menschen mit einer Sehbehinderung eine Qual. Man sollte sich also Gedanken machen über die Accessibility der Webseite und dazu gehört definitiv auch die Wahl der Farben bzw. der Farbkontrast des Contents. Die W3C Web Content Accessibility Guidelines 1.0 stellen hier einen quasi Standard zur Verfügung. Basierend auf einem Algorithmus definieren die Guidelines in welchem Verhältnis der Vordergrund mit dem Hintergrund stehen soll bzw. umgekehrt.

Nette Helferchen

Um den Kontrast mit den eigenen Entwürfen bzw. mit dem eigenen Design zu testen, gibt es nützliche Tools. Jonathan Snook’s Colour Contrast Check beispielsweise ist ein guter webbasierter Kontrast-Checker.

Oder aber man probierts mit dem Juicy Studio CSS Analyser. Dieser Webservice bietet die Möglichkeit das CSS-File einer Webseite auf den Kontrast hin zu überprüfen und listet zu den gefundenen Fehlern gleich auch noch die entsprechenden Nachschlage-Links des W3C auf.

Wer’s lieber als Software bzw. Extension mag, kann sich die Juicy Studio Contrast Analyser Firefox Extension downloaden und direkt aus dem Browser den Kontrast der Farben einer Webseite checken. Die Ergebnisse werden zwar relativ trocken als Tabelle ausgegeben, nützlich sind sie aber auf jeden Fall.

Zudem gibt’s auch noch den Colour Contrast Analyser 1.1 vom Web Accessibility Consortium zum download.

Genug Tools also um alles richtig zu machen…