Barrierefreie Farbkontraste in Bildern
für bessere Bilder, Illustrationen und Grafiken
Bilder, Illustrationen und Grafiken tragen zur Attraktivität und zur schnellen Verständlichkeit von Webinhalten und Printmedien bei. Dabei sollte allerdings auch auf die Barrierefreiheit geachtet werden, denn Menschen mit Sehbehinderungen oder Farbfehlsichtigkeiten können sonst mit diesen Inhalten wenig anfangen.
Arten von Farbkontrasten
Es gibt viele verschiedene Kriterien für barrierefreie Bilder und Grafiken. Wir beschäftigen uns hier mit einem wichtigen Aspekt – dem Kontrast. Und auch hier ist Kontrast nicht gleich Kontrast, denn es gibt nach Johannes Itten klassisch sieben verschiedene Arten von Kontrasten:
- Farbe-an-sich-Kontrast (auch Buntkontrast genannt)
- Komplementärkontrast
- Hell-Dunkel-Kontrast (auch Helligkeitskontrast genannt)
- Kalt-Warm-Kontrast
- Qualitätskontrast (auch Sättigungskontrast genannt)
- Quantitätskontrast (auch Flächenkontrast genannt)
- Simultankontrast
Kontraste können täuschen
also schauen wir genauer hin ...
Wenn es darum geht, dass ein Bild auch für Menschen mit Seh- oder Farbsehschwächen gut erkennbar sein soll, muss man genauer auf die Art der Kontraste schauen.
Ein klassischer Problemfall ist hier der Rot-Grün-Komplementärkontrast, welcher in unserem Kulturkreis gerne zur Kennzeichnung sicherheitsrelevanter Zeichen verwendet wird – man denke nur an die Ampel.
Und wir schauen noch genauer hin ...
Für fast 10 Prozent der Männer in Deutschland sind die Farben Rot und Grün kaum zu unterscheiden, da sie an einer genetisch bedingten Farbfehlsichtigkeit (Tritanopie) leiden.
So sehen die selben leuchtenden Ampeln für Menschen mit Farbsehschwäche aus. Wie Sie sehen, sehen Sie nichts.
Für Menschen mit Farbfehlsichtigkeiten ist daher ein Kontrast entscheidend – der Hell-Dunkel-Kontrast, denn nur dieser ist unabhängig von der Farbe.
Der WCAG-Standard für Kontrastverhältnisse
Die WCAG (Web Content Accessibility Guidelines) empfehlen Mindestwerte für das Kontrastverhältnis zwischen Vorder- und Hintergrundelementen im Web.
Genau genommen, geht es dabei um die Helligkeit oder Leuchtkraft zwischen zwei Farben. Der Helligkeitsunterschied wird in einem Verhältnis von 1:1 (weißer Text auf weißem Hintergrund) bis 21:1 (schwarzer Text auf weißem Hintergrund) ausgedrückt.
Wenn Vorder- und Hintergrundfarbe sich in ihrer Helligkeit zu sehr ähneln, ist das Kontrastverhältnis (contrast ratio) zu niedrig. Unterscheiden sie sich deutlich, ist das Kontrastverhältnis hoch.
Testen Sie doch mal Ihre Kontraste – zum Beispiel mit dem Gratis-Tool von WebAIM. Viel Spaß und gutes Gelingen!