# Farbkontrast: gut lesbarer Text für alle

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

Kontrast ist der Unterschied zwischen Worten, die gelesen werden, und Worten, die man überspringt. Die WCAG-Zahlen in einfachen Worten, wie du sie prüfst und was sich ändert, wenn der Hintergrund ein Farbverlauf ist.

## The short version

- Farbkontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund, gemessen als Verhältnis von 1:1 (kein Unterschied) bis 21:1 (Schwarz auf Weiß).
- WCAG 2 Stufe AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für große Schrift, das sind etwa 24 px normal oder 18,66 px fett.
- Auch Icons, Rahmen von Eingabefeldern und andere Teile einer Oberfläche, die man sehen muss, brauchen mindestens 3:1 gegenüber ihrer Umgebung.
- Auf Weiß ist `#767676` das hellste schlichte Grau, das 4,5:1 für Fließtext erreicht, und `#777777` fällt knapp durch.
- Auf einem Farbverlauf ändert sich der Kontrast von Punkt zu Punkt, daher musst du die schlechteste Stelle hinter den Worten testen, nicht die Durchschnittsfarbe.

**Farbkontrast** ist der Helligkeitsunterschied zwischen Text und der Farbe dahinter, und er entscheidet, ob Menschen deine Worte überhaupt lesen können. Die Web Content Accessibility Guidelines (WCAG) messen ihn als Verhältnis von 1:1, wenn beide Farben identisch sind, bis 21:1, Schwarz auf Weiß. Für Stufe AA braucht normaler Text mindestens **4,5:1** und große Schrift mindestens **3:1**. Alles Weitere in diesem Leitfaden dreht sich darum, diese Werte zu erreichen, ohne dein Design zaghaft zu machen.

Kontrast ist für alle wichtig, nicht nur für Menschen mit schwachem Sehvermögen. Handys in der Sonne, dunkle Beamer, billige Monitore und müde Augen verkleinern den Unterschied zwischen Farben. Designs mit genug Kontrast werden schlicht öfter gelesen.

## Die WCAG-Kontrastverhältnisse in einfachen Worten

Drei Regeln in WCAG 2 decken fast jede Designentscheidung ab. Sie stammen aus den [Erfolgskriterien des W3C](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) und sind das, worauf sich die meisten Barrierefreiheitsprüfungen und Vorschriften beziehen.

| Was | Stufe AA | Stufe AAA | Hinweise |
| --- | --- | --- | --- |
| Normaler Text | 4,5:1 | 7:1 | Fließtext, Bildunterschriften, Beschriftungen, Buttons |
| Große Schrift | 3:1 | 4,5:1 | Mindestens 18 pt (etwa 24 px) oder 14 pt fett (etwa 18,66 px) |
| Icons und Teile der Oberfläche | 3:1 | 3:1 | Rahmen von Eingabefeldern, Diagrammlinien mit Bedeutung, Icons ohne Beschriftung |
| Logos und Dekoration | Keine | Keine | Wortmarken und rein dekorativer Text sind ausgenommen |

Stufe AA ist das übliche Ziel. AAA ist strenger und lohnt sich bei langen Lesetexten.

Zwei Details erwischen viele. Erstens bezieht sich „groß“ auf die dargestellte Größe, eine 24-px-Überschrift, die ein Handy verkleinert, zählt womöglich nicht mehr als groß. Zweitens ist ein deaktivierter Button ausgenommen, ein hellgrauer Platzhalter, den man verstehen muss, aber nicht.

## So wird das Kontrastverhältnis berechnet

Das Verhältnis vergleicht die relative Leuchtdichte der beiden Farben: wie viel Licht jede abgibt, gewichtet so, wie das Auge sieht. Grün trägt am meisten bei, Rot weniger und Blau sehr wenig, weshalb ein gesättigtes Blau überraschend dunkel und ein Gelb überraschend hell sein kann. Die Formel lautet `(L1 + 0.05) / (L2 + 0.05)`, wobei L1 die hellere Farbe ist.

```js
// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails
```

Die ganze Berechnung passt in ein Dutzend Zeilen. Praktisch, um eine Markenpalette gesammelt zu prüfen.

Von Hand rechnen musst du nicht. Der [WebAIM-Kontrastprüfer](https://webaim.org/resources/contrastchecker/) nimmt zwei Hex-Codes und sagt dir, welche Stufen bestanden sind, und die Farbauswahl in den Entwicklertools von Chrome zeigt das Verhältnis jedes untersuchten Textes.

## Farbpaare, die bestehen und durchfallen

Markenfarben liegen oft in der unglücklichen Mitte, zu dunkel für dunklen Text und zu hell für weißen. Mittlere Grüntöne, Orange, Pink und helle Blautöne sind die üblichen Verdächtigen. Hier gängige Kombinationen mit ihren echten Verhältnissen.

| Text auf Hintergrund | Verhältnis | Normaler Text | Große Schrift |
| --- | --- | --- | --- |
| Weiß auf Violett `#7c3aed` | 5,7:1 | Bestanden | Bestanden |
| Weiß auf hellem Violett `#8b5cf6` | 4,2:1 | Durchgefallen | Bestanden |
| Weiß auf Blau `#2563eb` | 5,2:1 | Bestanden | Bestanden |
| Weiß auf Himmelblau `#3b82f6` | 3,7:1 | Durchgefallen | Bestanden |
| Weiß auf Grün `#10b981` | 2,5:1 | Durchgefallen | Durchgefallen |
| Fast Schwarz `#0b0b10` auf Grün `#10b981` | 7,7:1 | Bestanden | Bestanden |
| Weiß auf Bernstein `#f59e0b` | 2,2:1 | Durchgefallen | Durchgefallen |
| Grau `#999999` auf Weiß | 2,9:1 | Durchgefallen | Durchgefallen |
| Grau `#6b7280` auf Weiß | 4,8:1 | Bestanden | Bestanden |

Eine kleine Verschiebung kann entscheiden: Zwei fast gleich aussehende Blautöne landen auf verschiedenen Seiten von 4,5:1.

> **Dreh den Text um, nicht die Marke** Fällt Weiß auf einer leuchtenden Markenfarbe durch, probiere fast schwarzen Text. Grün, Bernstein und Koralle bestehen mit dunkler Schrift meist mühelos, und die Farbe bleibt genau, wie sie ist. Wie du das von Anfang an in eine Palette einbaust, behandelt [Markenfarben auswählen](https://gradiently.design/de/guide/how-to-choose-brand-colors).

## Warum Farbverläufe den Kontrast erschweren

Ein einfarbiger Hintergrund hat ein Kontrastverhältnis. Ein Farbverlauf hat an jedem Punkt ein anderes. Weißer Text, der über dem dunklen Ende eines Verlaufs mühelos besteht, kann am hellen Ende komplett durchfallen, und eine Überschrift, die sich über den Verlauf zieht, besteht und fällt in derselben Zeile durch.

Mitternacht, Violett, Pink: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Weißer Text erreicht links 18:1, über dem Violett 5,7:1 und am rosa Ende 2,7:1. Ein Farbverlauf, drei Urteile.

Die Regel ist einfach: Teste den hellsten Punkt hinter hellem Text oder den dunkelsten Punkt hinter dunklem Text. Besteht der schlechteste Punkt, besteht die ganze Zeile. Durchschnittsfarben und Pipettenproben aus der Mitte führen dich in die Irre.

## So behebst du Kontrast auf einem Farbverlauf

1. **Verschiebe die Worte ans ruhige Ende** Setze Text über den dunkelsten oder hellsten Teil des Verlaufs und lass den leuchtenden Übergang weit davon entfernt stattfinden.
2. **Verengte den Bereich hinter dem Text** Halte den Teil des Verlaufs hinter den Worten in einem kleinen Helligkeitsbereich. Der Rest der Fläche darf so kräftig sein, wie du willst.
3. **Füge einen weichen Schleier hinzu** Ein sanftes dunkles oder helles Ausblenden hinter dem Text, etwa ein Verlauf von transparent zu 30 % Schwarz, hebt den Kontrast ohne sichtbaren Kasten.
4. **Nimm größere und kräftigere Schrift** Große Schrift braucht nur 3:1. Ein fetterer Schnitt und eine größere Größe können eine durchfallende Zeile in eine bestandene verwandeln.
5. **Teste auf einem echten Handy** Prüfe das Design bei voller und bei niedriger Helligkeit, wenn möglich draußen. Verhältnisse sind die Untergrenze, nicht das Ziel.

```css
.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}
```

Der Schleier dunkelt nur dort ab, wo der Verlauf hell wird, sodass die linke Seite unberührt bleibt.

Ein Hochformat-Post, bei dem die Überschrift „Einlass um sieben“ einen hellen Bereich des Farbverlaufs kreuzt und schwer lesbar wird

Die Worte laufen direkt über den hellsten Teil der Fläche, und ihr Kontrast sinkt.

Derselbe Hochformat-Post mit einem dunkleren, ruhigeren Bereich des Farbverlaufs hinter der Überschrift, sodass sie klar lesbar ist

Dasselbe Design, bei dem die ruhige, dunkle Region hinter die Worte gerückt ist.

Das ist die Idee hinter der Lesbarkeit in Gradiently: Ein Mark weiß, wo deine Worte stehen, rückt seine ruhigste, kontrastreichste Region dahinter und wählt aus seiner eigenen Palette pro Zeile helle oder dunkle Schriftfarbe. Weitere Techniken, die überall funktionieren, findest du in [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) und [lesbarer Text über Fotos](https://gradiently.design/de/guide/text-over-image). Speziell für dunkle Oberflächen siehe [Design für den Dark Mode](https://gradiently.design/de/guide/dark-mode-design).

## FAQ

### Was ist ein gutes Farbkontrastverhältnis?

Mindestens 4,5:1 für normalen Text und 3:1 für große Schrift erfüllen WCAG Stufe AA. Für langes Lesen ist 7:1 (Stufe AAA) angenehmer.

### Was zählt in WCAG als große Schrift?

Text ab 18 Punkt, etwa 24 px, oder ab 14 Punkt fett, etwa 18,66 px. Große Schrift braucht auf Stufe AA nur 3:1.

### Welches ist das hellste Grau, das ich auf Weiß nutzen kann?

`#767676` ist das hellste schlichte Grau, das auf Weiß 4,5:1 erreicht. `#777777` misst 4,48:1 und fällt für Fließtext durch.

### Müssen Logos Kontrastvorgaben erfüllen?

Nein. WCAG nimmt Text aus, der Teil eines Logos oder Markennamens ist, und rein dekorativen Text. Alles, was Menschen lesen oder bedienen müssen, zählt weiterhin.

### Wie prüfe ich den Kontrast auf einem Farbverlaufshintergrund?

Miss die Textfarbe gegen den hellsten Punkt hinter hellem Text oder den dunkelsten Punkt hinter dunklem Text. Besteht dieser schlechteste Punkt, besteht die ganze Zeile.