Design for AI

Stil Kontraststarke Barrierefreiheit: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für kontraststarke barrierefreiheit. Auch bekannt als barrierefreies Design, WCAG-AAA-Design, Hochkontrastmodus, inklusives UI, a11y-first. WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); Designpriorität seit dem rechtlichen Druck ab 2020.

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

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

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.