50er Jahre Anzeige, Hausfrau beim Abwasch mit Prilpaket, mit Slogan: wenig Stil hilft viel
Inserat für "Pril", aus "Frau und Mutter", 47. Jahrgang, zweites Juniheft 1958, Seite 32, bearbeitet. (Originaltext: "Pril so sparsam - wenig Pril hilft viel", "Pril ohne Soda schont die Hände")

Accessibility Know-how

Für die BerufskollegInnen, die sich einen schnellen Überblick verschaffen wollen...

Die Inhalte sind nicht neu, aber weitgehend aktuell.

HTML / CSS Tipps

Farbe

20. Juli 2007

aktualisiert 2013

  1. Webseiten müssen ohne Farbe lesbar sein und individuelle Farbeinstellungen erlauben.
  2. Gebraucht wird das in der Praxis von manchen BenutzerInnen mit Sehbehinderung, die eigene Einstellungen für den Bildschirm
    wählen, weil sie z.B. sehr blendempfindlich sind.
  3. Durch das Ausschalten der Farbangaben werden auch Hintergrundbilder ausgeblendet (siehe Bilder), d.h. wichtige Information darf nicht in Hintergrundbildern ohne Textalternative, die beim Wegschalten sichtbar wird (!) gegeben werden.
  4. Farben sollen im CSS, nicht im HTML definiert sein, und zwar jeweils Vorder- und Hintergrundfarbe.

Farbe als Unterscheidungsmerkmal

  1. Farbe darf nicht alleiniges Unterscheidungsmerkmal sein.
  2. Links im Fließtext sollen auch unterstrichen oder fettgedruckt oder mit Icon versehen sein, nicht nur andersfarbig, weil nicht jeder Farben deutlich unterscheiden kann.
  3. Pflichtfeldkennzeichnung in Formularen nicht nur mit Farbe, sondern z.B. auch mit einem * oder fettgedruckt.
  4. Fehlermarkierung in Formularen nicht nur mit Farbe, sondern z.b. auch durch Umrahmung des Inputfeldes.
  5. In Diagrammen oder Grafiken können bedeutungsunterscheidende Farben, die nicht kontrastreich genug sind, durch Muster oder Text ergänzt werden.
  6. Diagramme oder Grafiken müssen auch im Schwarz-Weiß Ausdruck noch verständlich sein.

Gestörte Farbwahrnehmung

  1. Rot-Grün Blindheit (Deuteranope oder Protanope) ist häufig und verursacht die Wahrnehmung einer beige-braunen Mischfarbe bei Rot oder Grüntönen.
  2. Wenn auch die Farbhelligkeit ähnlich ist, können Rot- und Grüntöne gar nicht unterschieden werden.
  3. Rotschwäche führt zur Wahrnehmung von rot als grau oder schwarz.
  4. Selten ist eine Blau / Gelb Schwäche (Tritanope, orange wird dann z.B. rosa wahrgenommen, dunkelblau gräulich).
  5. Es geht aber nicht um Vermeidung gewisser Farben als Designelement, sondern um Wahrung von inhaltlichen Bedeutungsunterschieden!
  6. Eine Website sollte auch in Schwarz-Weiß lesbar und verständlich sein.

Farbkontraste

  1. Komplementäre Farben für Hintergrund und Vordergrund flimmern und sind für Normalsichtige schwer lesbar.
  2. Zu geringe Kontraste – zu geringe Unterschiede in der Farbhelligkeit und im Farbton von Text und Hintergrund (z.B. sehr helles grau auf weiß) machen Text schwer lesbar.
  3. Laut WCAG 2.0 (Level AA) ist ein Kontrastverhältnis (contrast ratio – Messwert für den Helligkeitsunterschied) von 4.5:1 zwischen Text und Hintergrund nötig, bei großer Schrift (18pt oder fettgedruckt 14pt) genügt auch ein Kontrastverhältnis von 3:1 (die Kontrastscala reicht bis zu 21:1).
  4. Zur Erreichung von Level AAA ist ein Kontrastverhältnis von 7:1 nötig, für größeren Text 4.5:1.
  5. Manche Menschen mit Sehbehinderung bevorzugen sehr starke Kontraste und bei Blendemfindlichkeit dunklen Hintergrund (z.b. weiß auf schwarz, weiß auf blau, gelb auf blau).
  6. Das kann im Betriebsystem oder Browser eingestellt werden oder – vermutlich komfortabler – durch Zoomprogramme (wie Zoomtext oder Magic).
  7. Die Auswahlmöglichkeit von invertierter Farbdarstellung auf Webseiten (durch zusätzliche Stylesheets) ist ein nettes Feature für eine bestimmte Zielgruppe, das Engagement für die Sache demonstriert, aber nicht wirklich notwendig.

Testen

  1. Testen kann man Darstellung ohne Farbe im Firefox unter Extras / Einstellungen / Inhalt,
    Im IE unter Extras / Internetoptionen / Eingabehilfen.
  2. Den Kontrastmodus unter Windows erreicht man schnell mittels Tastenkombination: linke Umschalttaste + linke Alttaste + Druck.
  3. Für schnelles Testen ist auch Opera gut, hier gibt es einige vordefinierte Farboptionen.
  4. Farbkontraste einer Webseite testen kann man gut mit der Firefox Extension Colour Contrast Analyser von juicystudio.com. Hier testet man aber nur CSS Farbangaben.
  5. Mit dem Contrast Analyser von paciellogroup.com kann man auch Text auf Hintergrundbildern auf Websites testen oder bereits im Grafikprogramm die Kontraste messen.
  6. Einzelne Farbkombinationen analysieren kann man auch mit dem Luminosity Contrast Ratio Analyser von juicystudio.com.
  7. Beispiele für Farbfehlsichtigkeiten: z.B. www.colourblindawareness.org.
  8. Die Darstellung einer Seite bei Farbenblindheit kann man testen unter vischeck.com.

2 Reaktionen zu “Farbe”

  1. Hunna

    Wirklich schön diese Ausführung, mein Kompliment!

  2. Susi

    Das ist super. Ich denke bei dem Thema sollte man sich mehr als 5 Minuten Zeit nehmen. Schließlich ist eine gute Gestaltung fast alles!