Home > Wai Happen > Farbe

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")

WAI Happen

Für die BerufskollegInnen, die nur 5 Minuten Zeit fürs Thema haben...

HTML / CSS Tipps

Farbe

20. Juli 2007

  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 sein, nicht nur andersfarbig.
  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 sollen bedeutungsunterscheidende Farben durch Muster oder Text ergänzt werden.

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!

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 machen Text schwer lesbar.
  3. Laut WCAG 2.0 (Level AA) ist ein Kontrastverhältnis (contrast ratio – Messwert für den Helligkeitsunterschied) von 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). Zur Erreichung von Level AAA ist Kontrastverhältnis von 7:1 nötig, für größeren Text 5:1.
  4. Manche Menschen mit Sehbehinderung bevorzugen sehr starke Kontraste und bei Blendemfindlichkeit dunklen Hintergrund (z.b. weiß auf schwarz, weiß auf blau, gelb auf blau).
  5. Das kann im Betriebsystem oder Browser eingestellt werden oder – vermutlich komfortabler – durch Zoomprogramme (wie Zoomtext oder Magic).
  6. 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. Die Darstellung einer Seite bei Farbenblindheit kann man testen unter http://vischeck.com/.
  5. Farbkontraste einer Webseite testen kann man gut mit der Firefox Extension Colour Contrast Analyser von juicystudio.
  6. Einzelne Farbkombinationen analysiert der Luminosity Contrast Ratio Analyser.

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!

Einen Kommentar schreiben