Vielleicht wird der eine oder andere über google schon gesucht und auf das ein oder andere Color Wheel gestoßen sein. Eine großartige Hilfe, da man hier einfach eine Farbe anwählen kann und dann gleich einige dazu passende Farben – oder aber auch konträre Farben – zur Auswahl erhält. Die Lesbarkeit einer Webseite erhöht sich aber in jedem Fall durch die Wahl passender Kontrastfarben positiv beeinflusst. In diesem Artikel gibt es praktische Hinweise, wie man genau solche Farben findet.
Nützlich ist das vor allem, wenn man gerade erst anfängt und vielleicht eher einen Überblick benötigt, welche Farben gut miteinander vereinbar sind, um ein Farbschema für eine Webseite festzulegen.
Doch was, wenn eine Webseite bereits existiert und z.B. unter SEO-Gesichtspunkten der Kontrast der angezeigten Texte und Links optimiert werden soll!?
Color Wheel: Hilfreiches Tool? Teilweise!
Die meisten Menschen dürften an dem Punkt verzweifeln, weil ein Color Wheel zwar sehr gut passende Farben zusammenstellt, aber nicht berücksichtigen kann, wie z.B. die Hintergrundfarbe ist. Klar dürfte jedem sein, das ganz helle Farben im Hintergrund mit ganz dunklen Farben im Vordergrund sehr gute Kontraste ergeben. Jedoch ist auch klar, dass immer nur „Schwarz auf Weiß“ nicht den kreativen und passenden Anspruch an jede Webseite enthält. Hier hilft spannenderweise eine bereits in Chrome eingebaute Funktionalität einfach und schnell weiter. Ohnehin haben viele ja Chrome bereits installiert und fürs Testing bzw. die Qualitätssicherung einer Webseite und dem entsprechenden Webdesign braucht man ihn sowieso, denn der Nutzeranteil an Chrome (in Deutschland um die 40% ) ist eine Größe, die man nicht unbeachtet lassen sollte!
Geht man in Chrome mit F12 auf die Entwicklerwerkzeuge kann man sich zunächst im Quelltext umschauen, aber auch durch entsprechende Klicks Elemente auf der Webseite näher beleuchten. Unter anderem auch die zugewiesenen CSS-Eigenschaften. Klickt man nun bei einem Farbwert auf das kleine Viereck mit der Farbe, öffnet sich ein Overlay, welches einerseits ein Color Wheel enthält, den aktuellen Farbwert größer darstellt und eine Auswahl aller auf der Webseite verwendeten Farben bietet.
Und andererseits auch die Kontrast-Ratio zwischen Vorder- und Hintergrundfarbe angibt. Ein rotes x steht hier für ein zu schwaches Verhältnis (unterhalb von 4.5) bzw. ein gutes (ab 4.5, ein grüner Haken) oder sehr gutes (ab 7, zwei grüne Haken).
Drei einfache Punkte, die Sie auch ohne weitere Tools hinbekommen können:
- Wählen Sie eine passende Schriftart (Schriftgröße mind. 12 pt, Zeilenabstand kann ruhig auch 1,5 sein)
- Vermeiden Sie wechselnde Hintergründe und -Farben
- Nutzen Sie Absätze, um den Text zu unterteilen
Weiteres Hilfreiches
Linktip: https://developers.google.com/web/fundamentals/accessibility/accessible-styles#color_and_contrast
Ist zwar auf Englisch, bietet aber eine gute Übersicht vor allem dazu, wie Chrome seine Bewertung für Kontraste ermittelt.
Weitere hilfreiche Tipps inkl. Auswertung aller Ihrer Seiten erhalten Sie über unsere Webseiten SEO Tools. Gern beraten und helfen wir weiter bei Fragen rund um die Gestaltung ihrer Webseite und der Erstellung bzw. dem Update Ihres Webdesigns.
