# Farbschema für Websites: Farben für eine Seite wählen

[Canonical HTML page](https://gradiently.design/de/guide/website-color-scheme)

Eine Website braucht weniger Farben, als du denkst, und jede braucht eine Aufgabe. Gib ihnen Rollen, prüfe sie gegeneinander, und die ganze Seite bleibt beim Wachsen einheitlich.

## The short version

- Ein Farbschema für Websites funktioniert am besten als kurze Liste von Rollen: Seitengrund, Fläche, Text, gedämpfter Text, Rahmen, Akzent und Statusfarben.
- Die meisten Seiten brauchen einen Markenakzent, vor allem für Buttons und Links, während Neutraltöne den Rest erledigen.
- WCAG verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente wie Rahmen von Eingabefeldern.
- Farben als CSS Custom Properties oder Design Tokens zu speichern lässt eine ganze Seite das Theme wechseln, indem du einen Satz Werte austauschst.
- Ein dunkles Theme ist ein eigener Satz Werte für dieselben Rollen, keine Umkehrung des hellen.

Ein gutes **Farbschema für Websites** ist kein Moodboard aus fünf Lieblingsfarben. Es ist eine kurze Liste von Rollen, jede mit einer Farbe besetzt: Seitengrund, erhöhte Flächen, Fließtext, leiserer Text, Rahmen, ein Akzent für Aktionen und Rot, Bernstein und Grün für Status. Wähle zuerst deinen Markenakzent, bau ruhige Neutraltöne darum, prüfe jede Textkombination auf Kontrast und speichere das Ergebnis als CSS Variablen, damit die ganze Seite dieselben Werte nutzt.

## Die Rollen, die jede Website braucht

| Rolle | Genutzt für | Faustregel |
| --- | --- | --- |
| Grund | Der Seitenhintergrund | Leicht getönt statt reinweiß oder reinschwarz wirkt weicher |
| Fläche | Karten, Panels, Menüs | Eine Stufe heller (helles Theme) oder noch heller (dunkles Theme) als der Grund |
| Text | Überschriften und Fließtext | Sehr hoher Kontrast zu Grund und Fläche |
| Gedämpfter Text | Bildunterschriften, Labels, Metadaten | Trotzdem mindestens 4,5:1 zum Grund |
| Rahmen | Trennlinien und Umrisse von Eingabefeldern | Dekorative Trennlinien dürfen schwach sein; Rahmen von Eingabefeldern brauchen 3:1 |
| Akzent | Buttons, Links, ausgewählte Zustände | Deine Markenfarbe, sparsam eingesetzt, damit sie „hier handeln“ bedeutet |
| Status | Fehler, Warnungen, Erfolg | Rot, Bernstein, Grün, abgestimmt auf deinen Akzent |

Sieben Rollen decken die meisten Seiten ab. Benenne Farben nach Rolle, nicht nach Farbton, dann ist ein späterer Wechsel der Markenfarbe eine einzige Änderung.

## So wählst du Farben für deine Website

1. **Starte mit einem Akzent** Deine Markenfarbe oder die, mit der Leute dich verbinden sollen. Hast du keine, hilft [Markenfarben wählen](https://gradiently.design/de/guide/how-to-choose-brand-colors).
2. **Tönt die Neutraltöne in seine Richtung** Grautöne mit einem Hauch vom Farbton des Akzents wirken verwandt. Eine Petrol-Marke bekommt kühle, leicht bläuliche Grautöne, eine Terrakotta-Marke warme, cremige.
3. **Entscheide hell, dunkel oder beides** Wähle das Theme, das die meisten Besucher zuerst sehen, und gestalte es vollständig, bevor du das andere beginnst.
4. **Prüfe jede Textkombination** Text auf Grund, Text auf Fläche, gedämpfter Text auf beidem, Weiß auf dem Akzent-Button. Korrigiere alles unter 4,5:1.
5. **Wende 60, 30, 10 an** Ungefähr 60% Grund, 30% Flächen und Text, 10% Akzent. Die [60 30 10 Regel](https://gradiently.design/de/guide/60-30-10-rule) erklärt die Balance.

## Drei Farbpaletten für Websites als Ausgangspunkt

- Grund: #f7f9fb
- Fläche: #ffffff
- Text: #14202b
- Gedämpfter Text: #52606d
- Rahmen für Eingaben: #8a96a3
- Petrol-Akzent: #0f766e

Ruhige Praxis, hell. Text auf Grund liegt bei etwa 15,7:1, gedämpfter Text bei 6,1:1, Weiß auf dem Petrol-Button bei 5,5:1, und der Rahmen für Eingaben erreicht auf Weiß knapp 3:1.

- Cremegrund: #fbf6ef
- Haferfläche: #efe4d6
- Espressotext: #2a1f17
- Gedämpfter Text: #635e68
- Terrakotta-Akzent: #b4441c

Warmes Café, hell. Espresso auf Creme liegt bei etwa 15:1, Weiß auf Terrakotta bei etwa 5,5:1, Button-Beschriftungen bleiben also lesbar.

- Nachtgrund: #0f0e17
- Erhöhte Fläche: #1a1926
- Text: #ecebf3
- Gedämpfter Text: #a5a3b8
- Flieder-Akzent: #a78bfa

Nachtstudio, dunkel. Gebrochenes Weiß statt reinem Weiß verringert Blendung; der Flieder-Akzent liegt auf dem Grund bei etwa 7:1, also nutze dunklen Text auf Flieder-Buttons.

## Kontrastregeln, die eine Seite lesbar halten

Die [WCAG Kontrastrichtlinien](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) setzen die Untergrenze: 4,5:1 für normalen Text, 3:1 für großen Text (etwa 24 px oder 19 px fett) und 3:1 für Bedienelemente wie Rahmen von Eingabefeldern und Icons mit Bedeutung. [WebAIMs Kontrastprüfer](https://webaim.org/resources/contrastchecker/) testet jedes Paar. Unser [Leitfaden zu Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Gründe und die Grenzfälle.

### Häufige Fehler

- Hellgrauer Platzhaltertext als einziges Label
- Weißer Text auf einer blassen Markenfarbe wie Gelb oder Himmelblau
- Links, die sich nur durch Farbe vom Fließtext unterscheiden
- Ein blasser Rahmen als einziger Umriss eines Formularfelds
- Fehlermeldungen nur in Rot

### Lösungen

- Echte Labels über Feldern, gedämpfter Text mit 4,5:1
- Dunkler Text auf hellen Akzenten oder ein tieferer Ton des Akzents
- Links im Fließtext fett setzen oder klar gegen den Text absetzen
- Rahmen von Eingabefeldern mit 3:1 zu ihrem Hintergrund
- Ein Icon oder Wörter neben der Farbe

## Dein Farbschema als Tokens coden

Speichere jede Rolle einmal als CSS Custom Property und nutze in deinen Styles nur diese Variablen. Dann sind ein dunkles Theme, eine saisonale Kampagne oder ein Rebranding eine Änderung an einem Block Werte, keine Suche durch jede Datei. Das ist die Kernidee von [Design Tokens](https://gradiently.design/de/guide/design-tokens).

```css
:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }
```

Rollen, keine Farbtöne. Beachte, dass `--on-accent` von Weiß zu fast Schwarz wechselt, weil ein heller Flieder-Button dunklen Text braucht.

## Dark Mode ist ein eigenes Schema

Eine helle Palette umzukehren funktioniert selten. Satte Akzente leuchten auf Schwarz zu hart, Schatten verschwinden, und reinweißer Text blendet. Bau den Dark Mode als zweiten Satz Werte: ein fast schwarzer Grund mit einem Hauch Farbton, Flächen, die heller werden, je höher sie liegen, weicherer Text und ein Akzent, der aufgehellt wird, bis er den Kontrast erreicht. [Dark Mode Design](https://gradiently.design/de/guide/dark-mode-design) geht tiefer.

## Wo Markenfarbe über Buttons hinausgeht

Steckt der Akzent nur in Buttons, kann die Seite beliebig wirken. Die Antwort ist nicht mehr Akzent überall, sondern ein Ort, an dem die Marke ausdrucksstark sein darf: der Hero, ein Feature-Band oder der Footer. Ein satter Farbverlauf aus der Farbfamilie der Marke funktioniert dort gut, während der Rest der Seite ruhig und lesbar bleibt.

Ein breiter Website-Hero für eine Physiotherapiepraxis mit kurzer Überschrift auf einem satten Farbverlauf

Ein ausdrucksstarkes Band in 1920×1080 trägt die Marke; der Rest der Seite nutzt die ruhigen Rollen von oben.

Ein Gradiently Mark kann diese ausdrucksstarke Ebene sein: ein Hintergrund, den sonst niemand hat und der für jede Zeile eine Schriftfarbe aus seiner eigenen Palette wählt, damit Überschriften lesbar bleiben. Mehr zu Kombinationen findest du unter [Farbharmonie](https://gradiently.design/de/guide/color-harmony) und [Hero Section Design](https://gradiently.design/de/guide/hero-section-design).

## FAQ

### Wie viele Farben sollte eine Website haben?

Meist einen Markenakzent, drei bis fünf Neutraltöne für Grund, Flächen, Text und Rahmen und drei Statusfarben. Mehr als ein Akzent macht es schwerer zu erkennen, was klickbar ist.

### Wie wähle ich ein Farbschema für meine Website?

Starte mit deinem Markenakzent, töne neutrale Grautöne in seine Richtung, entscheide dich für ein helles oder dunkles Theme und prüfe jede Textkombination auf mindestens 4,5:1 Kontrast.

### Welches Kontrastverhältnis braucht Text auf einer Website?

WCAG verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text und Bedienelemente wie Rahmen von Eingabefeldern.

### Sollte ein Website-Hintergrund reinweiß sein?

Muss er nicht. Ein ganz leicht getöntes gebrochenes Weiß wirkt oft ruhiger und lässt weiße Karten als Flächen hervortreten.

### Wie füge ich meinem Farbschema einen Dark Mode hinzu?

Definiere jede Farbrolle als CSS Custom Property und liefere dann einen zweiten Satz Werte in einer `prefers-color-scheme: dark` Media Query.