Barrierefreie Farbgestaltung: Kontrast und…

Barrierefreie Farben: Nicht nur "gut aussehend"

Weltweit haben etwa 8% der Männer und 0,5% der Frauen eine Farbsehschwäche — 1 von 12 Nutzern kann bestimmte Farben nicht normal unterscheiden.

Art der Farbsehschwäche	Häufigkeit	Schwer zu unterscheidende Farben
Protanopie (Rotblindheit)	1%	Rot-Grün
Deuteranopie (Grünblindheit)	5%	Rot-Grün
Tritanopie (Blaublindheit)	0,003%	Blau-Gelb
Achromatopsie (totale Farbenblindheit)	Äußerst selten	Alle

I. WCAG-Kontraststandards

Konformitätsstufen

Stufe	Normaler Text	Großer Text	UI-Komponenten
AA	≥ 4,5:1	≥ 3:1	≥ 3:1
AAA	≥ 7:1	≥ 4,5:1	—

Definition von großem Text: ≥ 18pt (24px) oder ≥ 14pt fett (18,66px bold).

Kontrastberechnung

Kontrast = (L1 + 0,05) / (L2 + 0,05)

L1 = Relative luminanz der helleren Farbe
L2 = Relative luminanz der dunkleren Farbe

Relative luminanz L:
  Für sRGB wobei sRGB ≤ 0,03928: L = sRGB / 12,92
  Für sRGB wobei sRGB > 0,03928: L = ((sRGB + 0,055) / 1,055)^2,4

  sRGB = R/255, G/255, B/255 (pro Kanal berechnet)

Kontrast häufiger Farbkombinationen

Vordergrund	Hintergrund	Kontrast	AA normaler Text	AA großer Text
`#000000`	`#FFFFFF`	21:1	✅	✅
`#333333`	`#FFFFFF`	12,6:1	✅	✅
`#666666`	`#FFFFFF`	5,7:1	✅	✅
`#767676`	`#FFFFFF`	4,5:1	✅ (genau)	✅
`#999999`	`#FFFFFF`	2,8:1	❌	❌
`#FF0000`	`#FFFFFF`	3,99:1	❌	✅
`#0000FF`	`#FFFFFF`	8,59:1	✅	✅

II. Kontrastüberprüfung mit ToolsKu

Bedienungsschritte

Öffnen Sie das Farbkontrast-Tool
Geben Sie Vordergrund- und Hintergrundfarbe ein (unterstützt HEX, RGB, HSL)
Überprüfen Sie die Ergebnisse:
- Kontrastverhältnis
- WCAG AA / AAA-Konformitätsstatus
- Getrennte Bewertung für normalen Text / großen Text
Passen Sie die Farben an, bis sie konform sind

III. Farbblindheitssimulation

Simulation mit CSS filter

/* Protanopie */
.protanopia { filter: url('#protanopia'); }

/* Deuteranopie */
.deuteranopia { filter: url('#deuteranopia'); }

/* Tritanopie */
.tritanopia { filter: url('#tritanopia'); }

SVG-Filtermatrix

<svg style="display:none">
  <!-- Protanopie-Simulationsmatrix -->
  <filter id="protanopia">
    <feColorMatrix type="matrix" values="
      0.567  0.433  0      0  0
      0.558  0.442  0      0  0
      0      0.242  0.758  0  0
      0      0      0      1  0
    "/>
  </filter>

  <!-- Deuteranopie-Simulationsmatrix -->
  <filter id="deuteranopia">
    <feColorMatrix type="matrix" values="
      0.625  0.375  0      0  0
      0.7    0.3    0      0  0
      0      0.3    0.7    0  0
      0      0      0      1  0
    "/>
  </filter>
</svg>

IV. Anpassungsstrategien für Farbblinde

Strategie 1: Nicht nur auf Farbe zur Informationsübermittlung verlassen

<!-- Falsch: Status nur durch Farbe unterscheiden -->
<span class="status-error" style="color: red">Fehlgeschlagen</span>
<span class="status-success" style="color: green">Erfolgreich</span>

<!-- Richtig: Farbe + Symbol -->
<span class="status-error" style="color: red">
  <svg>✕</svg> Fehlgeschlagen
</span>
<span class="status-success" style="color: green">
  <svg>✓</svg> Erfolgreich
</span>

Strategie 2: Farbblinden-freundliche Farbkombinationen verwenden

Zu vermeidende Kombination	Alternative Kombination
Rot + Grün	Rot + Blau, oder Orange + Blau
Hellrot + Hellgrün	Dunkelrot + Hellgrün
Grün Erfolg + Rot Fehler	Blau Info + Orange Warnung

Wong Farbblinden-freundliche Palette

#000000 Schwarz
#E69F00 Orange
#56B4E9 Himmelblau
#009E73 Türkisgrün
#F0E442 Gelb
#0072B2 Blau
#D55E00 Zinnoberrot
#CC79A7 Rosa-Violett

Diese Palette ist unter allen Arten von Farbsehschwächen unterscheidbar.

Strategie 3: Texturen/Muster in Diagrammen verwenden

/* Verschiedene Datenreihen verwenden verschiedene Texturen */
.series-a { background-image: url('stripes.svg'); }
.series-b { background-image: url('dots.svg'); }
.series-c { background-image: url('crosshatch.svg'); }

V. Barrierefreiheit im Dunkelmodus

Kontrastfallen im Dunkelmodus

Falle	Beschreibung	Lösung
Rein schwarzer Hintergrund mit rein weißem Text	Kontrast 21:1, verursacht aber Augenbelastung	Dunkelgrauen Hintergrund verwenden (#1a1a2e)
Sättigung reduzieren	Hohe Sättigung im Dunkelmodus ist grell	Sättigung angemessen reduzieren
Schatten nicht sichtbar	Schatten verschwinden auf dunklem Hintergrund	Rahmen oder Helligkeitsunterschied verwenden
Unzureichender Bildkontrast	Bilddetails gehen im Dunkelmodus verloren	Mit CSS filter anpassen

Farbvorschläge für den Dunkelmodus

:root {
  /* Hellmodus */
  --bg: #ffffff;
  --fg: #1a1a2e;
  --muted: #6b7280;
  --accent: #3b82f6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a2e;
    --fg: #e0e0e0;
    --muted: #9ca3af;
    --accent: #60a5fa; /* Helleres Blau, hält Kontrast aufrecht */
  }
}

VI. Barrierefreiheitsprüfung auf Komponentenebene

Fehlermeldungen in Formularen

<!-- Falsch: Nur roter Rahmen als Hinweis -->
<input style="border: 1px solid red" />

<!-- Richtig: Rahmen + Text + aria -->
<input
  style="border: 1px solid red"
  aria-invalid="true"
  aria-describedby="error-msg"
/>
<span id="error-msg" role="alert" style="color: #dc2626">
  Bitte geben Sie eine gültige E-Mail-Adresse ein
</span>

Kontrast zwischen Links und umgebendem Text

Links benötigen nicht nur ausreichenden Kontrast zum Hintergrund, sondern auch visuelle Unterscheidung vom umgebenden Text:

/* Links werden nicht nur durch Farbe, sondern auch durch Unterstreichung unterschieden */
a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

VII. Automatisierte Erkennung

axe-core-Integration

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('Farbbarrierefreiheit', async () => {
  const { container } = render(<MyComponent />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Lighthouse-Audit

npx lighthouse https://example.com --only-categories=accessibility

CI-Integration

- name: Accessibility check
  run: npx pa11y https://staging.example.com

VIII. Liste der Best Practices

Textkontrast ≥ 4,5:1 (normaler Text Stufe AA)
Nicht nur auf Farbe verlassen zur Übermittlung von Statusinformationen
Farbblinden-freundliche Palette verwenden (wie die Wong-Palette)
Texturen/Muster zu Diagrammen hinzufügen zur Unterscheidung
Kontrast im Dunkelmodus beibehalten, rein schwarzen Hintergrund vermeiden
Links haben Unterstreichung oder andere nicht-farbliche Unterscheidung
Fehlermeldungen haben Textbeschreibung, nicht nur rote Farbe
Automatisierte Barrierefreiheitstests in CI integriert