Prinzip P4
Kontrast als Token
Wenn Kontrast numerisch 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 numerischer 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 |
Was 4,5:1 wirklich bedeutet
Vier Kontraststufen, real gerendert — die WCAG-Schwellen als sichtbare Erfahrung.
Vier Demonstrationsfelder auf weißem Grund zeigen denselben Beispieltext mit steigendem Kontrast: 1,7 zu 1 scheitert überall, 2,9 zu 1 scheitert für Fließtext, 4,7 zu 1 erfüllt AA, 9,0 zu 1 erfüllt AAA.
1,7:1 · scheitert überall
2,9:1 · scheitert für Text
4,7:1 · erfüllt AA
9,0:1 · erfüllt AAA
Validierung gehört in die Pipeline
Ein Farbwert wird erst zum Token, wenn er die Kontrastprüfung bestanden hat.
- 1 · Rohwert: ein Farbwert aus der Palette, noch ohne Garantie.
- 2 · Prüfung: erreicht er 4,5:1 gegen alle vorgesehenen Hintergründe?
- 3 · Nein: abdunkeln und erneut prüfen — bevor irgendetwas produktiv wird.
- 4 · Ja: der Wert wird semantisches Token und ist ab jetzt überall sicher.
Woran Sie die Umsetzung erkennen
Die operativen Kriterien aus dem Audit-Modell der Masterarbeit — jede Aussage ist an Ihrer Website direkt überprüfbar.
- Fließtext erreicht mindestens 4,5 : 1, großer Text mindestens 3 : 1 (WCAG 1.4.3)
- Bedienelemente und grafische Objekte erreichen mindestens 3 : 1 (WCAG 1.4.11)
- Zustands-Token für Hover, Focus, Active und Disabled sind definiert
- Kontraste sind im Token-System vorab validiert — nicht pro Komponente ad hoc
Im Audit-Modell der Masterarbeit wird dieses Prinzip numerisch bewertet — auf einer Skala von 0 bis 3.
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.
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.