Farbkontrast: gut lesbarer Text für alle

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 und sind das, worauf sich die meisten Barrierefreiheitsprüfungen und Vorschriften beziehen.

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.

// 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

Von Hand rechnen musst du nicht. Der WebAIM-Kontrastprüfer 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.

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.

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. 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. 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. 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. 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. 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.

.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;
}

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 und lesbarer Text über Fotos. Speziell für dunkle Oberflächen siehe Design für den Dark Mode.