Kontrast & Farben
Optimale Lesbarkeit für alle Benutzer sicherstellen
WCAG EN 301 549 Kriterien
Textkontrast
Schlechtes Beispiel
Hellgrauer Text auf Weiß (2,2:1) - Fehler
Ratio: 2.2:1Mittelgrauer Text auf Weiß (3,8:1) - Fehler
Ratio: 3.8:1Gelber Text auf Weiß (1,9:1) - Fehler
Ratio: 1.9:1Orange auf Rot (1,2:1) - Fehler
Ratio: 1.2:1Dunkelgrau auf schwarzem Hintergrund (2,5:1) - Fehler
Ratio: 2.5:1Blau auf dunklem Hintergrund (1,8:1) - Fehler
Ratio: 1.8:1Gutes Beispiel
Dunkelgrauer Text auf Weiß (7,0:1) - AAA Erfolg
Ratio: 7.0:1Schwarzer Text auf Weiß (21:1) - AAA Erfolg
Ratio: 21:1Dunkelblauer Text auf Weiß (5,9:1) - AA Erfolg
Ratio: 5.9:1Weiß auf Dunkelblau (8,6:1) - AAA Erfolg
Ratio: 8.6:1Weiß auf schwarzem Hintergrund (21:1) - AAA Erfolg
Ratio: 21:1Gelb auf dunklem Hintergrund (12,3:1) - AAA Erfolg
Ratio: 12.3:1Erklärung: Das WCAG AA Kontrastverhältnis erfordert mindestens 4,5:1 für normalen Text und 3:1 für großen Text (18pt+ oder 14pt+ fett). AAA-Niveau ist strenger mit 7:1 und 4,5:1.
Information durch Farbe
Schlechtes Beispiel
Anmeldeformular
🔴 Rot = Fehler, Grün = Gültig
Bestellstatus
Gutes Beispiel
Anmeldeformular
Bestellstatus
Erklärung: Informationen sollten sich niemals nur auf Farbe stützen. Fügen Sie immer zusätzliche visuelle Indikatoren hinzu (Icons, Muster, Text).
Farbenblindheit und Barrierefreiheit
Schlechtes Beispiel
Leistungsdiagramm
Gutes Beispiel
Leistungsdiagramm
Erklärung: Etwa 8% der Männer und 0,5% der Frauen sind farbenblind. Rot-Grün-Kombinationen sind besonders problematisch.
Barrierefreier Theme-Wechsler
Schlechtes Beispiel
Seiteninhalt
Dieser Text ändert die Farbe entsprechend dem Theme.
Informationskarte
Wichtige Information zum Lesen.
Gutes Beispiel
Seiteninhalt
Dieser Text behält in allen Themes guten Kontrast.
Informationskarte
Wichtige Information immer lesbar.
Erklärung: Ein Theme-Wechsler muss Kontrastverhältnisse beibehalten, Lesbarkeit bewahren und die Systempräferenzen des Benutzers respektieren.
Links - Unterstreichung und Identifikation
Schlechtes Beispiel
Links nur auf Farbe basierend
Web-Barrierefreiheit ist wesentlich für die Erstellung inklusiver Websites. Mehr über Barrierefreiheit erfahren kann Ihnen helfen, Best Practices zu verstehen. Die WCAG-Richtlinien bieten einen umfassenden Rahmen zur Verbesserung der Barrierefreiheit.
Besuchen Sie unsere Ressourcenseite, um Tools und Tutorials zu finden.
Gutes Beispiel
Links nur auf Farbe basierend
Web-Barrierefreiheit ist wesentlich für die Erstellung inklusiver Websites. Mehr über Barrierefreiheit erfahren kann Ihnen helfen, Best Practices zu verstehen. Die WCAG-Richtlinien bieten einen umfassenden Rahmen zur Verbesserung der Barrierefreiheit.
Besuchen Sie unsere Ressourcenseite, um Tools und Tutorials zu finden.
Erklärung: Links müssen identifizierbar sein, ohne sich nur auf Farbe zu verlassen. Unterstreichung, Musterunterschiede oder andere visuelle Indikatoren sind wesentlich.