WCAG 1.4.3: Kontrast (Minimum)

WCAG 1.4.3 verlangt für Text und Text in Bildern ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund; für großen Text ab 18 pt bzw. 14 pt fett (rund 24 px bzw. 18,66 px fett) genügen 3:1. Ausgenommen sind Logos, rein dekorativer Text, inaktive Bedienelemente und unwesentlicher Text in Fotos.

(Englisch: Contrast (Minimum).)

Das Wichtigste in Kürze

• 4,5:1 für normalen Text, 3:1 für großen Text – das sind die beiden Werte, um die sich alles dreht.
• Groß heißt ab 18 pt oder ab 14 pt fett, im Web also etwa ab 24 px bzw. 18,66 px fett. Die Punktangabe steht in der Norm, die Pixelangabe ist die Umrechnung; „fett“ heißt dabei mindestens font-weight: 700.
• Die Grenze ist hart: 4,49:1 ist nicht bestanden. Prüfwerkzeuge runden unterschiedlich – deshalb im Zweifel den exakten Wert ablesen.
• Vier Ausnahmen: Logos und Markennamen, rein dekorativer Text, Text in inaktiven (disabled) Bedienelementen und unwesentlicher Text als Teil eines Bildes mit anderem wesentlichen Inhalt.
• Platzhaltertext ist keine Ausnahme. Er braucht 4,5:1, sofern nicht daneben eine sichtbare Beschriftung steht – so bewertet es auch der BITV-Test.
• Für Bedienelemente und Grafiken gilt nicht 1.4.3, sondern 1.4.11 mit 3:1.
• Stufe AAA (1.4.6) verlangt 7:1 bzw. 4,5:1 für großen Text – gefordert wird das in Deutschland nicht.

Abgrenzung – hier steht die Norm. Diese Seite behandelt das Erfolgskriterium selbst. Dark Mode, Markenfarben und die Grenzfälle des Alltags behandelt Farbkontrast in der Praxis, gemessen wird mit dem Kontrast-Check.

Wie viel Kontrast braucht Text?

Das Kontrastverhältnis ist kein Gefühl, sondern eine Rechnung: der Quotient aus den relativen Helligkeiten zweier Farben, auf einer Skala von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). Die Formel stammt aus der WCAG selbst und rechnet mit der relativen Leuchtdichte, nicht mit der wahrgenommenen Helligkeit – deshalb schneiden gesättigte Farben manchmal anders ab, als das Auge erwartet.

Zwei Feinheiten, die in Prüfungen regelmäßig strittig sind. Erstens: Der Kontrast wird gegen das gemessen, was tatsächlich hinter dem Text liegt – nicht gegen die Hintergrundfarbe im Design-Token. Bei halbtransparenten Flächen, Verläufen und Bildern zählt der ungünstigste Punkt. Zweitens: Beide Farbschemata zählen. Wer einen Dark Mode anbietet, muss ihn separat prüfen; in der Praxis ist der Dark Mode die Fundgrube, weil dort meist niemand nachgemessen hat.

Den Wortlaut samt Rechenformel führt das Understanding-Dokument des W3C zu 1.4.3 auf; die deutsche Prüfpraxis steht im Prüfschritt 1.4.3 des BIK BITV-Tests.

Wen betrifft es besonders?

Menschen mit Sehbehinderung und altersbedingt nachlassender Kontrastempfindlichkeit sind die Kerngruppe – und das ist keine kleine Randgruppe: Ab etwa 40 lässt die Kontrastempfindlichkeit messbar nach, und ein großer Teil der Nutzerschaft deutscher Websites ist älter als das. Hinzu kommen rund acht Prozent der Männer mit einer Farbsinnstörung, für die pastellige Farbpaare oft noch schwächer trennen als für alle anderen.

Der Rest sind situative Fälle, und die treffen praktisch jeden: Sonnenlicht auf dem Handydisplay, ein Beamer mit ausgebleichter Lampe, ein Bildschirm mit Blaulichtfilter am Abend, ein billiges Notebook-Panel mit flauem Schwarzwert. Kontrast ist damit das Kriterium mit der breitesten situativen Wirkung überhaupt.

Richtig & falsch im Code

/* Falsch: beliebtes Hellgrau auf Weiß – nur ≈ 2,3:1 */
.hinweis { color: #b0b0b0; background: #ffffff; }

/* Falsch: Platzhalter im Browser-Standard, oft ≈ 2,5:1 */
input::placeholder { color: #a9a9a9; }

/* Richtig: dunkleres Grau – ≈ 7,0:1, komfortabel über der Schwelle */
.hinweis { color: #595959; background: #ffffff; }

/* Richtig: geprüfte Werte am Token dokumentieren */
:root {
  --color-muted: #595959;   /* auf #fff: 7,0:1  (AA ✓, AAA ✓) */
  --color-subtle: #767676;  /* auf #fff: 4,5:1  (AA ✓, AAA ✗) */
}

Der zweite große Fall ist Text über Bildern. Hier hilft kein einzelner Messpunkt – der Hintergrund wechselt ja. Zwei Lösungen funktionieren zuverlässig:

/* Richtig: Deckfläche unter dem Text, nicht über dem ganzen Bild */
.hero-text {
  color: #ffffff;
  background: rgba(15, 20, 30, 0.72); /* gemessen: 8,1:1 gegen Weiß */
  padding: 0.75rem 1rem;
}

/* Richtig: Verlauf, der nur den Textbereich abdunkelt */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
}

Was nicht funktioniert, ist text-shadow als Kontrastersatz. Der Schatten verbessert die Lesbarkeit subjektiv, geht aber in keine Messung ein und wird in Prüfungen nicht anerkannt.

Weitere Fallen, Werkzeuge und der Umgang mit Markenfarben stehen ausführlich unter Farbkontraste richtig einstellen.

So testest du es

1. Ganze Seite auf einmal: Der Kontrast-Check auf dieser Website bewertet alle Text-Hintergrund-Paare einer URL nach 1.4.3 und schlägt passende Ersatzfarben vor. Damit findest du in einem Durchgang die groben Fälle.
2. Einzelpaare exakt messen: WebAIM Contrast Checker oder der Colour Contrast Analyser (CCA) von TPGi. Der CCA hat eine Bildschirm-Pipette und ist damit auch für Screenshots und PDFs brauchbar.
3. In den DevTools gegenprüfen: Im Farbwähler von Chrome und Firefox steht das Verhältnis direkt am Farbfeld, inklusive der beiden Schwellenlinien im Farbverlauf.
4. Sonderfälle von Hand: Text über Bildern an der ungünstigsten Stelle messen, Platzhalter separat, Hover- und Aktiv-Zustände separat.
5. Beide Farbschemata prüfen: Hell und dunkel gegeneinander abgleichen – und, falls vorhanden, den Kontrastmodus des Betriebssystems.

Häufiger Fehler in der Praxis

Der Klassiker ist nicht die Schriftfarbe im Fließtext – die stimmt fast immer. Es sind die Sekundärtexte: Bildunterschriften, Meta-Zeilen („Von … · Zuletzt geändert am …“), Fußnoten, Formular-Hinweise, deaktiviert aussehende, aber aktive Buttons. Sie werden bewusst zurückgenommen, und genau dieses Zurücknehmen kostet den Kontrast. Ein 12-px-Hinweis in #999 sieht im Entwurf ruhig aus und liegt bei 2,8:1.

Zweitens: Markenfarben in kleiner Schrift. Ein helles Firmenblau oder ein warmes Orange bestehen als Hintergrund einer Fläche mühelos, als Textfarbe auf Weiß aber nicht. Die Lösung ist selten „andere Markenfarbe“, sondern meistens eine abgedunkelte Textvariante derselben Farbe – die Marke bleibt erkennbar, der Text wird lesbar.

Und drittens, der teuerste: Der Dark Mode wurde nie gemessen. Da wird #ffffff zu #e0e0e0 und #1a1a1a zum Hintergrund, das sieht auf dem eigenen Monitor prima aus, und niemand rechnet nach. Da führt kein Weg dran vorbei: für jedes Farbschema ein eigener Durchlauf – sonst hast du zwei Designs und nur eines davon geprüft.

Häufige Fragen

Gilt 1.4.3 auch für Platzhaltertext in Formularfeldern?

Ja. Platzhalter sind Text und fallen unter das Kriterium – die Browser-Standards liegen fast alle darunter. Der BITV-Test bewertet Platzhalter dann als unkritisch, wenn daneben eine dauerhaft sichtbare Beschriftung steht und der Platzhalter nur ergänzt. Steht keine da, braucht er 4,5:1. Warum Platzhalter ohnehin kein Label ersetzen, steht unter 3.3.2.

Ab welcher Pixelgröße gilt Text als „groß“?

Die Norm spricht von 18 pt bzw. 14 pt fett. Umgerechnet auf die übliche Web-Basis von 96 dpi sind das 24 px bzw. 18,66 px fett. Wer mit rem arbeitet: 1,5 rem bzw. 1,167 rem fett bei einer Wurzelgröße von 16 px. Knapp darunter liegende Größen – etwa 23 px – zählen als normaler Text und brauchen 4,5:1.

Muss ein ausgegrauter Button den Kontrast einhalten?

Nein, solange er tatsächlich inaktiv ist (disabled). Die Ausnahme gilt aber nur für den Zustand, nicht für die Optik: Ein Button, der bloß grau aussieht, tatsächlich aber anklickbar ist, muss die vollen 4,5:1 erfüllen. Und wenn der inaktive Zustand die einzige Information ist, warum etwas nicht geht, wird es trotzdem zum Problem.

Reicht es, wenn ein Kontrastmodus oder Styleswitcher angeboten wird?

Ein alternativer Kontrastmodus kann das Kriterium erfüllen – dann muss aber der Umschalter selbst barrierefrei erreichbar sein und die Standardansicht darf nicht als Ausrede dienen. Der BITV-Test verlangt zusätzlich, dass der Styleswitcher seinerseits 4,5:1 erfüllt. In der Praxis ist es einfacher, gleich eine Ansicht zu bauen, die besteht.

Was ist mit Text in Logos und Wortmarken?

Der ist ausgenommen – ohne Einschränkung. Sobald derselbe Schriftzug aber als normaler Text auf der Seite auftaucht, etwa als Firmenname in einer Überschrift, gilt die Ausnahme nicht mehr. Die Ausnahme hängt am Logo, nicht am Wort.

Verwandte Themen

• Kontrast-Check – Farbkontraste einer URL automatisch prüfen
• Farbkontraste richtig einstellen – der ausführliche Praxis-Artikel mit Werkzeugvergleich
• 1.4.11 Nicht-Text-Kontrast – dieselbe Idee für Bedienelemente und Grafiken
• 1.4.1 Benutzung von Farbe – Farbe nie als einziges Signal
• Konformitätsstufen A, AA, AAA – warum 7:1 in Deutschland nicht gefordert wird