Gestern war es sonnig und 85 Grad. Heute ist es kalt, windig und regnerisch bei 54 Grad.

Das ist ein Kontrast.

Designer haben die Möglichkeit, Dinge homogen zu halten; Schriftarten, Elemente, Layouts und Größen könnten alle konsistent bleiben und die Welt würde nicht untergehen.

Aber so funktioniert Design nicht – wir versuchen, Dinge anders zu machen, herauszustechen und zu sagen „Schau mich an!“ Also lernen wir über Schriftpaarung, wir verwenden mehrere Elemente, überarbeiten unsere Layouts und ändern die Größe und Ausrichtung unserer Inhalte, um sie für die Betrachter interessanter und zugänglicher zu machen.

Farbkontrast ist ein weiteres Element, mit dem Designer nicht nur für ästhetische Effekte, sondern auch für die allgemeine Zugänglichkeit spielen.

Farbkontrast im Design

Das Wort „Kontrast“ bedeutet einfach „Unterschied“.

Zum Beispiel haben Rot-Orange und Orange einen niedrigen Kontrast; Rot und Grün haben einen hohen Kontrast.

Während viele kontrastierende Farbpaletten interessant und manchmal sogar ästhetisch ansprechend sind, dienen kontrastierende Farben einem zusätzlichen Zweck: der Benutzerzugänglichkeit.

Farbkontrast aus ästhetischen Gründen

Um es gelinde auszudrücken, ist die Wahl von Farben mit hohem Kontrast für ein Design ein mutiger Schritt. Unten sind Beispiele für Farben mit hohem Kontrast. Diese Paare liegen direkt gegenüber auf dem Farbkreis. 

 

Sie sind definitiv viel zu betrachten. Aber manchmal zahlt sich Mut aus. Kommen Ihnen diese Farben nicht ein wenig bekannt vor?  

Quelle: Gerard Malanga, Andy Warhol

Kunst und Design, die Farben mit hohem Kontrast verwenden, „poppen“ wirklich heraus. Designs wie diese zu betrachten, schafft ein einzigartiges Erlebnis, kann aber auch ein wenig schmerzhaft werden.

Aufgrund dieser Haftung ist hoher Farbkontrast nicht immer die beste Idee im Design. Gleichzeitig kann niedriger Farbkontrast auch eine schlechte Idee sein; die Verwendung dieser Schemata macht es schwer, zwischen den Elementen zu unterscheiden.

Während Designs mit niedrigem Kontrast eine eigene Ästhetik haben, sind sie nicht immer die beste Wahl für Marketingmaterialien oder Verpackungsdesign.

Die Verwendung von Farbkontrast in physischen Produkten dreht sich darum, ein Gleichgewicht zwischen Hochs und Tiefs zu finden. Im grundlegenden Design gibt es keine Formel für guten Kontrast; es erfordert ein gutes Auge und viel Übung.

Farbkontrast aus Gründen der Zugänglichkeit

Farbkontrast ist mehr als nur eine Ästhetik; es ist auch eine Notwendigkeit, besonders im Web. Das Wichtigste, was man hier beachten muss, ist, dass wenn man eine Website erstellt, eine Präsentation entwirft oder eine Infografik gestaltet, es entscheidend ist, dass die bereitgestellten Informationen für alle Beteiligten zugänglich sind.

Einer der besten Wege, dies zu erreichen, ist sicherzustellen, dass die Farben, die man in seinem Design – grafisch oder web – verwendet, einen hohen Kontrast haben.

Kontrast im Web

WCAG (Web Content Accessibility Guide) 2.0 bietet spezifische Richtlinien, um sicherzustellen, dass der Farbkontrast zwischen Vordergrund (Text, Bilder usw.) und Hintergrund durch ein Verhältnis angemessen ist. Dieses Verhältnis variiert auch je nach Größe und Gewicht des verwendeten Textes.

WCAG 2.0 drückt aus, dass Kontrast ein Maß für den Unterschied in der wahrgenommenen Helligkeit zwischen zwei Farben ist. Dieser Unterschied wird mit einem Verhältnis zwischen 1:1 (niedrigster möglicher Kontrast; weißer Text auf weißem Hintergrund) und 21:1 (höchstmöglicher Kontrast; schwarzer Text auf weißem Hintergrund oder umgekehrt) angegeben.

Das von der WCAG angegebene Mindestkontrastverhältnis beträgt 4,5:1 mit Ausnahme von großem Text, Logos oder absichtlich niedrigem Kontrast im Web. Hexadezimale Werte der verwendeten Farben sind notwendig, um den Kontrast zu messen.

Das ist alles ein wenig verwirrend. Lassen Sie uns das in die Praxis umsetzen.

 

Während einige der obigen Texte für Sie lesbar sein mögen, können sie für andere mit Sehbehinderungen schwer oder unmöglich zu lesen sein. Selbst die letzte Option mit einem Verhältnis von 4,57:1 ist schwer anzusehen. Denken Sie daran, dass 4,5:1 das Mindestmaß ist.

Die Einbeziehung eines angemessenen Kontrasts ist nur eines der vielen Webdesign-Elemente, die für eine großartige Website notwendig sind. Sind Sie sich nicht sicher, ob Sie es gut genug machen? Software zur Überprüfung des Farbkontrasts kann Ihnen helfen sicherzustellen, dass die von Ihnen verwendete Farbpalette für die bestmögliche Benutzererfahrung optimiert ist. 

Können Sie mich jetzt lesen?

Nein! Schauen Sie sich das an, ein perfektes Beispiel dafür, wie dieser Header des Fazits 1. hässlich und 2. unmöglich zu lesen ist.

Sie können Studien über Farbkontrast, Farbenblindheit und Zugänglichkeit lesen, aber es gibt nichts Vergleichbares wie diese Frustration aus erster Hand zu erleben. Es ist nicht angenehm, also tun Sie Ihre Pflicht, um sicherzustellen, dass Ihre Benutzer und Betrachter es auch nicht erleben.

Kontrast erscheint unterschiedlich, je nachdem, ob Ihr Projekt gedruckt oder digital ist. Erfahren Sie mehr über den Unterschied zwischen RGB vs CMYK.