Farben klug einsetzen

Es gibt Tools und Prozesse, die Ihnen helfen können, ein gutes Farbschema zu wählen. Während sie nicht die Unterstützung eines guten Designers ersetzen können, der Ihnen bei diesen Entscheidungen hilft, können sie dennoch einen Anfang bieten.

Der erste Schritt besteht darin, Ihre Basisfarbe auszuwählen. Diese Farbe repräsentiert Ihre Website oder deren Thema. Ebenso wie wir Grün mit dem Getränk Mountain Dew, Blau mit dem Himmel oder dem Ozean assoziieren, ist es ein guter Anfang, eine geeignete Basisfarbe zur Repräsentation Ihrer Seite zu wählen. Es gibt viele Möglichkeiten, eine Basisfarbe auszuwählen; ein paar Ideen sind:

• Eine Farbe, die natürlich mit dem Thema Ihres Inhaltes assoziiert wird, wie eine bereits vorhandene Farbe, die mit einem Produkt oder einer Idee identifiziert wird, oder eine Farbe, die die Emotion repräsentiert, die Sie vermitteln möchten.
• Eine Farbe, die aus Bildern stammt, die mit Ihrem Thema assoziiert werden. Wenn Sie eine Website über ein bestimmtes Objekt oder Produkt erstellen, wählen Sie eine Farbe, die physisch auf diesem Objekt vorhanden ist.
• Durchsuchen Sie Websites, die es Ihnen ermöglichen, viele bestehende Farbpaletten und Bilder anzusehen, um Inspiration zu finden.

Es gibt mehrere nützliche Browser-Erweiterungen, die dabei helfen können, Basisfarben auszuwählen. Beispielsweise bietet die ColorZilla-Browsererweiterung ein Pipettenwerkzeug, um Farben von jeder Webseite auszuwählen. Sie kann auch Durchschnittswerte der Farben eines Bereichs einer Seite ermitteln.

Das Erfassen einer "durchschnittlichen Farbe" ist nützlich, weil manchmal das, was wie ein solider Farbblock aussieht, tatsächlich mehrere verwandte Farben sein könnte, wie z.B. das Erfassen des Blaus eines Fotos des Ozeans oder des Himmels. Ein einzelnes blaues Pixel, das aus einem Foto ausgewählt wird, könnte zu einer Farbe führen, die fehl am Platz aussieht.

Sobald Sie Ihre Basisfarbe gewählt haben, besteht der nächste Schritt darin, eine Palette von geeigneten Farben zu erstellen, die Sie daneben verwenden können. Es gibt mehrere Tools, um Farbtheorie auf Ihre Basisfarbe anzuwenden und geeignete zusätzliche Farben zu ermitteln. Online-Tools, wie das kostenlose Adobe Color CC Online-Farbrad, können Ihnen dabei helfen, eine zugängliche Farbpalette auszuwählen.

Viele dieser Tools können auch Filter auf Ihre Palette anwenden, damit Sie sehen können, wie sie für Menschen mit verschiedenen Formen der Farbenblindheit aussehen. Siehe Farbe und Barrierefreiheit für eine kurze Erklärung, warum dies wichtig ist.

Beim Entwerfen Ihrer Palette müssen Sie wahrscheinlich auch einige neutrale Kernfarben wie Weiß (oder fast Weiß), Schwarz (oder fast Schwarz) und eine oder mehrere Grautöne ergänzen.

Eine vollständige Überprüfung der Farbtheorie liegt außerhalb des Umfangs dieses Artikels, jedoch gibt es viele Artikel über Farbtheorie. Wir fanden die folgenden Ressourcen besonders nützlich:

Color Science (Khan Academy in Zusammenarbeit mit Pixar)

Ein Online-Kurs, der Konzepte wie, was Farbe ist, wie sie wahrgenommen wird und wie man Farben verwendet, um Ideen auszudrücken, vorstellt. Präsentiert von Künstlern und Designern von Pixar.

Farbentheorie auf Wikipedia

Der Wikipedia-Eintrag zur Farbentheorie enthält großartige Informationen aus technischer Perspektive. Es wird Ihnen wahrscheinlich nicht im Farbenauswahlprozess helfen, ist aber dennoch voll von nützlichen Informationen.

Stellen Sie sicher, dass Ihr Inhalt zugänglich ist. Es gibt mehrere Arten, wie Farben ein Barrierefreiheitsproblem schaffen können. Eine unsachgemäße oder achtlose Verwendung von Farbe kann zu einer Website oder App führen, die ein bestimmter Prozentsatz Ihrer Zielgruppe möglicherweise nicht angemessen nutzen kann, was zu verlorenem Traffic, verlorenem Geschäft und möglicherweise sogar zu einem Problem in der Öffentlichkeitsarbeit oder einer Klage führen kann. Deshalb ist es wichtig, Ihre Verwendung von Farbe sorgfältig zu überlegen.

Es ist wichtig, Farbe und Leuchtdichte zu verstehen und immer Farbenblindheit und vestibuläre Störungen zu berücksichtigen. Es gibt verschiedene Arten; die häufigste ist Rot-Grün-Farbenblindheit, bei der Menschen nicht zwischen den Farben Rot und Grün unterscheiden können. Es gibt auch andere, von der Unfähigkeit, den Unterschied zwischen bestimmten Farben zu erkennen, bis hin zur totalen Unfähigkeit, Farben überhaupt zu sehen. Es gibt sogar Farb- und Animationskombinationen, die bei Ihren fotosensiblen Nutzern Krämpfe hervorrufen können.

Während höherer Farbkontrast oft eine gute Sache in Bezug auf Barrierefreiheit ist, reduziert beim Animieren, besonders schnell, das Verringern des Farbkontrasts auf animierenden Elementen das Risiko von Krampfanfällen. Wenn Sie Animationen einfügen, verwenden Sie das prefers-reduced-motion @media Query-Feature, um Animationen für Benutzer zu reduzieren, die diese Präferenz ausgewählt haben.

Stellen Sie dennoch sicher, dass Sie genügend Farbkontrast zwischen Ihrem Hintergrund und dem Vordergrundinhalt haben, um die Lesbarkeit zu gewährleisten. Verwenden Sie auch niemals nur Farbe, um Informationen zu vermitteln. Wenn Sie beispielsweise den Erfolg eines Vorgangs mit einem grünen Rahmen um das zugehörige UI-Element und das Scheitern mit einem roten Rahmen anzeigen, können Benutzer mit Rot-Grün-Farbenblindheit Ihre Seite nicht richtig nutzen. Verwenden Sie stattdessen Text- und Farbindikatoren zusammen, um diese Benutzer einzubeziehen. Beispielsweise wären ein grünes Häkchen und ein rotes Kreuz bessere Optionen.

In diesem Beispiel erstellen wir eine geeignete Farbpalette für eine Website für ein Spiel, das auf dem Planeten Mars spielt. Eine Google-Suche nach Fotos des Mars liefert mehrere Farbfotos.

Verwenden Sie ein Farbaufnahme-Tool, um ein Farbmuster für die Basisfarbe auszuwählen. Für dieses Beispiel haben wir #D79C7A gewählt, was ein rostiges Orange-Rot ist. Wir können Paletton verwenden, um die anderen Farben für unsere Palette zu entwickeln. Beim Öffnen von Paletton sehen wir:

Als nächstes geben wir den Hex-Code unserer Farbe (D79C7A) in das "Base RGB"-Feld in der linken unteren Ecke des Tools ein:

Wir sehen jetzt eine monochromatische Palette basierend auf der Farbe, die wir aus dem Mars-Foto gewählt haben. Wenn Sie verwandte Farben benötigen, sind dies wahrscheinlich gute Optionen. Um eine Akzentfarbe zu finden, die neben der Basisfarbe auffällt, klicken wir auf das "add complementary"-Toggle unterhalb des Menüs, das Ihnen die Auswahl des Palettentyps ermöglicht. Der Standard war "Monochromatisch". Paletton berechnet eine passende Akzentfarbe; wenn Sie auf die Akzentfarbe in der rechten unteren Ecke klicken, erfahren wir, dass diese Farbe #508D7C ist.

Wenn die vorgeschlagene Farbe für Ihre Bedürfnisse nicht passt, können Sie das Farbschema ändern. Zum Beispiel, wenn die vorgeschlagene grün-blaue Farbe nicht funktioniert, wählen Sie das Triad-Farbschema-Symbol, was zu folgendem Ergebnis führt:

Klicken Sie auf das graublaue im oberen rechten Bereich. Die Farbe ist #556E8D. Diese kann als Akzentfarbe verwendet werden, um Dinge hervorzuheben, wie z.B. für Überschriften, Registerkarten-Hervorhebungen oder andere Indikatoren auf der Seite:

Jetzt haben wir unsere Basisfarbe und unseren Akzent. Wir haben auch einige komplementäre Schattierungen von beiden, die verwendet werden können, um Verläufe zu erstellen oder als Akzentfarbe, um Fokus zu markieren, wie z.B. für Link-Hover-Zustände. Die Farben können in mehreren Formaten exportiert werden, die Sie verwenden können.

Sie sollten auch neutrale Farben auswählen. Finden Sie eine Farbe, die genügend Kontrast bietet, damit Ihr Text klar und lesbar ist, während Sie sicherstellen, dass sie nicht unangenehm für die Augen ist. Wenn der Kontrast zu niedrig ist, wird Ihr Text durch den Hintergrund ausgewaschen und unleserlich, aber wenn Ihr Kontrast zu hoch ist, könnte Ihr Benutzer Ihre Seite als grell und unangenehm empfinden.

Ihre Website kann beim Drucken sehr anders aussehen als auf dem Bildschirm des Benutzers. Wenn Ihre Seite gedruckt wird, kann der Benutzer auswählen, dass sie nur in Schwarz-Weiß gedruckt wird. Die meisten Browser entfernen standardmäßig Hintergrundfarben und Bilder beim Drucken von Dokumenten.

In der Regel ist der Text selbst das Wichtigste, aber wenn Ihre Hintergrundfarben und Bilder sorgfältig ausgewählt wurden und/oder entscheidend für die Nützlichkeit des Inhalts sind, können Sie die CSS-Eigenschaft print-color-adjust verwenden, um dem Browser mitzuteilen, dass es keine Anpassungen der Erscheinung des Inhalts vornehmen sollte.

Der Standardwert print-color-adjust: economy gibt an, dass der Browser Änderungen an der Erscheinung vornehmen darf, die er für notwendig erachtet, um die Lesbarkeit und/oder Druckwirtschaftlichkeit des Inhalts zu optimieren, abhängig von der Art des Ausgabegeräts, auf dem das Dokument gezeichnet wird.

Sie können print-color-adjust: exact setzen, um dem Browser mitzuteilen, dass das Element oder die Elemente, für die Sie dies verwenden, speziell entworfen wurden, um am besten mit den Farben und Bildern so zu arbeiten, wie sie sind. Mit dieser Einstellung wird der Browser nicht das Erscheinungsbild des Elements, für das dieser Wert angewendet wird, verändern und es so zeichnen, wie es durch Ihr CSS angegeben ist.

• Farbe auf HTML-Elemente mit CSS anwenden
• CSS-Farbwerte
• Relative Farben verwenden
• CSS Farbmodul
• Verstehen von Farbe und Leuchtdichte
• WCAG 1.4.1: Farbkontrast
• Paletton