Der visuelle Kontrast von Elementen spielt nicht nur im Printbereich eine große Rolle. Unter vielerlei Gesichtspunkten ist guter Kontrast auch für die Gestaltung im Web unerlässlich.
Dieser kann nämlich sowohl die Aufmerksamkeit des Benutzers in eine bestimmte Richtung, beispielsweise einen CTA-Button o. Ä. lenken, als auch Elemente bewusst voneinander abgrenzen.
Guter Kontrast ist wichtig für..
- Barrierefreiheit (Web Accessability)
- Nutzererfahrung (User Experience / UX)
- Conversion Rate
Arten von Kontrast
Im folgenden stellen wir die drei unserer Meinung nach wichtigsten Arten von Kontrast vor und wie Ihr diese in Euer Web Design integrieren könnt.
Kontrast durch Farben
Dieses Prinzip ist wohl das erste, was einem in den Sinn kommt, wenn man an das Wort "Kontrast" denkt.
Zunächst sollte man bedenken, dass jede Farbe im Kontrast zu einer anderen steht, jedoch ist nicht jeder Kontrast visuell ansprechend. Schon in der Schule wird einem beigebracht, mit gelbem Stift nicht auf weißes Papier zu schreiben, da dies aufgrund schlechten Kontrastes zu schlechter Lesbarkeit führt.
Sicher ist dir beim Besuch einer Zahlungsplattform oder eines Online-Shops schon aufgefallen, wie der Kontrast der Buttons und Links, welche dich im Zahlungsprozess voranbringen sollen, sich von den anderen Elementen auf der Seite unterscheiden. Instinktiv wandert das Auge des Benutzers dorthin, was für die Conversion Rate eines Shopbetreibers essentiell wichtig für dessen Erfolg ist.
Kontrast durch Größe
Auch durch unterschiedliche Größen von verwendeten Schriften, Elementen, etc. lassen sich sowohl optische Trenner als auch inhaltliche Gewichtung dieser erzeugen.
Oft werden Farb- und Größenkontrast miteinander kombiniert, beispielsweise bei der H1 Headline auf einer Website, welche die semantisch wichtigste und Aussagekräftigste Überschrift sein sollte. Deshalb wird sie oft nicht nur farblich anders, sondern auch größer dargestellt.
Doch auch hier gilt es den ästhetischen Rahmen nicht zu sprengen. Man sollte sich bei der Größe von Elementen langsam vorantasten und einschätzen, wie das hervorgehobene Element nun zu anderen auf der Seite wirkt. Schnell kann es passieren, dass ein zu großer Button oder überdimensionaler Header klobig statt ansprechend wirkt
Kontrast durch Abstand
Um ein harmonisches und ansprechendes Layout zu gestalten, sollte man immer an genug "white space" denken. Die Abstände zwischen den Elementen wirken als optische Trenner zum restlichen Inhalt der Website und erleichtern die Lesbarkeit von Fließtexten. Durch die Verwendung von großen, bzw. kleinen Abständen lassen sich Inhalte zudem unterschiedlich gewichten.
Fazit
Man merkt schnell, dass obwohl einem die Macht von Kontrasten durchaus logisch erscheint, man oft in der Praxis nicht genau darauf achtet. Barrierefreiheit und hohe User Experience sind mehr denn je ein Rankingfaktor bei Google und bringen deine Website in den Suchergebnissen nach oben.
Weitere interessante Beiträge...
