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
Quellen & Referenzen
- •
- •
Unsere Berechnungen basieren auf offiziellen Quellen und wissenschaftlichen Standards.
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
Häufig gestellte Fragen zum Farb-Kontrast-Checker
Was ist das WCAG-Kontrastverhältnis und warum ist es wichtig?
Welche WCAG-Standards gelten in Deutschland für Websites?
Wie berechne ich das Kontrastverhältnis zwischen zwei Farben?
Welche Farben sind besonders problematisch für die Barrierefreiheit?
Muss ich für mobile Apps andere Kontrast-Standards beachten?
Wie teste ich Kontraste für farbenblinde Nutzer?
Welche rechtlichen Konsequenzen drohen bei nicht-barrierefreien Websites?
Wie kann ich bestehende Websites auf Kontrast-Konformität prüfen?
Welche Tools helfen bei der barrierefreien Farbauswahl?
Wie implementiere ich barrierefreie Farben in CSS und Design Systems?
Was sind die häufigsten Kontrast-Fehler bei deutschen Websites?
Wie optimiere ich Kontraste für ältere Nutzer und Sehbehinderungen?
Welche Browser-Einstellungen beeinflussen die Kontrast-Wahrnehmung?
Wie dokumentiere ich Kontrast-Requirements für Entwicklungsteams?
Was kostet die Implementierung von barrierefreien Farb-Designs?
Farbkontrast prüfen – WCAG-Barrierefreiheit 2026
Ausreichender Farbkontrast ist essenziell für barrierefreies Webdesign. Die WCAG 2.1 definiert Mindestkontrast-Verhältnisse, die seit dem Barrierefreiheitsstärkungsgesetz (BFSG) 2025 in Deutschland verpflichtend sind. Unser Tool prüft Ihre Farbkombinationen sofort.
WCAG-Kontrastanforderungen
| Element | Level AA | Level AAA | Beispiel |
|---|---|---|---|
| Normaler Text (< 18px) | 4,5:1 | 7:1 | Fließtext, Links |
| Großer Text (≥ 18px / 14px bold) | 3:1 | 4,5:1 | Überschriften |
| UI-Komponenten | 3:1 | – | Buttons, Icons, Formularfelder |
| Nicht-Text-Grafiken | 3:1 | – | Diagramme, Infografiken |
| Dekorative Elemente | keine | keine | Hintergründe, Rahmen |
Tipps für barrierefreie Farben
- ●BFSG-Pflicht: Seit Juni 2025 müssen digitale Produkte und Dienstleistungen in Deutschland barrierefrei sein – WCAG AA ist Mindeststandard.
- ●Farbe allein reicht nicht: Informationen nie nur über Farbe vermitteln – zusätzlich Symbole, Muster oder Text verwenden.
- ●Farbfehlsichtigkeit: 8 % der Männer sind rot-grün-blind – Rot/Grün-Kombinationen vermeiden.
- ●Dark Mode testen: Kontraste separat für helles und dunkles Theme prüfen – Werte können stark abweichen.
- ●Tool-Tipp: Chrome DevTools → Rendering → „Emulate vision deficiencies“ simuliert verschiedene Farbfehlsichtigkeiten.
Ihre Rechner-Reise
Nutzen Sie diese Tools für eine vollständige Analyse
Weitere hilfreiche Tools
Aspect Ratio Rechner
Aspect Ratio Rechner berechnen und vergleichen
Bildaufloesung Rechner
Bildaufloesung Rechner berechnen und vergleichen
Brennweiten Aequivalent Rechner
Brennweiten Aequivalent Rechner berechnen und vergleichen
Dpi Rechner
Dpi Rechner berechnen und vergleichen
Ähnliche Rechner & Tools
Längen-Konverter
Konvertieren Sie zwischen Metern, Kilometern, Zoll, Fuß, Yards, Seemeilen und mehr.
Gewicht-Konverter
Rechnen Sie zwischen Kilogramm, Pfund, Unzen, Tonnen, Steinen und Karat um.
Geschwindigkeits-Konverter
Konvertieren Sie zwischen km/h, mph, m/s, Knoten und Mach.
Zeitzonen-Konverter
Rechnen Sie Uhrzeiten zwischen verschiedenen Zeitzonen um. Mit aktuellen Weltzeiten und Sommerzeit-Berücksichtigung.
Druck-Konverter
Konvertieren Sie zwischen Bar, PSI, Pascal, Atmosphäre und anderen Druckeinheiten.
Prozent-Rechner - Rabatt MwSt Trinkgeld berechnen
Kostenloser Prozent-Rechner für Deutschland: Prozentsätze, Rabatte, MwSt (19% 7%), Trinkgeld und prozentuale Änderungen schnell berechnen. Mit Formeln, Beispielen und Deutschland-spezifischen Steuersätzen.