Sprung zum Inhalt [S] Tastaturkürzel / Accesskeys [0]
webdesign weisshart Startseite

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Farbkontrast und Helligkeitsdifferenz nach W3C

Mittwoch, 26. März 2008

Die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) schreibt vor:

Texte sind so zu gestalten, dass die Kombinationen aus Vordergrund und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Was “ausreichend” ist, definiert W3C in Form von 2 Algorithmen.

Diese Forderung zu erfüllen, bereitet häufig Schwierigkeiten. Manchmal scheint es, als ob zu einer gegebenen Hintergrundfarbe oder Schriftfarbe überhaupt keine Schriftfarbe bzw. Hintergrundfarbe existiert, die die strengen Forderungen des W3C nach ausreichender Helligkeitsdifferenz und gleichzeitig ausreichendem Farbkontrast erfüllt.

Und dies ist tatsächlich bei sehr vielen Farben der Fall.

Ich habe die Algorithmen des W3C mal in eine anschauliche Form übertragen. Dort kann man eigene Farben vorgeben, oder einfach zufällige Farben durch Neuladen der Seite erzeugen lassen. Das Script generiert daraus automatisch

  1. die Farbe mit der bestmöglichen Helligkeitsdifferenz (also entweder Weiß oder Schwarz), und
  2. die Farbe mit dem bestmöglichen Farbkontrast,

und stellt die Ergebnisse jeweils als Schriftfarbe zur gewählten Hintergrundfarbe und als Hintergrundfarbe zur gewählten Schriftfarbe dar.
Die Zahlenwerte für Helligkeitsdifferenz und Farbkontrast nach W3C werden ausgegeben, und anhand der Minimalforderung bewertet.

Ein wenig Spielen mit zufälligen Farben liefert hin und wieder überraschende Ergebnisse. Manche zulässige Farbkombinationen kann ich kaum lesen.


2 Kommentare

  1. Hallo Fritz,
    Dein Tool berücksichtigt dabei aber nur den “Normalsichtigen", die 3 anderen Fälle (Farbfehlsichtigkeit) schneiden da teilweise sehr schlecht ab.
    Solche Farbkombinationen als “für Webseiten tauglich” zu klassifizieren, halte ich für sehr gewagt. Nutzer mit Farbproblemen gehen da oft genug “leer” aus…

    Antwort:
    Hallo Peter,
    das Tool setzt den Algorithmus des W3C um.
    Du hast recht. “Für Webseiten tauglich” mag tatsächlich der falsche Ausdruck sein. Vielleicht sollte ich schreiben: “Diese Farbkombination erfüllt die Forderung des W3C".

    Aber lies bitte auch noch einmal den letzten Absatz meines Beitrags.

    Vielleicht könntest du auch einmal eine deiner Meinung kritische Farbkombination nennen, die “mein” Tool für gut befindet. Diese Farbkombination könnte man sich konkret mit einem entspechenden Tool anschauen, z.B. Wickline

    Kommentar von Peter Kammerer — Freitag, 18. April 2008 - 14:37 Uhr

  2. Hallo Fritz,

    Ja, die lieben Regeln von W3C, WAI oder BITV & Co. Ich für meinen Teil orientiere mich am Nutzer.

    Rot/weiß (#fff/#f00) wäre eine sehr markante Kombination, weil Rot als “Warnfarbe” gern auf weißem Untergrund verwendet wird. Wohl auch, weil wir dies aus dem realen Leben so gewöhnt sind.

    Der Colour Contrast Analyzer aus der Toolbar des IE meldet dazu folgendes:

    Normal: 510/179
    Rotblindheit: 512/154
    Rot/Grün-Blindh.: 446/117
    Blaublindh.: 418/168

    Hier werden die Werte von 500/125 doch schon deutlich unterschritten.

    Da ich ohnehin von Hause aus zu kräftigen Farbe neige, hatte ich die Kontrastprobleme lange Zeit zwar im Blick, die Werte aber nie validiert.
    Bis mir eine - im übrigen uns beiden gut bekannte Person - gemeldet hat, dass sie mit einer (für mich eher unkritischen) Kombination nicht zurecht kommt. Und tatsächlich meldete das o.g. Tool zu geringe Werte.

    Nach Korrektur der Farb- und Helligkeitswerte an Hand des Analyzers war der Nutzer zufriedengestellt. Diese Situation hatte für mich Signalwirkung.

    Ob man es nun pingelig oder kleinlich nennt: Ich halte die Verwässerung der Zugänglichkeit im Sinne der Barrierefreiheit durch immer häufiger anzutreffenden Kontrastmangel der Sache nicht dienlich.

    Es wird wohl kaum noch wirklich Wert auf Farbkontraste gelegt, wie die Kombinationen #888/#f9f9f5 oder auch #366/#fff zeigen.

    Dabei dürfte es sich weniger um “Böshaftigkeit” oder Desinteresse handeln, sondern vielmehr um die fehlende Erkenntnis, wie wichtig kleine Farb-oder Helligkeitsänderungen für betroffene Nutzer sein können.

    Deshalb - und nur deshalb - spreche ich dieses Thema immer wieder an…

    Kommentar von Peter Kammerer — Dienstag, 29. April 2008 - 8:59 Uhr

Einen Kommentar abgeben

XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Partnerseiten: barrierefreies WebDesign

Tastaturkürzel

nach oben