Rheinwerk Computing < openbook >

 
Inhaltsverzeichnis
Vorwort
1 Prinzipien des modernen Webdesigns
2 Projektmanagement
3 Konzeption und Strategie
4 Responsive Webdesign
5 Informationsarchitektur
6 Gestaltungsgrundlagen
7 Screendesign
8 Layout und Raster
9 Farbe im Webdesign
10 Typografie
11 Bilder und Grafiken
12 Navigations- und Interaktionsdesign
13 Webdesign-Stile und -Trends
14 Animationen
15 Website-Typen
16 Tipps, Tricks und Tools
Stichwortverzeichnis

Download:
- Beispieldateien, ca. 3.64 MB

Buch bestellen
Ihre Meinung?

Spacer
<< zurück
Webdesign von Martin Hahn
Das Handbuch zur Webgestaltung
Buch: Webdesign

Webdesign
Pfeil 9 Farbe im Webdesign
Pfeil 9.1 Welche Rolle spielt die Farbe?
Pfeil 9.1.1 Farbe und Webdesign
Pfeil 9.2 Farbe: eine Wissenschaft für sich
Pfeil 9.2.1 Licht und Farbe
Pfeil 9.2.2 Wie unsere Farbwahrnehmung funktioniert
Pfeil 9.2.3 Farbpsychologie
Pfeil 9.3 Farbsysteme
Pfeil 9.3.1 Farbkreise
Pfeil 9.3.2 RGB – das additive Farbmodell
Pfeil 9.3.3 CMYK – das subtraktive Farbmodell
Pfeil 9.3.4 Farbtiefe
Pfeil 9.3.5 Farbdefinition
Pfeil 9.3.6 Farbton, Sättigung, Helligkeit
Pfeil 9.4 Das Web-Farbmanagement
Pfeil 9.4.1 Mit Farbräumen & Farbprofilen arbeiten
Pfeil 9.5 Farbwirkung
Pfeil 9.5.1 Warme Farben
Pfeil 9.5.2 Rot
Pfeil 9.5.3 Orange
Pfeil 9.5.4 Gelb
Pfeil 9.5.5 Kalte Farben
Pfeil 9.5.6 Blau
Pfeil 9.5.7 Grün
Pfeil 9.5.8 Violett/Lila
Pfeil 9.5.9 Neutrale Farben
Pfeil 9.5.10 Schwarz
Pfeil 9.5.11 Weiß
Pfeil 9.5.12 Grau
Pfeil 9.5.13 Grell, greller, Neon
Pfeil 9.5.14 Zusammenfassung Farbwirkung
Pfeil 9.6 Farbkontraste
Pfeil 9.6.1 Farbe-an-sich-Kontrast
Pfeil 9.6.2 Hell-Dunkel-Kontrast
Pfeil 9.6.3 Kalt-Warm-Kontrast
Pfeil 9.6.4 Komplementärkontrast
Pfeil 9.6.5 Quantitätskontrast
Pfeil 9.6.6 Qualitätskontrast
Pfeil 9.6.7 Simultankontrast
Pfeil 9.6.8 Bunt-Unbunt-Kontrast
Pfeil 9.7 Farbschemata
Pfeil 9.7.1 Monochromes Farbschema
Pfeil 9.7.2 Analoges Farbschema
Pfeil 9.7.3 Komplementäres Farbschema
Pfeil 9.7.4 Teilkomplementäre, triadische und tetradische Farbschemata
Pfeil 9.7.5 Tool-Empfehlung: Unterstützung bei der Farbfindung
Pfeil 9.8 Gelungener Farbeinsatz im Webdesign
Pfeil 9.8.1 Farbe, Corporate Design & Identität
Pfeil 9.8.2 Farbverläufe
Pfeil 9.9 Farbe und Usability
Pfeil 9.9.1 Hürden bei der Farbwahrnehmung
Pfeil 9.10 Ein eigenes Farbschema entwickeln
Pfeil 9.10.1 Inspiration sammeln und Vorbilder finden
Pfeil 9.10.2 Farbtrends und Inspirationsquellen
Pfeil 9.10.3 Tools, um Farbkombinationen zu erzeugen
Pfeil 9.10.4 Praktische Umsetzung: Farbschemata selbst gestalten
Pfeil 9.11 Fazit
 
Zum Seitenanfang

9.9    Farbe und Usability Zur vorigen ÜberschriftZur nächsten Überschrift

Dem Thema Usability wird in diesem Buch ein eigener Abschnitt gewidmet, siehe Kapitel 3, »Konzeption und Strategie«. Aber bei der Farbgestaltung und speziell bei der Textfarbe spielt die Farbgebung eine so große Rolle, auch in puncto Barrierefreiheit, dass hier noch ein eigener Abschnitt erfolgen muss.

Bei Apps wird es oft noch deutlicher als bei Webseiten: Eindeutige klare Farbgebung erleichtert die Bedienung von Interfaces, mobile-patterns.com.

Abbildung 9.134    Bei Apps wird es oft noch deutlicher als bei Webseiten: Eindeutige klare Farbgebung erleichtert die Bedienung von Interfaces, mobile-patterns.com.

Die Farbgestaltung trägt nämlich einen nicht unerheblichen Teil zur Bedienbarkeit einer Webseite bei. So kann durch geschickte Farbwahl der Elemente die Orientierung erleichtert werden. Wichtige, elementare Inhalte wie beispielsweise die Hauptnavigation lassen sich unter anderem durch entsprechende Farbwahl herausstellen. Inhaltlich gleiche Elemente sollten durchgehend in der gleichen Farbe dargestellt werden. Inhaltliche Unterschiede können durch klar unterscheidbare Farben betont werden.

ACHTUNG!

Kaum etwas ist bei einem Screendesign so wichtig wie die Lesbarkeit des Textes. Also nicht aus ästhetischen Gründen einen zu geringen Kontrast zwischen Text- und Hintergrundfarbe wählen.

Um Informationen aufzunehmen, ist vor allem die Lesbarkeit des Textes entscheidend. Hier kommt es auf den Kontrast zwischen Hintergrund- und Textfarbe an. Es sollte ein hoher Hell-Dunkel-Kontrast vorherrschen. Je geringer der Kontrast, umso unleserlicher wird der Text.

Sieht zwar nett aus, aber durch den geringen Hell-Dunkel-Kontrast ist der Text schwer zu lesen (blogst.de).

Abbildung 9.135    Sieht zwar nett aus, aber durch den geringen Hell-Dunkel-Kontrast ist der Text schwer zu lesen (blogst.de).

Schwarzer Text auf weißem Hintergrund als stärkster Hell-Dunkel-Kontrast ist allerdings auch nicht die beste Variante, zumindest auf Bildschirmen. Dieser Kontrast ist, gerade weil er so hoch ist, auf die Dauer unangenehm bzw. ermüdend für die Augen. Als mögliche Varianten lässt sich der Hintergrund leicht abdunkeln oder der Text leicht aufhellen, um eine bessere Lesbarkeit zu gewährleisten.

 
Zum Seitenanfang

9.9.1    Hürden bei der Farbwahrnehmung Zur vorigen ÜberschriftZur nächsten Überschrift

Zur Usability einer Webseite gehört auch die Farbwahrnehmung, denn ein nicht zu unterschätzender Prozentsatz der Bevölkerung hat eine zumindest eingeschränkte Farbwahrnehmung. Dies ist deshalb eine Herausforderung, da Webdesigner in der Regel nicht an einer Farbsehschwäche leiden.

Beim Online-Tool Contrast Ratio wird während der Eingabe der Farbwerte der Farbkontrast nach WCAG 2.0-Richtlinien bewertet. Sehr hilfreich! http://leaverou.github.io/contrast-ratio/

Abbildung 9.136    Beim Online-Tool Contrast Ratio wird während der Eingabe der Farbwerte der Farbkontrast nach WCAG 2.0-Richtlinien bewertet. Sehr hilfreich! http://leaverou.github.io/contrast-ratio/

Es gibt verschiedene Formen von Farbsehschwächen. Die vollständige Farbenblindheit, bei der die Betroffenen nur noch Grautöne sehen, ist sehr selten anzutreffen. Ein deutlicher Hell-Dunkel-Kontrast hilft dann, die verschiedenen Elemente wahrzunehmen.

Die Rot-Grün-Sehschwäche | Wesentlich häufiger kommt die Rot-Grün-Sehschwäche vor, die auch oft als Rot-Grün-Blindheit bezeichnet wird. Ein Phänomen, das wohl vor allem Männer betrifft (8 % der Männer haben zumindest ein eingeschränktes Farbsehen). Die Betroffenen können Violett nicht von Blau unterscheiden und verwechseln Rot, Gelb, Braun und Grün miteinander.

Webseiten sollten natürlich im Idealfall so gestaltet sein, dass sie keine unnötigen Barrieren darstellen bzw. diese abbauen. Dazu gehört eben auch, dass möglichst viele Besucher die Farben und die Farbwirkung der Webseite wahrnehmen können. Schaut man sich seine Screendesigns mit den Augen eines Betroffenen mit einer Farbsehschwäche an, so kann man schnell enttäuscht sein. Denn möchte man nicht die Webseite nur in Schwarz-Weiß-Grau-Tönen erscheinen lassen, wird es immer für bestimmte (wenige) Personen Einschränkungen geben. So weit muss man aber nicht gehen. Benutzerunfreundlich wäre die Webseite erst, wenn mit den Farben bestimmte Bedeutungen oder Funktionen verknüpft sind, die Betroffene eben nicht erkennen können.

Sehtest

Verschiedene Sehtests, unter anderem auch für die Rot-Grün-Sehschwäche, finden sich unter sehtestbilder.de/sehtest.

Einen roten Button auf grünem Hintergrund sollte man also aus zwei Gründen vermeiden: zum einen aus ästhetischen Gründen, denn direkt übereinander erzeugen Komplementärfarben ein Flimmern, und zum anderen, um Personen mit Farbsehschwächen nicht unnötig einzuschränken.

Für das Screendesign ist also Folgendes wichtig:

  • Objekte oder Funktionen, die unbedingt unterschieden werden müssen, um z. B. die Seite zu bedienen (Navigation) oder eine bestimmte Aufgabe zu lösen, sollten sich nicht nur durch ihre Farbgebung unterscheiden. Neben einer Farbgebung sollte also im Idealfall mindestens ein weiteres Codierungsschema vorhanden sein, wie beispielsweise Rahmen, Größe, Platzierung etc.

  • Ein klarer Hell-Dunkel-Kontrast hilft eigentlich immer – übrigens auch Anwendern, die nicht unter einer Farbsehschwäche leiden, aber vielleicht bei schlechtem Umgebungslicht lesen.

  • Auch das Unterstreichen von Links kann dann wieder Bedeutung gewinnen, wenn sich für den Betroffenen die Linkfarbe von der Textfarbe nicht unterscheidet.

Hilfreiches ToolFarbeTool: Check My Colours. URL eingeben und die Seite analysieren lassen, ob die Farbkontraste nach W3C-Richtlinie okay sind! checkmycolours.com

Abbildung 9.137    Hilfreiches Tool: Check My Colours. URL eingeben und die Seite analysieren lassen, ob die Farbkontraste nach W3C-Richtlinie okay sind! checkmycolours.com

Also, ist die Farb-Usability für Menschen mit eingeschränktem Farbsehvermögen optimiert, dann erfreut dies auch alle anderen Anwender!

Um zu testen, ob die eigenen Farbkombinationen mit den Web Content Accessibility Guidelines übereinstimmen, gibt es beispielsweise den WCAG Contrast Checker: zwei Hexadezimalwerte eingeben und Ergebnisse anzeigen lassen (contrastchecker.com).

Hier ist der Name Programm: zwei Hexadezimalwerte eingeben und Ergebnisse anzeigen lassen, contrastchecker.com.

Abbildung 9.138    Hier ist der Name Programm: zwei Hexadezimalwerte eingeben und Ergebnisse anzeigen lassen, contrastchecker.com.

 


Ihre Meinung?

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de

<< zurück
 Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Webdesign Webdesign
Jetzt Buch bestellen

 Buchempfehlungen
Zum Rheinwerk-Shop: HTML5 und CSS3
HTML5 und CSS3


Zum Rheinwerk-Shop: Praxisbuch Usability und UX
Praxisbuch Usability und UX


Zum Rheinwerk-Shop: Responsive Webdesign
Responsive Webdesign


Zum Rheinwerk-Shop: Website-Konzeption und Relaunch
Website-Konzeption und Relaunch


Zum Rheinwerk-Shop: UX Writing und Microcopy
UX Writing und Microcopy


Zum Rheinwerk-Shop: WordPress 5
WordPress 5


Zum Rheinwerk-Shop: Stile & Looks
Stile & Looks


Zum Rheinwerk-Shop: Digitale Illustration
Digitale Illustration


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und in die Schweiz
InfoInfo

 
 


Copyright © Rheinwerk Verlag GmbH 2020
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

 
[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern