Farben für Ihre Website auswählen: Rollen, Kontraste und Beispiele

Eine Website braucht nicht für jeden Abschnitt eine neue Farbe. Sie braucht eine nachvollziehbare Zuordnung: Welche Flächen tragen längere Texte, was ist anklickbar und wie werden Hinweise dargestellt? Wenn diese Rollen feststehen, lässt sich auch eine vorhandene Unternehmensfarbe sinnvoll einsetzen.

Wählen Sie Farben deshalb nicht ausschließlich auf einer Palette aus. Lassen Sie damit eine echte Leistungsseite, einen Kontaktbereich und einen Formularfehler gestalten. Erst in diesen Anwendungen zeigt sich, ob die Kombination nicht nur gefällt, sondern auch funktioniert.

Von Ihrer Unternehmensfarbe zu einer brauchbaren Palette

Angenommen, ein Betrieb besitzt ein leuchtend grünes Logo und möchte diese Farbe auf seiner neuen Website wiederfinden. Das Grün könnte die wichtigste Kontaktfläche markieren oder einzelne grafische Details verbinden. Längere Beschreibungen benötigen deshalb noch keine grünen Buchstaben.

Für einen ersten Entwurf genügen klar benannte Rollen: eine helle Grundfläche, eine dunkle Textfarbe, eine Akzentfläche und Farben für verständliche Statusmeldungen. Die Anzahl ist keine feste Gestaltungsregel. Wichtig ist, dass eine zusätzliche Farbe eine Aufgabe erhält und nicht nur eingeführt wird, weil ein Abschnitt sonst zu ruhig erscheint.

Drei Farbpaarungen mit sehr unterschiedlichem Ergebnis

Betrachten wir ein konkretes Rechenbeispiel mit deckenden, einfarbigen Flächen. Das helle Grün trägt den Farbwert #A3E635, das dunkle Grün #172018. Die folgenden Kontrastwerte wurden aus diesen sRGB-Farbwerten berechnet und zur Darstellung gerundet. Fotos, Transparenzen und Verläufe sind in diesem Beispiel nicht enthalten.

Das Beispiel zeigt: Dieselbe auffällige Schaltfläche kann mit dunkler Beschriftung gut unterscheidbar sein, während weiße Schrift darauf kaum Kontrast bietet. Dafür muss die Unternehmensfarbe nicht ausgetauscht werden. Es wird ihre Kombination mit der Textfarbe geändert.

Das W3C erläutert für WCAG 2.2, Kriterium 1.4.3, mindestens 4,5:1 für normalen Text und 3:1 für entsprechend große Schrift, jeweils mit definierten Ausnahmen. Die Einstufung „groß“ hängt von Schriftgröße und Gewicht ab. Ein nur knapp unterschrittener Wert darf bei der Prüfung nicht aufgerundet werden. Ein bestandener Textkontrast allein bestätigt noch keine vollständig barrierefreie Website.

Farben nach Aufgaben festhalten

Schreiben Sie zu jeder verwendeten Kombination einen einfachen Anwendungssatz auf. Beispielsweise: „Längere Texte stehen dunkel auf der hellen Grundfläche.“ Oder: „Der wichtigste Anfrageknopf verwendet die grüne Fläche mit dunkler Beschriftung.“ Solche Sätze helfen auch später, wenn eine weitere Unterseite ergänzt wird.

Benennen Sie zusätzlich die Darstellung beim Antippen, beim Überfahren mit der Maus und bei Tastaturfokus. Eine Schaltfläche darf in ihrem veränderten Zustand nicht plötzlich schlecht lesbar werden. Ebenso sollte eine umrandete Variante auf einer dunklen Fläche noch deutlich erkennbar sein. Die Prüfung bezieht sich auf die tatsächlich verwendeten Zustände, nicht nur auf die ruhende Ansicht im Entwurf.

Eine rote Meldung braucht auch eine Erklärung

Wenn im Formular eine Telefonnummer fehlt, sollte eine Meldung das erklären. Ein roter Rahmen allein sagt weder, welches Format erwartet wird, noch ob das Feld überhaupt Pflicht ist. Eine mögliche Rückmeldung wäre: „Bitte geben Sie eine Telefonnummer für den gewünschten Rückruf ein.“ Das Beispiel setzt voraus, dass tatsächlich ein Rückruf angefragt wurde.

Auch ein ausgewählter Menüpunkt oder ein Link im Fließtext sollte nicht allein über eine andere Farbe verständlich werden. Das W3C-Kriterium zur Verwendung von Farbe verlangt, dass Farbe nicht das einzige visuelle Mittel zur Vermittlung solcher Informationen ist. Je nach Aufgabe helfen zusätzlich Text, Unterstreichung, Form oder ein eindeutiges Symbol.

Fotos und dunkle Abschnitte gesondert betrachten

Eine weiße Überschrift kann auf der dunklen Ecke eines Fotos gut lesbar sein und nach dem mobilen Zuschnitt auf einem hellen Himmel liegen. Prüfen Sie deshalb den gesamten Bereich hinter dem Text und alle vorgesehenen Zuschnitte. Eine einfarbige Textfläche neben dem Bild kann hier verlässlicher sein als ein immer stärker abgedunkeltes Foto.

Bei dunklen Abschnitten genügt es ebenfalls nicht, die bisherige Textfarbe einfach umzukehren. Links, Trennlinien, kleine Hinweise und Formularfelder brauchen passende Varianten. Lassen Sie sich einen vollständigen Abschnitt zeigen, einschließlich des Übergangs zur nächsten hellen Fläche.

Die Farbauswahl an einer Seite entscheiden

Vergleichen Sie zwei Entwürfe mit denselben Texten und Bildern. So sehen Sie, welche Wirkung tatsächlich aus den Farben entsteht. Eine universelle Behauptung wie „Blau schafft Vertrauen“ erklärt dagegen nicht, ob Ihre Kontaktmöglichkeiten erkennbar sind und der Auftritt zu Ihrem Unternehmen passt.

Eine kurze Farbübersicht mit Werten, Einsatzrollen und geprüften Kombinationen erleichtert die spätere Pflege. Wenn Sie Logo und Website gemeinsam gestalten lassen, sollten beide Anwendungen dabei berücksichtigt werden. PEMKO kann die Farbgestaltung mit der Websitegestaltung abstimmen. Für eine Anfrage sind Ihr vorhandenes Logo und konkrete Stellen, die Ihnen heute uneinheitlich oder schwer lesbar erscheinen, eine hilfreiche Grundlage.