Prinzip P4
Kontrast als Token
Wenn Kontrast nummerisch im Design-System verankert ist, wird Barrierefreiheit zur Standardentscheidung.
Warum dieses Prinzip wichtig ist
Zwei Lesarten desselben Prinzips — abhängig davon, ob Sie Entscheidungen treffen oder Code schreiben.
Kontrast ist die unsichtbarste, aber folgenreichste Gestaltungsentscheidung Ihrer Website. Zu schwache Kontraste sind die mit Abstand häufigste Barrierefreiheits-Schwäche im deutschsprachigen Web — und seit dem 28. Juni 2025 ein konkretes Compliance-Risiko unter dem österreichischen Barrierefreiheitsgesetz.
Der ökonomische Punkt: Schwache Kontraste verlieren nicht nur Nutzer:innen mit Sehbeeinträchtigung, sondern jede zweite Person über 50 — also einen substanziellen Anteil Ihrer Zielgruppe. Starke Kontraste erhöhen messbar die Wahrnehmbarkeit Ihrer zentralen Aussagen, die Erkennbarkeit von Bedienelementen und damit die Conversion.
Der strategische Punkt: Kontrast wird zur Standardentscheidung statt zur Sonderdiskussion, wenn er nicht pro Komponente verhandelt, sondern einmal im Design-System als nummerischer Wert verankert wird. Was Designer:innen und Entwickler:innen als „Token-Architektur“ kennen, ist für Sie eine betriebswirtschaftliche Entscheidung: einmal richtig setzen, dauerhaft konform bleiben.
Was eine Token-Matrix leistet
Eine Token-Matrix macht sichtbar, welche Kombinationen funktionieren und welche nicht — bevor sie produktiv im Layout landen.
- Unter 3:1 — scheitert WCAG
- 3:1 bis 4,5:1 — nur für Large Text und UI
- 4,5:1 bis 7:1 — erfüllt AA
- 7:1 oder höher — erfüllt AAA
| FG \ BG | Background | Card | Muted | Accent | Inverse |
|---|---|---|---|---|---|
| Primary | 16.1:1 | 14.2:1 | 9.8:1 | 7.2:1 | 1.1:1 |
| Secondary | 7.4:1 | 6.8:1 | 5.1:1 | 4.6:1 | 2.3:1 |
| Muted | 4.9:1 | 4.5:1 | 3.2:1 | 3.0:1 | 3.4:1 |
| Disabled | 3.1:1 | 2.9:1 | 2.1:1 | 1.9:1 | 5.1:1 |
| Hint | 2.4:1 | 2.1:1 | 1.6:1 | 1.4:1 | 6.7:1 |
Best Practice und Anti-Pattern
Drei Designentscheidungen, die in der minimalistischen Webpraxis regelmäßig zum Kontrastproblem werden — und ihre tokenbasierten Alternativen.
Anti-Pattern
Hellgraue Sekundärtexte auf weißem Grund
Die Designsprache von 2018 hat „muted“ zur Standardästhetik gemacht. Praktisch erreichen Werte wie #999 auf #FFF nur 2,85 : 1 und scheitern damit an WCAG 1.4.3 AA.
Best Practice
Semantisches Muted-Token mit Kontrast-Garantie
Definieren Sie --color-text-muted gegen den Hintergrund auf mindestens 4,5 : 1. Die ästhetische Wirkung der Reduktion bleibt — der Kontrast ist garantiert.
Anti-Pattern
Disabled-Zustände, die unsichtbar werden
Aus Furcht, einen „aktiv aussehenden“ Button zu zeigen, werden Disabled-States oft so weit zurückgenommen, dass sie nicht mehr wahrnehmbar sind. WCAG verlangt hier nichts — aber jede Usability-Heuristik tut es.
Best Practice
Disabled-Token mit ≥ 3 : 1 Mindestkontrast
Auch deaktivierte Elemente brauchen Wahrnehmbarkeit. Setzen Sie ein eigenes Token --color-fg-disabled auf 3 : 1 zum Hintergrund und ergänzen Sie ein zweites Signal — etwa reduzierte Opazität auf die gesamte Komponente.
Anti-Pattern
Akzentfarbe als alleiniger Link-Indikator
Eine Akzentfarbe als einziges Mittel, einen Link von umgebendem Fließtext zu unterscheiden, schlägt fehl, sobald der Kontrast zwischen Akzent- und Textfarbe unter 3 : 1 fällt — und verletzt nebenbei WCAG 1.4.1.
Best Practice
Akzentfarbe plus typografisches Differenzmittel
Akzentfarbe für Markenwirkung, Unterstreichung als barrierefreier Anker. Beide zusammen: visuell ruhig, semantisch eindeutig, in jedem Kontrast-Modus robust.
Anbindung an WCAG 2.2
Die normativen Erfolgskriterien, an denen dieses Prinzip operativ andockt.
- SC 1.4.3Contrast (Minimum)AA
- SC 1.4.11Non-text ContrastAA
- SC 1.4.6Contrast (Enhanced)AAA
Verwandte Prinzipien
Kontrast steht selten allein — diese Prinzipien arbeiten eng mit ihm zusammen.
Wie konsequent ist Kontrast in Ihrem Design-System verankert?
Neun Fragen, etwa vier Minuten. Kein Login.