Webentwicklung

Praktische Implikationen

  1. Webdesign: Farben richtig einsetzen
  2. Praktische Implikationen

Praktische Implikationen

Die Tatsache, dass sich gängige Webbrowser in ihren Farbmanagementfähigkeiten zum Teil dramatisch unterscheiden, stellt Webdesigner vor die Notwendigkeit, Webseitendesigns nicht für die besten Browser, sondern für die Nachzügler zu gestalten. Wer dagegen etwa Firefox 3.6 mit der Farbmanagementeinstellung Value1 (für vollständig funktionsfähiges Farbmanagement) oder Microsoft Internet Explorer 9 auf einem kalibrierten Display nutzt, kann mit einem Webbrowser ohne Unterstützung für das Farbmanagement ganz leicht eine böse Überraschung erleben.Solange fehlerfreies Verhalten von Browsern in Bezug auf die Darstellung von Farbe nicht vorausgesetzt werden kann, sind Sie gut beraten, Webseiten im Hinblick auf eben diese Webbrowser zu entwickeln, die Ihr Design ruinieren könnten. Konkret bedeutet es, dass Sie beim Speichern von Bildern für das Web (zum Beispiel unter Verwendung der Funktion Für Web speichern... in Adobe Photoshop) diese Dokumente in den sRGB-Farbraum konvertieren und das Einbetten des passenden ICC-Profils unterlassen sollten. Dadurch adressieren Sie Webbrowser mit und ohne Farbmanagement- Unterstützung.

Harmonische Farbgruppen

Das Aufeinanderabstimmen von Farben im Webdesign zählt vielleicht zu den reizvollsten aber auch viel zu oft zu den aufwändigsten Aufgaben. Zu den besten Lösungen, die das Erstellen, Austauschen und Verwalten von harmonischen Farbgruppen ermöglichen, zählt Adobes kostenloser Dienst Kuler (kuler.adobe.com).Sie können hier benutzerdefinierte Farbsammlungen durchstöbern, bearbeiten, herunterladen, und - nach einer Anmeldung mit einer kostenlosen AdobeID - online abspeichern (leider ist der Dienst vorerst nur in englischer Sprache verfügbar).Im Abschnitt Themes können Sie die Farbsammlungen anderer Benutzer durchsuchen und ihre Farbwerte einsehen (eine Anmeldung ist nicht erforderlich).

  1. Klicken Sie zuerst einmal auf eine der harmonischen Farbgruppen im Abschnitt Themes, um Details dazu anzeigen zu lassen.
  2. Aktivieren Sie die Schaltfläche zum Bearbeiten der Farbgruppe. Kuler wechselt daraufhin in den Bearbeitungsmodus. In diesem Modus stehen Ihnen ein Farbspektrum mit Kontrollelementen für bis zu fünf Farbfelder zur Verfügung.
  3. Mithilfe der Schaltflächen im Abschnitt Select a Rule können Sie auf die gewählte Farbsammlung eine der voreingestellten Regeln anwenden, um sie schnell mal eben zu transformieren (Analogous, Monochromatic, Triad, Complementary, Compound. Shades und Custom). Bis auf die Einstellung Custom bleiben hierbei die Farbwerte der einzelnen Felder an einen Basiswert gekoppelt (Schaltfläche Set as Base).
Außerdem steht es Ihnen frei, jeden der einzelnen Regler zu verschieben. Nur im Modus Custom kann jedes der fünf Farbfelder frei definiert werden; in diesem anderen Fall beeinflusst ein Parameter die Position aller Kontrollpunkte auf der Farbskala.
image.jpg

© Internet Magazin

Auch Opera 11.x bietet noch gar keine Unterstützung für ICC-basiertes Farbmanagement.

Kuler unterstützt neben RGB die Farbräume HSV und Lab und kann außerdem sowohl CMYK- und HEX-Farbwerte interpretieren. Im Abschnitt Create lassen sich jeweils bis zu fünf Farben aufeinander abstimmen. Optional können Sie hierzu mittels Create/From an Image ein Bild einlesen, um daraus Farbfelder mithilfe von bis zu fünf Farbwählern zu erfassen. In diesem Arbeitsmodus kann Kuler für Sie unter Verwendung einer Funktion namens Select a Mood (Colorful, Bright, Muted, Deep und Dark) eine Vorauswahl treffen.Nach der Anmaldung mit Ihrer kostenlosen AdobeID können Sie Ihre Farbkreationen in Ihrem Benutzerprofil entweder als öffentlich zugänglich oder als privat abspeichern, um darauf später aus anderen Anwendungen zugreifen zu können.Einen Teil der Kuler-Funktionalität können Sie mithilfe einer kostenlosen Desktop-Anwendung nutzen; diese läuft unter Mac OS X und Windows in Adobes AIR-Laufzeitumgebung. Das Tool nennt sich Kuler Desktop und ist im Adobe Marketplace unter www.adobe.com/cfusion/marketplace kostenlos erhältlich. Zudem finden Sie ein Bedienfeld für die Kuler-Dienste unter anderem in Adobe Photoshop, Illustrator und Flash Professional. Bei der Wahl von Farben gilt es nicht zuletzt, einen Kompromiss zwischen kreativer Freiheit und der Barrierefreiheit zu finden.

Barrierefreie Farbkombinationen

Schätzungsweise bis zu 10 Prozent der Bevölkerung in Industrieländern leidet unter Farbblindheit und kann daher die Kontraste einer Webseite unter Umständen nicht adäquat wahrnehmen, um den Text einer bestimmten Größe vor einem farbigen Hintergrund zu lesen. Hinzu kommt die Tatsache, dass Benutzer von Mobilgeräten wie Netbooks und Tabletts Ihre Webseiten oft unter nicht geradezu idealen Lichtbedingungen lesen und das Fehlen von Kontrasten kann dies noch erschweren. Das W3C-Konsortium hat unter dem Namen WCAG (Web Content Accessibility Guidelines) zahlreiche Richtlinien für die Textlesbarkeit veröffentlicht. Inzwischen gibt es viele Tools, die Farbkombinationen auf die Einhaltung der Richtlinien hin prüfen können.

Fazit

Webdesigner stehen vor vielen Herausforderungen im Zusammenhang mit Farbe im Web, von der Wahl harmonischer Farbgruppen bis hin zur Kontrolle der Farbdarstellung aller Elemente der Seite. Mit geeigneten Tools können Sie harmonische Farbensammlungen optimieren. Mit dem richtigen Know-how über Farbmanagement können Sie sicherstellen, dass sich sowohl in HTML erzeugte Seitenelemente als auch externe Objekte wie Bilder in Bezug auf Farbe in allen Webbrowsern vorhersehbar verhalten.

Das Farbmanagement in Firefox 3.6.x/4.x

image.jpg

© Internet Magazin

Aktivieren des gewünschten Farbmanagement-Modus in Firefox.

Firefox ist derzeit neben dem Internet Explorer 9 der goldene Standard für ICC-basiertes Farbmanagement. Firefox unterstützt drei verschiedene Farbmanagement-Arbeitsmodi:

  • 0: Farbmanagement ist deaktiviert,
  • 1: Firefox bietet vollständige Unterstützung für ICC-basiertes Farbmanagement
  • 2: Das Farbmanagement wird nur auf solche Bilder angewendet, die auch über eingebettete ICC-Profile verfügen.
Im ersten Schritt aktualisieren Sie Firefox auf die Version 3.6.x oder 4.x. Tragen Sie in die Adresszeile diese Textzeichenkette ein:
about:config

Dann bestätigen Sie gegebenenfalls die darauf folgende Warnmeldung über mögliche Konsequenzen eines Fehlers.In das Eingabefeld Filter: tragen Sie dann Folgendes ein:

gfx.color

um die Liste verfügbarer Einstellungen auf das Wesentliche zu reduzieren. Klicken Sie jetzt doppelt in die Zeile mit dem Eintrag

gfx.color_management.rendering_intent

und tragen Sie im folgenden Dialogfenster die gewünschte Zahl ein, die den benötigten Arbeitsmodus aktiviert. Zum Testen Ihrer Webseiten können Sie den benötigten Arbeitsmodus aktivieren.

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…