Kontrastschnittstellen und Lesbarkeit

1) Warum der Kontrast

• reduziert die kognitive Belastung und Müdigkeit,
• verbessert die Scangeschwindigkeit der Schnittstelle,
• erhöht die Zugänglichkeit für Menschen mit Sehbehinderung und Farbwahrnehmung,
• reduziert Fehler in miteinander verbundenen Szenarien (Zahlungen, Formulare, Bestätigungen).

2) Grundbegriffe und Formeln

2. 1 Kontrast nach WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), wobei 'L1 ≥ L2','L 'die relative Helligkeit (0.. 1) ist.

2. 2 Relative Helligkeit (sRGB)

1. Die Komponenten R, G, B in den Bereich 0.. 1 bringen.

• Wenn'c ≤ 0. 04045', dann "c _ lin = c/12. 92`
• ansonsten'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Helligkeit: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Farbdarstellungen

HSL/HSV - handlich für die manuelle Einstellung, aber nicht perzeptuell einheitlich.
Lab/LCH/OKLCH - näher an der menschlichen Wahrnehmung; OKLCH ist praktisch, um die Helligkeit/Sättigung systematisch zu variieren und gleichzeitig lesbar zu bleiben.

3) Normen und Ziele (WCAG 2. 2)

Text ≥ 14 pt bold oder ≥ 18 pt (normal): Kontrast mindestens 3:1 (AA).
Rest Text: Kontrast mindestens 4. 5:1 (AA).
AAA (erhöhte Lesbarkeit): 7:1 für Klartext; 4. 5:1 für den Großen.
Ikonographie und wichtige nicht-fotografische Elemente (Eingabefeldgrenzen, Checkboxen, Schalter, Fehlerindikatoren): 3: 1-Wahrzeichen mit Hintergrund.
Die Zustände (hover/focus/pressed/disabled) müssen eine Unterscheidbarkeit von mindestens 3:1 zwischen den Zuständen oder mit Hintergrund sowie explizite nicht-fotografische Indikatoren (Hervorhebung von Links, Schatten/Rahmen, Dickenänderung) aufweisen.

4) Design-System: Kontrast-Token

Wir empfehlen im Designsystem, den Kontrast als Eigenschaft der Token zu erfassen.

• 'fg/primary' ↔ 'bg/base' ≥ 7:1 (AAA für kritischen Text)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' ↔ 'bg/subtle' ≥ 3:1 (Servicetext)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (Feldgrenzen, Karten)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (Links/Buttons)
• „interactive/disabled“ darf keine aktiven Zustände simulieren; Kontrastreduzierung und Cursor/ARIA-Attribute verwenden.

• Grundhelligkeit des Themas (L), dann Abweichungen von 'Δ L' für Schichten/Oberflächen ('bg/subtle', 'bg/elevated'),
• Fixieren Sie die minimalen Kontrastpaare in den Tests.

5) Helle und dunkle Themen

Helles Thema: Der Text ist fast schwarz (kein reines # 000, sondern ein warm/kalter Farbton), der Hintergrund ist weiß bis leicht getönt, um das „Funkeln“ zu reduzieren.
Dunkles Thema: Vermeiden Sie saubere # 000 Hintergrund - Tiefe Graphit/Kohle mit L≈0. 12–0. 16 reduziert das Licht; Erweichen Sie den weißen Text bis zur L≈0. 9.
Behalten Sie die gleichen Kontrastziele in beiden Themen bei; Lassen Sie nicht zu, dass Farbakzente die Lesbarkeit auf einem dunklen Hintergrund verlieren (oft ist eine Verschiebung von 'Δ L' und eine Verringerung der Sättigung erforderlich).

6) Text in Bildern und Videos

Verwenden Sie Overlays (40-60% Farbverlauf/durchscheinende Ebene) oder Druckplatten unter dem Text.
Sichern Sie mindestens 4. 5:1 zwischen Text und lokalem Hintergrund des Stempels.
Für dynamisches Video - adaptiver Hintergrund/Overlay durch Analyse der Rahmenhelligkeit (Sampling des zentralen/unterlegten Bereichs).

7) Zustände und Interaktivität

Links sollten nicht nur farblich erkennbar sein: Standardunterstreichung oder Unterstreichung auf hover/focus + Kontrast ≥ 3:1 mit Klartext.
Buttons: Text und Icon ≥ 4. 5:1 zum Gießen; ≥ 3:1 gegen die Umgebung.
Fehler/Erfolg/Warnungen: Verlassen Sie sich nicht auf Farbe; Symbole/Texthinweise hinzufügen; Stellen Sie einen Textkontrast von mindestens 4 sicher. 5:1.

8) Menschen mit Farbwahrnehmungsstörungen

• Deuteranopia/Protanopia (rot-grüne Zone): Vermeiden Sie Kombinationen von „rot vs grün“ ohne zusätzliche Merkmale.
• Tritanopia: Blau-gelbe Paare separat überprüfen.
• Machen Sie Formulare und Grafiken verständlich: Textbeschriftungen, verschiedene Arten von Strichen/Markierungen, Füllmuster, Beschriftungen für Segmente.

9) Typografie und Hintergrund

Haupttextkegel: 14-16 px Minimum (Web), 16-18 px für Inhaltszonen.
Zeilenabstand 1. 4–1. 6 verbessert die Lesbarkeit auf kontrastreichem Hintergrund.
Vermeiden Sie dünne Beschriftungen mit unzureichendem Kontrast.
Text auf farbigen Hintergründen: Verringern Sie die Sättigung des Hintergrunds und/oder erhöhen Sie die Helligkeit, um das Zielverhältnis zu erreichen.

10) Diagramme, Tabellen, Grafiken

Linien/Spalten ≥ 3:1 zum Raster/Hintergrund.
Signaturen von Achsen und Legenden ≥ 4. 5:1.
Verwenden Sie unterscheidbare Formen/Muster neben der Farbe.

11) Dynamischer/adaptiver Kontrast

Auto-Kontrast: Berechnen Sie die Kontrastfarbe des Textes zur ausgewählten Füllung (z.B. über OKLCH: Matching 'L' to achieve 4. 5:1).
Systemeinstellungen: Respektieren Sie' prefers-contrast', 'forced-colors', high-contrast Betriebssystemmodi.
Personalisierung: Einstellung „Hoher Kontrast“ in der App (Verstärkung von 'Δ L', Ersetzen von Markenakzenten durch neutralere mit Beibehaltung der Markenidentität durch Form/Symbole).

12) Steuerungsprozesse und Automatisierung

12. 1 Für Designer

Überprüfen Sie den Kontrast auf Layouts (in beiden Themen und auf Schlüsselhintergründen).
Geben Sie „Kontrastschlitze“ in die Komponenten ein (Titel/primary/secondary/hint).
Dokumentieren Sie gültige Hintergrundkontexte für jede Komponente.

12. 2 Für Entwickler

Einheiten-Helfer: Funktion zur Berechnung von Kontrast und Assertas in Tests für Token-Paare.
Visuelle Schnappschüsse mit der Überprüfung von Kontrastmetriken (Bildschirmdarstellung + Berechnung der L1/L2 durch Samples).
Stil Linters: Verbot von „rohen“ Farben, nur durch Token.

12. 3 V CI/CD

Überprüfung aller 'fg/bg' -Paare in Themen und Zuständen.
Störungsbericht mit Angabe von Bauteil, Variante, Thema und Ist-Wert (z.B. 3. 9:1 bei den geforderten 4. 5:1).

13) iGaming Besonderheiten (optional)

Helle Werbebanner und Turnierkarten „fressen“ oft den Text. Sie benötigen einen Platzhalter/Overlay und eine Sättigungsbeschränkung für den Hintergrund.
Systemelemente für verantwortungsvolle Benachrichtigungen (18 +, Limits, Risiken) - AAA im Kontrast.
In den Ranglisten/Quoten: Zahlen und Zeichen „+/-“ ≥ 4. 5:1, Gewinnbeleuchtung - nicht nur Farbe (Icons/Tags).

14) Antipatterns

Verlassen Sie sich nur auf Farbe, um den Zustand zu unterscheiden.
Dünne graue Schriften auf farbigem Hintergrund ohne Kontrastberechnung.
„Dunkel auf dunkel“ im Dark Mode, „hell auf hell“ in den Promo-Zonen.
Text im Hintergrund mit Details/Rauschen ohne Stempel.

15) Checkliste für die Revue

Basistext

• ≥ 4. 5:1 (normal), ≥ 3:1 (groß/fett).

Links/Buttons

• Schaltflächentext ≥ 4. 5:1 zum Gießen.
• Unterscheidbarkeit von Zuständen ≥ 3:1 oder explizite Indikatoren.

Icons/Grenzen

• ≥ 3:1 zum Hintergrund.

Dunkle/helle Themen

• Die gleichen Kontrastziele wurden erreicht.

Media-fony

• Overlay/Würfel, Koeffizient gehalten.

Fassbarkeit

• Neben der Farbe gibt es auch nicht-fotografische Merkmale.

Automatisierung

• Kontrasttests in CI/CD zu Token und Komponenten.

16) Einführung von Token (Notationsbeispiel)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Hinweis: Die Werte sind beispielhaft; Die letzten werden nach der Berechnung des Kontrastes in einem bestimmten Thema ausgewählt.

17) Dokumentation für das Team

Geben Sie in den Haydlines an: Kontrastziele, Beispiele für richtige/fehlerhafte Paare, die Matrix' fg × bg 'für Schlüsselkomponenten, Regeln für Medienhintergründe und wie man den Modus „Hoher Kontrast“ aktiviert.
Halten Sie eine Live-Seite „Ausnahmen und Gründe“ (z. B. erlaubt 3. 8:1 im schmalen Fall eines großen Anzeigenkopfes).

Kurze Zusammenfassung

Kontrast ist ein messbarer Parameter, kein Geschmacksparameter. Ziele setzen (AA/AAA), diese über Token verwalten (besser in OKLCH), automatisch in CI und visuell in Layouts prüfen, dunkle/helle Themen und Menschen mit Farbsehstörungen berücksichtigen. Das garantiert Lesbarkeit, reduziert Fehler und steigert die Conversion.