2 Tools für gute Kontraste, damit Texte wieder lesbar werden

Jeder Webdesigner sollte die beiden Tools „Colour Contrast Analyser“ und „WCAG Contrast checker“ kennen, um zu verhindern, dass er zum Beispiel graue Schrift auf hellgrauem Hintergrund verwendet.

Im Web gibt es einen Trend hin zu schlechten Kontrasten. Das kann dazu führen, dass wichtige Texte wie die Begriffe in der Hauptnavigation nicht mehr erkannt werden. Insbesondere bei älteren Personen und sehbehinderten kann das zum Problem werden, oder wenn das Umgebungslicht nicht optimal ist (Sonnenlicht, auf dem Smartphone etc.). Hier 2 Beispiele von der Migros Bank und der Schwyzer Kantonalbank die unsere Kollegen von der Stiftung „Access for All“ entdeckt haben:

Die Hauptnavigation der Migros Bank Webseite hat einen Kontrast von 1.99:1 sollte aber einen Kontrast von 3:1 haben
Die Hauptnavigation der Migros Bank Webseite hat einen Kontrast von 1.99:1 sollte aber einen Kontrast von 3:1 haben

 

Die Textfelder auf der Webseite der Schwyzer Kantonalbank haben einen Kontrast von 1.48:1 sollten, aber einen Kontrast von 4.5:1 haben
Die Textfelder auf der Webseite der Schwyzer Kantonalbank haben einen Kontrast von 1.48:1 sollten, aber einen Kontrast von 4.5:1 haben

 

Zur Erinnerung: Kontrast-Anforderungen der Web Content Accessibility Guidelines 2.0 Level AA:

  • Bei Text grösser als 18 pt oder bei fettem Text grösser als 14 pt: Ein Kontrast von 3:1
  • Bei kleinerem Text: Ein Kontrast von 4.5:1

Um solche ungenügenden Kontraste zu verhindern, gibt es verschiedene Hilfsmittel. Nachfolgend werden 2 davon vorgestellt, mit denen wir sehr gute Erfahrungen gemacht haben.

  • Colour Contrast Analyser
  • Firefox Plugin „WCAG Contrast checker“

Colour Contrast Analyser

Colour-Contrast-Analyser
Mit dem Colour Contrast Analyser können 2 Pixel selektiert werden und der entsprechende Kontrast wird angezeigt.

Hauptvorteil

Funktioniert nicht nur bei Webseiten. Die Kontraste können auch auf Smartphone-Screenshots und bei Desktop-Applikationen überprüft werden.

Hauptnachteil

Man muss aktiv nach schlechten Kontrasten suchen (man wird nicht automatisch auf schlechte Kontraste hingewiesen).

Colour Contrast Analyser runterladen

Firefox Plugin „WCAG Contrast checker”

WCAG Contrast Checker Screenshot

Dieses Plugin zeigt an, wenn auf der momentanen Seite ungenügende Kontraste vorhanden sind (im CSS).

Hauptvorteil

Der WCAG Contrast checker zeigt einem aktiv mögliche Kontrastprobleme auf der momentan besuchten Seite. Man muss nicht aktiv nach möglichen Kontrastproblemen suchen.

Hauptnachteil

Nur CSS-Kontraste werden verglichen. Steht Text über einem Hintergrundbild, werden dort keine fehlenden Kontraste erkannt.

WCAG Contrast checker runterladen

Fazit

Color Contrast Analyser und WCAG Contrast checker sind 2 hilfreiche Tools, die jeder Webdesigner kennen sollte, damit Webseiten-Besucher auch dann noch wichtige Elemente erkennen können, wenn mal die Sonne auf den Bildschirm scheint.

Kennen Sie weitere hilfreiche Tools, um Kontraste zu verbessern? Schreiben Sie einen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.