Das Prüfverfahren zur BITV 1.0


Sie sind hier: BITV-Test > Verzeichnis der Prüfschritte > Prüfschritt 2.2.2 (9 von 52)


Diese Version des BITV-Tests ist nicht mehr gültig! zum aktuellen BITV-Test 2.0

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 2.2.2
Helligkeitskontraste von Grafiken ausreichend

Diese Version des Prüfschritts ist nicht mehr gültig!

Technische Angaben

Version bis 30.03.2005 | bis 16.10.2009 | bis 22.9.2011
BITV-Bedingung 2.2
Bewertungsalternativen ja / eher erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung geringes Gewicht (1 Punkt)
Abwertung keine Abwertung möglich
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Grafische Bedienelemente und informative Grafiken haben ausreichende Kontraste.
Prüfschritt nicht anwendbar Grafische Bedienelemente oder informative Grafiken sind nicht vorhanden.

Was wird geprüft?

Grafische Bedienelemente oder informative Grafiken sollen ausreichende Helligkeitskontraste haben. Sie sollen auch für farbfehlsichtige Benutzer wahrnehmbar sein.

Warum wird das geprüft?

Wenn Vordergrund- und Hintergrundfarbe sich in der Helligkeit ähneln, haben sie unter Umständen zu wenig Kontrast, wenn sie mit Schwarzweiß-Monitoren oder von Menschen mit verschiedenen Arten von Farbenschwäche betrachtet werden.

Benutzer können die Farben von Text entsprechend ihren Anforderungen individuell festlegen. Für Grafiken gilt dies leider nicht.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn wichtige Inhalte oder Funktionen nur über informative Grafiken verfügbar sind. Informative Grafiken sind Grafiken, die als Bedienelemente eingesetzt werden, Schriftgrafiken und Abbildungen oder Zeichnungen, die etwas zum Verständnis des Inhalts beitragen.

  • Immer anwendbar ist der Prüfschritt auf Schriftgrafiken.
  • Immer anwendbar ist der Prüfschritt auf wichtige Symbole oder grafische Zeichen.
  • Nicht anwendbar ist der Prüfschritt auf Logos. Ausnahme: das Logo verlinkt auf die Startseite, einen anderen Link auf die Startseite gibt es nicht.
  • In der Regel nicht anwendbar ist der Prüfschritt auf grafische Hervorhebungen.
  • In der Regel nicht anwendbar ist der Prüfschritt auf Fotos. Beispiel für eine Ausnahme: das Foto wird genutzt, um zu zeigen, wo Teile (zum Beispiel Bedienelemente) eines Geräts angeordnet sind

2. Prüfung

  1. Sichtpüfung. Sind die Kontraste von Grafiken kräftig genug?
  2. Im Zweifel den Contrast Analyser öffen. Überprüfen, ob im Menü Options > Algorithm der Wert Luminosity ausgewählt ist. Im Zweifel die Hexadezimalwerte der Vorder- und Hintergrundfarbe mithilfe der Pipette der Firefox-Extension ColorZilla ermitteln (Klick auf das Pipettensymbol links unten in der Statuszeile, dann Klick auf die zu prüfende Stelle, dann Rechtsklick auf das Pipettensymbol - und aus dem Kontextmenü den Hexadezimalwert in die Zwischenablage kopieren).
  3. Im Bereich Foreground mit der Pipette die Vordergrundfarbe auswählen, dann im Bereich Background die Hintergrundfarbe. Mit dem Colour Contrast Analyser prüfen, ob der Helligkeitsunterschied (difference in brightness) über 125 liegt.
  4. Prüfen, ob bei Grafiken das Kontrastverhältnis zum Hintergrund bei 4,5 : 1 oder höher liegt. Bei Schriftgrafiken über 18 Punkt (beziehungsweise 14 Punkt bei fetten Schriften) reicht ein Kontrastverhältnis von 3 : 1.

3. Hinweise

  • Für die Bewertung soll nur der Helligkeitsunterschied, nicht aber die Farbdifferenz herangezogen werden!
  • Für die Bewertung zählt das Kontrastverhältnis (relative luminosity) nach einer in den WCAG 2.0 definierten Formel. Diese Formel ersetzt die bisher im BITV-Test verwendete Formel zur Bestimmung des Helligkeitskontrasts.
  • Sollen die Farbwerte sehr kleiner Bereiche (feine Schriften oder kleine Icons) ermittelt werden, ist es unter Umständen einfacher, einen Screenshot zu machen und die leistungsfähigeren Zoom- und Pipettenwerkzeuge eines Bildbearbeitungsprogramms zu nutzen.
  • Schwache Kontraste können zweckmäßig sein, sie können den Umgang mit einer Webseite erleichtern. Ein Beispiel dafür: Funktionen, die prinzipiell vorgesehen, aktuell aber nicht verfügbar sind, werden schwach kontrastierend dargestellt. Das ist akzeptabel, wenn das ausgeblendete Element für die Orientierung und Bedienung nicht erforderlich ist. Der Prüfschritt ist daher auf die Beschriftungen ausgeblendeter, deaktivierter Bedienelemente in der Regel nicht anwendbar.
  • Für die Prüfung kommt als Werkzeug ebenfalls in Frage: Farbkontrast-Analyzer 1.0.

4. Bewertung

Erfüllt:

  • Der Wert für den Helligkeitsunterschied Das Kontrastverhältnis (contrast ratio) zwischen Vorder- und Hintergrundfarbe liegt bei mindestens 4,5:1.
  • Das Kontrastverhältnis (contrast ratio) zwischen Vorder- und Hintergrundfarbe bei Schriftgrafiken von 18 Punkt und größer (14 Punkt und größer bei fetter Schrift) liegt bei mindestens 3:1.

Einordnung des Prüfschritts

Formulierung der entsprechenden BITV-Bedingung und deutsche Übersetzung der WCAG: siehe Prüfschritt 2.2.1

Abgrenzung zu anderen Prüfschritten

  • Verwendung von Grafiken für Schrift: siehe Prüfschritt 3.1.1
  • Abgrenzung der Prüfschritte 2.2.1 und 2.2.2:
    In beiden Prüfschritten geht es um den Kontrast des Vordergrundes einer Grafik, also des Gegenstandes, der abgebildet ist.
    Prüfschritt 2.2.1 prüft, ob der Vordergrund einen "eigenen" Hintergrund hat.
    Dieser Prüfschritt 2.2.2 prüft, ob der Kontrast zu diesem eigenen Hintergrund ausreicht.

Grenzen des Prüfschritts

Es gibt eine Vielzahl von Prüftools, die das Aussehen von Seiten für unterschiedliche Farbfehlsichtigkeiten simulieren. Dieser Prüfschritt des BITV-Tests beschränkt sich jedoch auf die Prüfung der Helligkeitskontraste.

Einordnung des Prüfschritts nach WCAG 2.0

WCAG 2.0

Guideline

Success criterion

  • 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (Level AA)
    "Although this Success Criterion only applies to text, similar issues occur for data presented in charts or graphs. Good color contrast should also be provided for data presented in these forms." (Understanding SC 1.4.3)

Techniques

General Techniques

Failures

Advisory Techniques

  • Using a higher contrast values for lines in diagrams (future link)
  • Providing sufficient color contrast in graphs and charts (future link)

Quellen

Bedeutung der Kontraste

Wenn Vordergrund- und Hintergrundfarbe sich im Farbton zu sehr ähneln, haben sie unter Umständen zu wenig Kontrast, wenn sie mit Schwarzweiß-Monitoren oder von Menschen mit verschiedenen Arten von Farbenschwäche betrachtet werden.

Quelle: http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html

Anmerkung: Da liegt vermutlich auch im Original eine Verwechslung vor: Entscheidend für die Nutzbarkeit mit Schwarzweiß-Monitor ist nicht der Kontrast der Farbtöne (hue), sondern der Helligkeitskontrast.

Lightness corresponds to how much light appears to be reflected from a surface in relation to nearby surfaces. Lightness, like hue, is a perceptual attribute that cannot be computed from physical measurements alone. It is the most important attribute in making contrast more effective. With color deficits, the ability to discriminate colors on the basis of lightness is reduced.

Quelle: http://www.lighthouse.org/color_contrast.htm

Stand der Entwicklung eines Verfahrens für die Berechnung der Kontraste:

These results demonstrate that it is possible to judge the readability of web pages based on their color specifications. However, the judgement, based on brightness difference and color difference, is not entirely accurate.

There are other factors that influence readability that call for further investigation. Several color samples that were rated excellent in terms of brightness difference and hue difference by our algorithm were rated poorly by our subjects in terms of readability.

We noticed that in some of these samples, the large difference in hue caused artifacts around the borders between the text and the background when displayed on a Cathode Ray Tube (CRT) monitor. It may be that the very large difference in hue causes these artifacts and decreases their readability. Other samples that were rated poor by our algorithm in terms of brightness difference and hue difference were rated very highly by our subjects in terms of readability. It may be that several color combinations are more easily detected by our visual system and are inherently more readable. Some color combinations may display better or worse depending on the design of the computer display, the display settings or the type of ambient light.

Our analysis of the subject's responses resulted in an algorithm that predicts the readability of our test color samples. We are unsure if this algorithm can accurately predict the readability of all color combinations but are proceeding to test if this is true. We hope that an algorithm derived from the subject's rating could account for the factors that are difficult to measure.

Quelle: http://www.aprompt.ca/WebPageColors.html

Fragen zu diesem Prüfschritt

Warum verwenden Besucher, die Probleme mit den Farben haben, nicht einfach die Alternativtexte?

Dafür sind die Alternativtexte nicht vorgesehen. Sie erscheinen an Stelle des Bildes, ersetzen es also, wenn die Seite vorgelesen wird oder wenn der Besucher die Bilder ausgeschaltet hat.

Die meisten grafischen Browser zeigen Alternativtexte nur an, wenn die Grafiken abgeschaltet sind. Eine Ausnahme ist der Microsoft Explorer. Dieser Browser zeigt die Alternativtexte als Tooltips an, wenn es kein Title-Attribut gibt.

In diesem Prüfschritt des BITV-Tests wird der Alternativtext daher nicht beachtet.

Warum werden die Kontraste von Fotos nicht geprüft?

Wenn Fotos informativ sind, also zeigen sollen, wie etwas aussieht, dann sollte man natürlich auf die Helligkeitskontraste achten.

Das hat aber oft Grenzen. Das Motiv ist nun mal dunkel, seine Helligkeitskontraste sind schlecht, eine Verfälschung der Farben kommt nicht in Frage, die Helligkeitskontraste des Fotos sind also vorgegeben.

Daher werden die Helligkeitskontraste von Fotos normalerweise nicht geprüft. Davon ausgenommen sind Fotos, die wie Zeichnungen verwendet werden und die Anordnung von Teilen zeigen sollen. Zum Beispiel das Foto eines Motors, auf dem verschiedene zum Motor gehörige Teile gekennzeichnet sind.

Blättern: zum ersten Prüfschritt zum vorhergehenden Prüfschritt zum nächsten Prüfschritt zum letzten Prüfschritt


© 2003 - 2010 DIAS GmbH | Impressum | letzte Änderung 10.08.2006

nach oben