Barrierefreiheit
Barrierefrei heißt: mehr Menschen können mit, statt trotz unserer Gestaltung arbeiten. Das passt zur Marke, klar und für alle zugänglich statt exklusiv. Diese Seite bündelt, was verstreut galt (Kontrast, Bewegung, Icons) und macht es zum Maßstab.
Zielniveau
Miragon-Material erfüllt WCAG 2.1 Level AA. Das ist die Messlatte, nicht „sieht gut aus".
Kontrast
Die Zahlen sind aus den Marken-Tokens berechnet (brand/tokens.json → contrast.generated.json). Erst die Markenfarben untereinander, Vordergrund auf Hintergrund, mit WCAG-Urteil:
| Beispiel | Vordergrund | Hintergrund | Kontrast | Text AA | Groß AA |
|---|---|---|---|---|---|
| Aa | blau #335DE5 | weiss #FFFFFF | 5,47:1 | ✓ | ✓ |
| Aa | blau-link #2B50D4 | weiss #FFFFFF | 6,56:1 | ✓ | ✓ |
| Aa | gruen #00E676 | weiss #FFFFFF | 1,67:1 | ✗ | ✗ |
| Aa | schwarz #1D1D1D | weiss #FFFFFF | 16,86:1 | ✓ | ✓ |
| Aa | blau #335DE5 | grau #F9F7F7 | 5,13:1 | ✓ | ✓ |
| Aa | schwarz #1D1D1D | grau #F9F7F7 | 15,79:1 | ✓ | ✓ |
| Aa | weiss #FFFFFF | blau #335DE5 | 5,47:1 | ✓ | ✓ |
| Aa | gruen #00E676 | blau #335DE5 | 3,28:1 | ✗ | ✓ |
| Aa | weiss #FFFFFF | schwarz #1D1D1D | 16,86:1 | ✓ | ✓ |
| Aa | gruen #00E676 | schwarz #1D1D1D | 10,10:1 | ✓ | ✓ |
| Aa | danger #CD1839 | weiss #FFFFFF | 5,55:1 | ✓ | ✓ |
| Aa | info #335DE5 | weiss #FFFFFF | 5,47:1 | ✓ | ✓ |
| Aa | danger #CD1839 | grau #F9F7F7 | 5,20:1 | ✓ | ✓ |
| Aa | info #335DE5 | grau #F9F7F7 | 5,13:1 | ✓ | ✓ |
| Aa | success #00E676 | weiss #FFFFFF | 1,67:1 | ✗ | ✗ |
| Aa | warning #FFB000 | weiss #FFFFFF | 1,83:1 | ✗ | ✗ |
| Aa | schwarz #1D1D1D | success #00E676 | 10,10:1 | ✓ | ✓ |
| Aa | schwarz #1D1D1D | warning #FFB000 | 9,20:1 | ✓ | ✓ |
| Aa | weiss #FFFFFF | danger #CD1839 | 5,55:1 | ✓ | ✓ |
| Aa | weiss #FFFFFF | info #335DE5 | 5,47:1 | ✓ | ✓ |
| Aa | success-hell #00E676 | schwarz #1D1D1D | 10,10:1 | ✓ | ✓ |
| Aa | warning-hell #FFB000 | schwarz #1D1D1D | 9,20:1 | ✓ | ✓ |
| Aa | danger-hell #FB6D73 | schwarz #1D1D1D | 6,05:1 | ✓ | ✓ |
| Aa | info-hell #6B8AFF | schwarz #1D1D1D | 5,38:1 | ✓ | ✓ |
| Aa | text-leise #6B6666 | weiss #FFFFFF | 5,65:1 | ✓ | ✓ |
| Aa | text-leise #6B6666 | grau #F9F7F7 | 5,29:1 | ✓ | ✓ |
| Aa | kontur #8F8A8A | weiss #FFFFFF | 3,40:1 | ✗ | ✓ |
| Aa | kontur #8F8A8A | grau #F9F7F7 | 3,19:1 | ✗ | ✓ |
| Aa | blau-hell #6B8AFF | schwarz #1D1D1D | 5,38:1 | ✓ | ✓ |
Ableitungen daraus:
- Blau
#335DE5trägt Text auf Weiß (5,47:1, AA). Für kleine Links nutzen wir das etwas tiefere--cd-blau-link(6,56:1). - Grün
#00E676ist auf Weiß nur 1,67:1, also nie Fließtext. Grün nur groß und fett, als Fläche oder Grafik-Akzent. Auf Blau reicht Grün für große Elemente (3,28:1, AA groß), nicht für Kleingedrucktes. Auf Schwarz trägt Grün auch Text und Links (10,1:1, AAA). - Statusfarben: Erfolg ist das Marken-Grün, Hinweis das Marken-Blau. Grün und Amber sind auf Weiß zu hell für Text und für ein Signal allein (1,67:1 und 1,83:1). Sie stehen als Fläche, Rand oder Icon immer zusammen mit Text, Schrift darauf ist Schwarz. Rot und Blau erreichen als Text auf Weiß AA, die hellen Werte auf Schwarz ebenso (siehe Farben).
Rollen in Hell und Dunkel
Gebaute Oberflächen nehmen die Rollen --cd-ui-*, im Dark Mode mit eigenen Werten. Jede Text-, Kontur-, Fokus- und Akzentrolle steht hier auf jeder Fläche ihres Modus. Der Anspruch steht rechts: Text 4,5:1, Nicht-Text 3:1, die Linie ist dekorativ. Der Generator bricht ab, wenn ein Paar seinen Anspruch verfehlt.
Hell:
| Rolle hell | grund#F9F7F7 | flaeche#FFFFFF | flaeche-hoch#FFFFFF | hover#EEF1FD | Anspruch |
|---|---|---|---|---|---|
linie#E6E2E2 | 1,20 | 1,29 | 1,29 | 1,14 | dekorativ |
kontur#8F8A8A | 3,19 ✓erfüllt | 3,40 ✓erfüllt | 3,40 ✓erfüllt | 3,02 ✓erfüllt | Nicht-Text 3:1 |
text#1D1D1D | 15,79 ✓erfüllt | 16,86 ✓erfüllt | 16,86 ✓erfüllt | 14,96 ✓erfüllt | Text 4,5:1 |
text-leise#6B6666 | 5,29 ✓erfüllt | 5,65 ✓erfüllt | 5,65 ✓erfüllt | 5,01 ✓erfüllt | Text 4,5:1 |
link#2B50D4 | 6,15 ✓erfüllt | 6,56 ✓erfüllt | 6,56 ✓erfüllt | 5,82 ✓erfüllt | Text 4,5:1 |
icon-akzent#335DE5 | 5,13 ✓erfüllt | 5,47 ✓erfüllt | 5,47 ✓erfüllt | 4,86 ✓erfüllt | Nicht-Text 3:1 |
fokus#2B50D4 | 6,15 ✓erfüllt | 6,56 ✓erfüllt | 6,56 ✓erfüllt | 5,82 ✓erfüllt | Nicht-Text 3:1 |
interaktion#335DE5 | 5,13 ✓erfüllt | 5,47 ✓erfüllt | 5,47 ✓erfüllt | 4,86 ✓erfüllt | Nicht-Text 3:1 |
Dunkel:
| Rolle dunkel | grund#1D1D1D | flaeche#282828 | flaeche-hoch#2F2F2F | hover#383838 | Anspruch |
|---|---|---|---|---|---|
linie#464646 | 1,79 | 1,56 | 1,42 | 1,24 | dekorativ |
kontur#8F8A8A | 4,95 ✓erfüllt | 4,33 ✓erfüllt | 3,93 ✓erfüllt | 3,45 ✓erfüllt | Nicht-Text 3:1 |
text#FFFFFF | 16,86 ✓erfüllt | 14,74 ✓erfüllt | 13,39 ✓erfüllt | 11,73 ✓erfüllt | Text 4,5:1 |
text-leise#BBBBBB | 8,78 ✓erfüllt | 7,68 ✓erfüllt | 6,97 ✓erfüllt | 6,11 ✓erfüllt | Text 4,5:1 |
link#00E676 | 10,10 ✓erfüllt | 8,83 ✓erfüllt | 8,02 ✓erfüllt | 7,02 ✓erfüllt | Text 4,5:1 |
icon-akzent#00E676 | 10,10 ✓erfüllt | 8,83 ✓erfüllt | 8,02 ✓erfüllt | 7,02 ✓erfüllt | Nicht-Text 3:1 |
fokus#6B8AFF | 5,38 ✓erfüllt | 4,71 ✓erfüllt | 4,27 ✓erfüllt | 3,74 ✓erfüllt | Nicht-Text 3:1 |
interaktion#6B8AFF | 5,38 ✓erfüllt | 4,71 ✓erfüllt | 4,27 ✓erfüllt | 3,74 ✓erfüllt | Nicht-Text 3:1 |
- Dunkel ist der Text Weiß (11,73 bis 16,86:1), leiser Text
#BBBBBB(6,11 bis 8,78:1). Text mit Deckkraft gibt es nicht. - Blau ist dunkel nie Text (3,08:1 auf Schwarz). Links werden Grün, Fokus und Auswahl
blau-hell. - Die Linie ist dekorativ. Was eine Grenze sichtbar machen muss, etwa ein Eingabefeld, trägt
--cd-ui-kontur(3,45 bis 4,95:1).
Alt-Texte
Jedes Bild braucht eine Entscheidung, keinen Reflex:
- Dekorativ (Verlauf, Schmuck, Key Visual ohne Aussage): leeres
alt="", damit Screenreader es überspringen. - Inhaltstragend (Diagramm, Screenshot, Foto mit Aussage): kurz beschreiben, was zu sehen und gemeint ist.
- Text im Bild: Steht ein Claim oder eine Zahl eingebrannt im Bild (Social-Post, Banner), gehört dieser Text in den Alt-Text. Sonst geht die Kernaussage für Screenreader verloren.
Fokus und Tastatur
- Alles, was klickbar ist, ist auch per Tastatur erreichbar und bedienbar.
- Der Fokus ist sichtbar: ein Rahmen von 2px mit 2px Abstand in
--cd-ui-fokus, hellblau-link(6,56:1 auf Weiß), dunkelblau-hell(5,38:1 auf Schwarz). Auf Verlauf und Mesh ein Doppelring, innen Schwarz, außen Weiß. Nieoutline: noneohne Ersatz. - Reihenfolge folgt dem Lesefluss, keine Fokusfallen.
Touch-Ziele
Tippbare Flächen sind mindestens 44 × 44 px groß, auch wenn das Icon kleiner wirkt. Lieber die Trefferfläche vergrößern als das Icon.
Bewegung
- Animationen respektieren
prefers-reduced-motion. Wer Bewegung abgewählt hat, bekommt einen ruhigen Zustand (der animierte Startseiten-Hintergrund steht dann still). - Kein Dauer-Autoplay, kein Blinken, nichts, was schneller als dreimal pro Sekunde flackert.
- Bewegung ist Würze, kein Selbstzweck. Werte dafür stehen unter Layout & Raster.
Schriftgröße
Fließtext ist mindestens 16 px. Kleiner nur für echte Nebenrollen (Bildunterschrift, Hinweis), nie für Inhalt, den du lesen sollst.
Stand
Zielniveau AA ist gesetzt, die Kontrastwerte sind aus den Tokens berechnet. Für eine formale Prüfung (z. B. BFSG-Relevanz konkreter Produkte) das Marketing im ask-marketing-Channel fragen.