Farb-Kontrast-Checker
WCAG-konformer Farb-Kontrast-Checker für barrierefreie Websites. Prüfen Sie AA/AAA Konformität und optimieren Sie Ihre Farbkombinationen für beste Zugänglichkeit.
Farb-Kontrast-Checker
WCAG-konformer Kontrastverhältnis-Prüfer für Barrierefreiheit
🖋️ Vordergrundfarbe (Text)
🖼️ Hintergrundfarbe
Live-Vorschau
📚 WCAG-Standards
• AA Normal: 4.5:1 für Text unter 18pt
• AA Groß: 3:1 für Text 18pt+ oder 14pt+ fett
• AAA Normal: 7:1 für höchste Zugänglichkeit
• AAA Groß: 4.5:1 für große Schriften
• Minimum: AA-Standard für gesetzliche Konformität
♿ Barrierefreiheit
• Sehschwäche: Höherer Kontrast hilft Menschen mit eingeschränktem Sehvermögen
• Farbenblindheit: Kontrast wichtiger als Farbwahl allein
• Umgebungslicht: Guter Kontrast bei verschiedenen Lichtverhältnissen
• Alter: Mit dem Alter nimmt Kontrastwahrnehmung ab
• Gesetzlich: EU-Richtlinien erfordern WCAG-Konformität
WCAG-Standards im Überblick
- AA Normal: 4.5:1 (Standard)
- AA Groß: 3:1 (18pt+ Text)
- AAA Normal: 7:1 (Premium)
- AAA Groß: 4.5:1 (Optimal)
WCAG-Barrierefreiheit und Farbkontraste verstehen
🎯 WCAG-Grundlagen
Die Web Content Accessibility Guidelines (WCAG 2.1) definieren internationale Standards für digitale Barrierefreiheit. In Deutschland sind sie für öffentliche Websites gesetzlich vorgeschrieben.
Kontrastverhältnis-Berechnung: Das Verhältnis wird mathematisch als (hellere Luminanz + 0.05) / (dunklere Luminanz + 0.05) berechnet und reicht von 1:1 (kein Kontrast) bis 21:1 (maximaler Kontrast).
Level AA vs. AAA: Level AA ist der gesetzliche Standard, Level AAA bietet höchste Zugänglichkeit für kritische Anwendungen oder spezialisierte Zielgruppen.
👥 Zielgruppen & Auswirkungen
Menschen mit Sehbehinderungen: 1,2 Millionen Menschen in Deutschland haben Sehbehinderungen. Guter Kontrast ermöglicht ihnen die selbstständige Nutzung digitaler Inhalte.
Farbenblindheit: 8% der Männer und 0,5% der Frauen sind farbenblind. Ausreichender Kontrast kompensiert Farbwahrnehmungsprobleme effektiv.
Altersbedingte Einschränkungen: Mit zunehmendem Alter nimmt die Kontrastwahrnehmung ab. 50+ Nutzer benötigen höhere Kontraste für komfortable Nutzung.
⚖️ Rechtliche Aspekte
• Deutschland: BGG §12a - öffentliche Stellen
• EU: European Accessibility Act ab 2025
• Privatwirtschaft: Zunehmende Klagegefahr
• Bußgelder: Bis 100.000€ möglich
• Positive Effekte: +15% Zielgruppe, bessere SEO
• Versicherung: Cyber-Policen decken oft keine Accessibility-Klagen
Technische Implementierung und Best Practices
💻 Technische Umsetzung
CSS Custom Properties
--text-primary: #1a1a1a; /* 12.6:1 auf Weiß */
--text-secondary: #4a4a4a; /* 7:1 auf Weiß */
--bg-primary: #ffffff;
}
Automatisierte Tests
Integrieren Sie Axe-Core oder Pa11y in Ihre CI/CD-Pipeline für kontinuierliche Accessibility-Tests. Jest-Axe ermöglicht Unit-Tests für React-Komponenten.
Design System Integration
Definieren Sie nur WCAG-konforme Farbkombinationen als Design Tokens. Storybook-Addons können Kontraste direkt in der Komponentendokumentation anzeigen.
🎨 Design-Strategien
Markenfarben & Accessibility
Verwenden Sie Markenfarben für Akzente und non-kritische Elemente. Entwickeln Sie accessible Varianten für Text und interaktive Elemente. Dokumentieren Sie Anwendungsregeln für Ihr Team.
Dark Mode Considerations
Dark Mode erfordert eigene Kontrast-Checks. Reines Schwarz (#000) kann zu anstrengend sein - verwenden Sie dunkle Grautöne (#121212). Testen Sie beide Modi separat.
Mobile Optimierung
Mobile Geräte haben zusätzliche Herausforderungen: Sonnenlicht, kleinere Bildschirme, verschiedene Display-Technologien. Testen Sie unter realen Bedingungen.
Häufige Kontrast-Probleme und Lösungsansätze
❌ Häufige Fehler
Grauer Text: #666 auf #FFF = 5.74:1 (grenzwertig)
Placeholder Text: Oft zu hell für Accessibility
Link-Farben: Insufficient Kontrast zu Text und Hintergrund
Button States: Hover/Focus nicht kontrastkonform
Icons: Unzureichender Kontrast bei dekorativen Elementen
⚠️ Besondere Herausforderungen
Farbenblindheit: Rot-Grün-Kombinationen vermeiden
Transparenzen: Overlays können Kontrast reduzieren
Gradients: Verschiedene Kontraste im Verlauf
Images: Text über Bildern schwer kontrollierbar
Video: Untertitel mit ausreichendem Kontrast
✅ Bewährte Lösungen
Text-Schatten: Verbessert Kontrast über Bildern
Outline: Zusätzlicher Kontrast für kritische Elemente
Kontext-sensitive Farben: Automatische Anpassung
Redundante Informationen: Nicht nur Farbe verwenden
User Preferences: High-Contrast Mode unterstützen
💡 Praktische Tipps für Entwickler und Designer
🔧 Entwickler-Tools
- • Chrome DevTools: Accessibility Panel für Live-Kontrast-Checks
- • Firefox: Accessibility Inspector mit Kontrast-Simulation
- • Browser-Extensions: axe DevTools, WAVE, Lighthouse
- • VS Code Extensions: axe Accessibility Linter
- • Automated Testing: Jest-Axe, Cypress-Axe für E2E-Tests
- • Command Line: Pa11y für Batch-Testing
🎨 Designer-Workflow
- • Figma: Stark Plugin für Echtzeit-Kontrast-Checks
- • Sketch: Color Oracle für Farbenblindheit-Simulation
- • Adobe XD: Accessibility Panel in Creative Suite
- • Design Handoff: Kontrast-Werte in Specs dokumentieren
- • Prototyping: Accessibility-Tests in User Testing
- • Color Palettes: Nur WCAG-konforme Kombinationen verwenden
Internationale Standards und Zertifizierung
🇩🇪 Deutschland
BGG §12a: Öffentliche Stellen
BITV 2.0: Umsetzungsverordnung
Monitoring: Überwachungsstelle des Bundes
Sanktionen: Bis 100.000€ Bußgeld
🇪🇺 EU-Richtlinien
EU 2016/2102: Öffentlicher Sektor
EAA 2025: Privatwirtschaft
EN 301 549: Technischer Standard
Scope: E-Commerce, Banking, Transport
🌍 International
Section 508: USA Federal Agencies
AODA: Ontario, Canada
JIS X 8341: Japan Industrial Standard
DDA: Australia Disability Act
🏆 Zertifizierung
IAAP: Certified Professional
WebAIM: Third-party Audits
Level Access: Compliance Testing
Selbst-Bewertung: VPAT Templates