Auf genügend hohen Farbkontrast überprüfen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Es soll sichergestellt werden, dass der Kontrast zwischen zwei Farben genügend hoch ist.

Lösung

Verwenden Sie den Luminosity Contrast Ratio Analyser (Werkzeug zum Berechnen des Verhältnisses von Helligkeit zu Kontrast).

Geben Sie zwei hexadezimale Farbwerte in das Formular ein, und klicken Sie den Button mit der Beschriftung "Calculate Luminosity Contrast Ratio", wie in der nächsten Abbildung gezeigt.

Werte eingeben: Überprüfen des Verhältnisses von Helligkeit zu Kontrast

Abbildung: Eingeben der Werte zum Überprüfen des Verhältnisses von Helligkeit zu Kontrast.

Zusammen mit einem Beispiel für die Kombination der beiden Farben (als Hintergrundund als Schriftfarbe) wird angezeigt, wie groß das Verhältnis zwischen Helligkeit und Kontrast für die gewählten Werte ist. Je höher der Wert ("contrast ratio") ist, desto größer ist der Kontrast. Es wurden drei "Levels" definiert, um das Verhältnis leichter auszudrücken (1 = ungenügend, 2 = ausreichend, 3 = sehr gut). In unserem Beispiel (siehe folgende Abbildung) wurde Level 3 erreicht, was für ein sehr gutes Verhältnis von Helligkeit zu Kontrast steht.

Testergebnisse für Verhältnis zwischen Helligkeit und Kontrast

Abbildung: Die Testergebnisse für das Verhältnis zwischen Helligkeit und Kontrast.

Diskussion

In den Richtlinien des W3C für die Zugänglichkeit von Webinhalten (Web Content Accesibility Guidelines) werden Designer angehalten, dafür zu sorgen, dass der Kontrast zwischen Vorder- und Hintergrund so hoch sein sollte, dass der Vordergrund leicht wahrzunehmen ist.

Ist die Textfarbe dem Hintergrund im Farbton oder in der Helligkeit zu nah, wird der Text schnell unlesbar. Damit der Text leicht zu lesen ist, müssen die Farben im Spektrum eine gewisse Entfernung haben, oder einen genügend großen Unterschied in der Helligkeit des gleichen Farbtons aufweisen.

Ein Beispiel für hohen Kontrast ist gelbe Schrift vor einem schwarzen Hinergrund, ähnlich wie das Batman-Logo (aus den Batman-Filmen von Tim Burton aus den 1990er Jahren).

Um das zweite Level zu erreichen, muss das Verhältnis zwischen Helligkeit und Kontrast mindestens bei 5:1 liegen. Eine der beiden Farben muss demnach mindestens fünfmal heller oder dunkler sein als die andere.

Für das dritte Level muss das Verhältnis von Helligkeit zu Kontrast mindestens bei 10:1 liegen.

Siehe auch

Die Erläuterungen auf der JuicyStudio-Website zum Algorithmus, der für die Berechnung des Verhältnisses zwischen Helligkeit und Kontrast verwendet wurde.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln