Barrierefreiheit und Farben
Barrierefreie Unternehmens-Farben sind kein gestalterischer Zusatz, sondern eine strategische Entscheidung für Lesbarkeit, Zugänglichkeit und Markenverantwortung. Nur durch bewusst geprüfte Farbkombinationen mit ausreichendem Kontrast wird sichergestellt, dass Inhalte für alle Menschen unabhängig von Sehfähigkeit oder Nutzungssituation zuverlässig wahrnehmbar sind.
Information: Farbkombinationen
Barrierefreie Farbkombinationen
Farbkombination „Weiß“ und „VGF-Türkis“
Farbkombination „Weiß“ und „VGF-Dunkel-Türkis“
Farbkombination „VGF-Dunkel-Türkis“ und „VGF-Gelb“
Farbkombination „VGF-Dunkel-Türkis“ und „VGF-Hell-Türkis“
Farbkombinationen für großen Text und Icons
Gilt für großen Text ≥ 24 px normal oder ≥ 18,66 px fett und grafische Bedienelemente und Icons.
Farbkombination „Weiß“ und „Mittel-VGF-Türkis für 3:1-Kontrast“
Farbkombination „VGF-Türkis“ und „VGF-Hell-Türkis“
Farbkombination „Minimalgrau für 3:1-Kontrast“ und „Weiß“
Problematische Farbkombinationen
Einige Farbkombinationen, die in der Vergangenheit gestalterisch eingesetzt wurden, erfüllen die heutigen Anforderungen an Kontrast und Barrierefreiheit nach WCAG/BITV nicht mehr und sind daher für informationstragende Inhalte nicht zulässig.
Farbkombination „Weiß“ und „VGF-Gelb“
Farbkombination „VGF Türkis“ und „VGF Gelb“
Farbkombination „VGF-Dunkel-Türkis“ und „VGF-Türkis“
Hintergrundinformationen zum Thema Farbe im Screendesign
Barrierefreiheit im digitalen Raum beginnt nicht bei einer einzelnen Farbe, sondern bei der Beziehung zwischen mindestens zwei Farben: Vordergrund und Hintergrund.
Was bedeutet Screendesign?
Screendesign umfasst alle visuellen Anwendungen, die auf einem Bildschirm dargestellt werden. Dazu zählen:
- Websites und Webanwendungen
- Intranet und Portale
- Mobile Apps
- PowerPoint- und Keynote-Präsentationen
- PDF-Dokumente zur Bildschirmnutzung
- Social-Media-Grafiken und Posts
- Videoeinblendungen (z. B. Bauchbinden, Titel, Untertitel)
- Digitale Displays und Infoscreens
Überall dort gelten dieselben Grundprinzipien: Information muss visuell eindeutig unterscheidbar und ohne unnötige Anstrengung lesbar sein.
Was bedeutet Kontrast im digitalen Kontext?
Im digitalen Raum wird Kontrast als Kontrastverhältnis (Ratio) zwischen zwei Farben berechnet. Grundlage sind:
- WCAG 2.1 / 2.2 (Level AA)
- BITV 2.0
- EN 301 549
Das Kontrastverhältnis beschreibt den Unterschied in der relativen Leuchtdichte zweier Farben.
Wichtig: Ein reiner Farbunterschied (z. B. Rot auf Grün) reicht nicht aus. Zwei Farbtöne können sich stark unterscheiden und dennoch nahezu denselben Helligkeitswert besitzen – und sind dann für viele Menschen kaum unterscheidbar.
Gerade in Präsentationen, Social Media und Video ist das relevant: Verläufe, Bildhintergründe, Animationen oder wechselnde Lichtverhältnisse können Kontraste zusätzlich reduzieren.
Welche Inhalte müssen barrierefrei sein?
Barrierefreiheit betrifft alle visuell vermittelten Informationen, unabhängig vom Medium.
Fließtext (normaler Text)
Mindestkontrast: 4,5 : 1
Gilt für:
- Website-Text
- PDF-Inhalte
- Präsentationsfolien
- Social-Media-Postings
- Videoeinblendungen
Großer Text
Mindestkontrast: 3 : 1
Groß = ≥ 24 px normal oder ≥ 18,66 px fett
Typisch bei:
- Headlines
- Folientiteln
- Bauchbinden im Video
Grafische Bedienelemente und Icons
Mindestkontrast: 3 : 1
Betrifft:
- Buttons
- Icons
- Navigationspunkte
- Formularfelder
- Fokus-Indikatoren
- Interaktive Elemente in Präsentationen oder Webanwendungen
Informationstragende Gestaltung
Farben dürfen Gestaltungsmittel sein. Sie dürfen jedoch nicht allein Information transportieren.
Problematisch sind z. B.:
- Fehlerhinweise nur in Rot
- Statusanzeigen nur durch Farbwechsel
- Diagramme ohne zusätzliche Kennzeichnung
- Hervorhebungen nur durch Farbe in Präsentationen
Erforderlich sind zusätzliche Merkmale wie:
- Text
- Icons
- Unterstreichungen
- Muster
- klare Formunterschiede