# Kontraststarke Barrierefreiheit

Auch bekannt als: barrierefreies Design, WCAG-AAA-Design, Hochkontrastmodus, inklusives UI, a11y-first  
Ära: WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); Designpriorität seit dem rechtlichen Druck ab 2020  
Seite: https://designforai.dev/de/style/high-contrast-accessibility

## Merkmale

- Textkontrast 7:1 oder besser (AAA), UI-Komponenten mindestens 3:1
- große Standardschrift (18px+), line-height 1.5+, Zeilenlänge 60-70 Zeichen
- sichtbare, dicke Fokusindikatoren (3px) auf jedem interaktiven Element
- Links unterstrichen, Buttons sehen aus wie Buttons, nie nur Farbe als Zustandssignal
- große Touch-Ziele (mindestens 44px), großzügiger Abstand dazwischen
- Motion minimal und unter prefers-reduced-motion immer deaktiviert
- respektiert den forced-colors-Modus; Icons haben Textlabels

Palette: #ffffff Seite, #0b0b0b Text, #005a9c Linkblau (7:1 auf Weiß), #b30000 Fehler, #006400 Erfolg, #ffd200 Fokusring auf Dunkel, #1a1a1a dunkle Fläche

Schrift: Atkinson Hyperlegible (für Sehschwäche entworfen), IBM Plex Sans, Source Sans 3 oder Lexend; Fließtext 18-20px, Überschriften 700 bei 32-48px, nirgends unter 16px; keine leichten Schnitte

## Do

- prüfe jedes Text/Hintergrund-Paar auf 7:1 und jeden Rand und jedes Icon auf 3:1, bevor du irgendetwas anderes stylst
- mach Fokus unübersehbar: 3px solid outline plus 2px Offset, in einer Farbe, die auf jedem Hintergrund 3:1 erreicht
- kopple jedes Farbsignal mit einer Form, einem Icon oder Text (Fehlertext plus Icon, nicht nur Rot)

## Don't

- nutze keinen grauen Platzhaltertext unter 4.5:1 und keine dünnen Haarlinien-Eingabefelder
- entferne keine Outlines, deaktiviere kein Zoomen, animiere nicht beim Scrollen
- verlass dich nicht auf Hover; alles muss mit Tastatur und Touch funktionieren

Bekannt dafür: GOV.UK, BBC (GEL), Atkinson-Hyperlegible-Projekt des Braille Institute, Microsoft Inclusive Design

## CSS-Seed

```css
:root{--bg:#ffffff; --fg:#0b0b0b; --accent:#005a9c; --error:#b30000; --focus:#ffd200; --radius:4px; --focus-ring:3px solid #005a9c; --font:'Atkinson Hyperlegible',sans-serif}
```

## Prompt

Baue die Seite nach einem kontraststarken Barrierefreiheitsstandard (WCAG 2.2 AAA, wo möglich). Hintergrund #ffffff, Text #0b0b0b, Links #005a9c immer unterstrichen, Fehler #b30000 mit Icon und Text, Erfolg #006400. Schrift Atkinson Hyperlegible: Fließtext 19px line-height 1.6 mit max-width 66ch, Überschriften 700 bei 44/32/24px, nichts unter 16px, keine Schnitte unter 400. Alle interaktiven Elemente mindestens 44x44px mit 12px Abstand dazwischen. Buttons: solides #005a9c mit weißem Text, Radius 4px, 2px Rand in derselben Farbe, damit sie den forced-colors-Modus überleben; Sekundärbuttons haben einen 2px #0b0b0b Rand. Fokus: outline 3px solid #005a9c, outline-offset 2px auf jedem Element; auf dunklen Flächen #1a1a1a nutze #ffd200. Eingabefelder: 2px #0b0b0b Rand, sichtbares Label darüber, nie nur Platzhalter. Skip-Link als Erstes im DOM. Icons dekorativ (aria-hidden) mit Textlabels daneben. Kein Autoplay, kein Parallax; jede Transition maximal 150ms und unter prefers-reduced-motion entfernt. Ergänze eine sichtbare Landmark-Struktur: header, nav, main, footer.