Farb- und Schriftwahl für die Website

01Warum sind Farben und Schriftarten so wichtig?

Bevor Besucher einen Text lesen, nehmen sie Farben und Buchstabenformen wahr. Dieser erste Eindruck bildet blitzschnell ein Urteil darüber, ob ein Unternehmen seriös, warm, innovativ oder vertrauenswürdig wirkt.

Farbe und Typografie sind nicht nur eine Frage des Geschmacks, sondern wirken direkt auf Lesbarkeit, Barrierefreiheit und Conversion. Ein blassgrauer Text kann edel aussehen, doch wenn man ihn nicht lesen kann, verlassen Besucher die Seite. Und eine unklare Buttonfarbe lässt die wichtigste Handlung untergehen.

Deshalb gehören Farb- und Schriftentscheidungen zu den Grundsatzentscheidungen, die fallen sollten, bevor der Rest der Website gestaltet wird. Sie sind einer der ersten Schritte im UI/UX-Design-Prozess.

02Farbpalette aus den Firmenfarben aufbauen

Wenn Sie ein Logo und Drucksachen haben, sind sie der Ausgangspunkt der Farbpalette. Gerade eine Unternehmenswebsite ist das digitale Gesicht der Marke: Wer auf der Visitenkarte Marineblau nutzt, sollte am Bildschirm nicht plötzlich Orange zeigen. Ist die Corporate Identity noch nicht klar, legen Sie dieses Fundament besser zuerst mit einer Markenführung fest.

Firmenfarben allein reichen für eine Webpalette meist nicht aus. Neben einer Hauptfarbe braucht es Töne für Hintergrund, Text, Rahmen sowie Warn- und Erfolgszustände. Eine gute Farbpalette fürs Webdesign besteht aus diesen Ebenen:

• Hauptfarbe: die Markenfarbe, eingesetzt in Überschriften, Menü und hervorgehobenen Bereichen.
• Akzentfarbe: für Handlungsaufforderungen wie Buttons und Links, passend zur Hauptfarbe, aber klar davon abgesetzt.
• Neutrale Töne: vier bis fünf Abstufungen von Weiß bis Dunkelgrau für Hintergrund und Text.
• Statusfarben: Rot für Fehler, Grün für Erfolg, Gelb für Warnungen, in Formularen und Meldungen.

Die 60-30-10-Regel

Diese praktische Regel aus der Innenarchitektur hilft auch im Web: Etwa 60 Prozent der Flächen sind neutraler Hintergrund, 30 Prozent Hauptfarbe und Sekundärbereiche, 10 Prozent Akzentfarbe. Die Verteilung ist kein Zwang, sondern ein Orientierungswert für das Gleichgewicht, damit die Farbe die Seite nicht erdrückt.

Schützen Sie die Akzentfarbe

Wird die Akzentfarbe überall eingesetzt, verliert sie ihren Wert. Wer sie für zentrale Aktionen wie »Angebot anfordern« oder »Jetzt anrufen« reserviert und nicht für Dekoration verwendet, lenkt den Blick der Besucher an die richtige Stelle.

03Kontrast und Barrierefreiheit

Bei der Farbwahl wird der Kontrast am häufigsten übersehen. Nach den WCAG-Richtlinien sollte zwischen normalem Text und Hintergrund ein Kontrastverhältnis von mindestens 4,5:1 bestehen, bei großem Text mindestens 3:1. Weiße Schrift auf hellem Grau oder helle Schrift auf pastelligem Grund liegt unter dieser Schwelle.

Prüfen Sie den Kontrast mit Messwerten statt nach Gefühl. Die Entwicklertools der Browser und kostenlose Kontrastprüfer zeigen das Verhältnis zweier Farben sofort an. Vermitteln Sie Informationen außerdem nicht allein über Farbe: Einen Fehler in einem Formularfeld kennzeichnen Sie nicht nur mit rotem Rahmen, sondern zusätzlich mit einem erklärenden Text.

04Wie viel Farbpsychologie steckt wirklich drin?

Oft heißt es, Blau stehe für Vertrauen, Grün für Natur und Rot für Energie. Diese Assoziationen sind kulturell verbreitet, aber keine universellen Gesetze; dieselbe Farbe kann in verschiedenen Branchen und Tönen völlig andere Gefühle wecken.

Verlässlicher ist es, die Gewohnheiten Ihrer Branche zu betrachten und sich bewusst abzuheben. Nutzen alle Wettbewerber Marineblau, geht Ihre Marke mit demselben Ton im Einheitsbrei unter; eine völlig ungewöhnliche Farbe kann dagegen Vertrauen kosten. Meist am ausgewogensten ist es, die Hauptfarbe mit Ihrer Marke und die Akzentfarbe mit der Handlung zu verknüpfen.

Im Auswahlprozess lohnt es sich, mehrere Kandidatenpaletten auf denselben Startseitenentwurf anzuwenden und nebeneinander zu vergleichen – das führt viel schneller zum Ergebnis als abstrakte Diskussionen. Entscheiden Sie nicht nach persönlichem Geschmack, sondern anhand von drei Fragen: Erinnert die Farbe an die Marke? Lässt sich der Text bequem lesen? Fällt der Haupt-Button auf der Seite auf den ersten Blick auf? Lautet die Antwort dreimal Ja, erfüllt die Palette ihren Zweck.

05Wie wählt man Webfonts richtig aus?

Die Auswahl der Webfonts wird weniger diskutiert als die Farbe, beeinflusst die Lesbarkeit aber stärker. Die erste Regel lautet: Beschränken Sie sich. Eine Schrift für Überschriften, eine für den Fließtext – höchstens zwei Schriftfamilien. Oft reichen sogar verschiedene Schnitte einer einzigen Familie.

Unterstützung von Sonderzeichen

Für eine türkischsprachige Website muss die Schrift die Buchstaben ğ, ş, ı, İ, ç, ö, ü vollständig unterstützen. Fehlen sie, werden diese Zeichen in einer anderen Schrift dargestellt, und mitten im Wort entsteht ein Stilbruch. Testen Sie eine Schrift vor der Wahl mit Wörtern wie Ilgaz, Işık oder Şişli; vor allem das große İ und das kleine ı können Probleme machen. Für deutsche Seiten gilt dasselbe für Umlaute und das ß.

Serif oder Sans-Serif?

Schriften mit Serifen wirken klassisch und elegant und eignen sich gut für Überschriften. Serifenlose Schriften (Sans-Serif) sind am Bildschirm, vor allem in kleinen Größen, klarer lesbar und die übliche Wahl für den Fließtext. Eine Serif-Überschrift mit einer Sans-Serif-Textschrift ist eine häufig genutzte, ausgewogene Kombination.

06Maße für gut lesbare Typografie

Auch eine gute Schrift ermüdet, wenn sie mit falschen Maßen eingesetzt wird. Bei den Typografie-Einstellungen sind diese Werte ein solider Ausgangspunkt:

07Schriftarten dürfen die Website nicht ausbremsen

Jede Schriftdatei verlängert die Ladezeit der Seite. Fünf Schnitte in zwei Familien zu laden, verzögert vor allem bei mobilen Verbindungen die erste Darstellung. Schriften im Format WOFF2 zu verwenden, nur die tatsächlich benötigten Schnitte zu laden und den Zeichensatz auf lateinische Buchstaben samt Sonderzeichen zu beschränken, senkt die Dateigröße spürbar.

Damit der Text nicht unsichtbar bleibt, bis die Schrift geladen ist, kommt die Einstellung font-display zum Einsatz. Sie gehört zu den ersten Stellschrauben bei der Speed- und Performance-Optimierung. Auch Farbwerte als CSS-Variablen zu definieren, erleichtert es, die Palette zentral zu verwalten und Varianten wie ein dunkles Theme umzusetzen.

:root {
  --renk-ana: #1d3557;
  --renk-vurgu: #e76f51;
  --renk-metin: #1f2933;
  --renk-zemin: #ffffff;
}

@font-face {
  font-family: 'Gövde';
  src: url('/fontlar/govde.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Gövde', system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--renk-metin);
  background: var(--renk-zemin);
}

08Die Auswahl testen

Testen Sie Farbe und Schrift nicht in einer Designdatei, sondern mit echten Inhalten auf echten Geräten. Dieselbe Seite auf einem Smartphone in der Sonne, auf einem älteren Laptop-Display und auf einem großen Monitor zu betrachten, deckt Probleme auf, die auf dem Papier unsichtbar bleiben.

Konsistenz ist ebenso wichtig wie der Test. Eine einmal festgelegte Palette samt Schrift muss auf allen Seiten, die eine Website haben sollte, nach denselben Regeln angewendet werden. Fertige Vorlagen schränken diese Flexibilität oft ein; den Unterschied haben wir in unserem Beitrag Fertigtheme oder individuelles Design untersucht. Weitere Beiträge zum Thema finden Sie unter dem Stichwort Markenidentität.