Farben und Kontrastwerte

1. Übung

Überprüfen Sie am besten anhand Ihrer eigenen Bildungsmaterialien die Kontrastwerte von Texte und Hintergrund sowie die farbliche Gestaltung.

Nutzen Sie dafür z. B. den online Kontrastrechner von leserlich.info (externer Link) oder den online Kontrastrechner von WebAIM (externer Link).

Mit Hilfe des Farbenblindheit Simulator des Interessenverbands der Farbsehschwachen und Farbenblinden e. V. (externer Link) können Sie eigene Grafiken aus Sicht unterschiedlicher Farbsehschwächen betrachten und prüfen.

Betrachten Sie Ihre Materialien in unterschiedlichen Kontrastdesigns Ihres Betriebssystems und prüfen Sie, ob alle Inhalte weiterhin erkennbar und alle Funktionen nutzbar sind.

Auf den nachfolgenden Seiten finden Sie grundlegende Informationen und Hilfestellungen zum Nachlesen.

Zum Einstieg können Sie dieses Quiz nutzen:

2. Einstieg

Farben strukturieren Inhalte, lenken Aufmerksamkeit und helfen beim schnellen Verstehen. In Bildungs- und Informationsmaterialien können Farben aber auch schnell zur Barriere werden: Wenn Kontraste zu gering sind oder Informationen nur über Farbe vermittelt werden, sind Inhalte für viele Nutzende schwer oder gar nicht nutzbar, z. B. bei 

• Sehbeeinträchtigungen
• Farbsinnstörungen (z. B. Rot-Grün-Schwäche)
• Blendempfindlichkeit
• Nutzung von Screen-Vergrößerung
• schlechten Displays, Beamer-Darstellung oder 
• starker Umgebungshelligkeit.

Barrierefreiheit verstärken Sie hier vor allem mit zwei Maßnahmen:

1. Ausreichender Kontrast WCAG 2.2 / 1.4.3
   Text, Icons und Bedienelemente müssen sich klar vom Hintergrund abheben. Was am eigenen Bildschirm „noch okay“ wirkt, kann bei Zoom, auf dem Smartphone oder am Beamer praktisch verschwinden. Gute Kontraste sind deshalb nicht nur ein „Accessibility-Thema“, sondern verbessern die Lesbarkeit für alle.

2. Keine Information nur über Farbe / 2-Sinne-Prinzip WCAG 2.2 / 1.4.1
   Farbe darf unterstützen, aber nicht die einzige Trägerin von Bedeutung sein. Beispiele: „Pflichtfelder sind rot“, „richtige Antworten sind grün“, „klicke auf den blauen Button“. Solche Hinweise funktionieren nicht zuverlässig für Menschen mit Farbsinnstörungen oder bei individuellen Anzeigeeinstellungen (z. B. hoher Kontrastmodus). Besser ist immer eine redundante Kennzeichnung: Farbe plus Text, Symbol, Label oder klare Beschriftung.

Gerade in Moodle-Kursen und H5P ist das relevant, weil dort häufig:

• Links nur farblich hervorgehoben werden,
• Hinweisboxen mit farbigem Hintergrund genutzt werden,
• Feedback in Tests/Interaktionen über eine farbliche Rückmeldung erfolgt (z. B. Rot/Grün),
• Inhalte in Course Presentations oder Grafiken „als Bild“ gestaltet werden (Text im Bild),
• und interaktive Elemente (Buttons, Auswahlfelder) visuell zwar „schön“, aber kontrastarm sind.

Für die Gestaltung von Bildungs- und Informationsmaterialien heißt das: 
Nutzen Sie Farbe bewusst und sparsam, prüfen Sie Kontraste bei zentralen Elementen (Text, Links, Buttons, Feedback) und sorgen Sie dafür, dass jede wichtige Information auch ohne Farbwahrnehmung verständlich bleibt. So werden Moodle-Seiten und H5P-Aktivitäten robuster, verständlicher und für deutlich mehr Nutzende zugänglich.

3. Kontrastwerte

• Normaler Text: Kontrast mind. 4,5:1
• Großer Text (ca. ab 18 pt bzw. 14 pt fett): mind. 3:1
• Icons / Bedienelemente / grafische UI-Elemente (z. B. Button-Umrandung, Checkbox, Slider): mind. 3:1 zum Hintergrund

4. Moodle-Kurse: typische Stolperstellen + Lösungen

„Bunter Text“ im Editor

• Problem: Hellgrau, Pastell, Gelb auf Weiß → viele Farbkombinationen weisen nicht den erforderlichen Kontrastwert auf.
• Textfarbe möglichst nicht ändern. Nutzen Sie stattdessen:
  • Überschriften (H2/H3) für Struktur
  • Fett für Betonung (sparsam)
  • Listen statt farbiger Aufzählungen
  • Hinweisboxen/Formatvorlagen des Kurs-Themes bzw. über Bootstrap / tinyMc Elements

Links müssen erkennbar sein

• Problem: Die Linkfarbe hat oft zu wenig Kontrast oder ist nur minimal anders als die Schriftfarbe.
• Tipps:
  • Links sollten nicht nur über Farbe erkennbar sein (z. B. zusätzlich Unterstreichung verwenden).
  • Sprechende Linktexte einsetzen statt „hier“ (hilft auch beim Scannen).
  • Keine „Linklisten“ als Fließtext: lieber als Liste/Aufzählung formatieren → bessere Lesbarkeit.

Text auf farbigem Hintergrund (Boxen, Labels)

• Problem: Weiß auf hellen Farben oder Schwarz auf dunklen Farben.
• Tipps:
  • Wenn Hintergrund farbig: Kontrast prüfen (4,5:1 für Text).
  • Lieber heller Hintergrund + dunkler Text als umgekehrt.
  • Keine Informationen nur über farbige Box („rote Box = Pflicht“ → zusätzlich „Pflicht“ schreiben).

Tabellen und Hervorhebungen

• Problem: Zellen nur farbig markiert („grün = bestanden“).
• Tipp: Zusätzlich Text („bestanden/nicht bestanden“) oder Symbol + Text. Bei Symbolen prüfen, wie diese z. B. von einem Screenreader vorgelesen werden, um Dopplungen zu vermeiden.

5. H5P: typische Stolperstellen + Lösungen

Interaktive Elemente (Buttons, Hotspots, Markierungen)

• Problem: Bedienelemente sind farblich zu schwach oder ihr Status wird nur über Farbe kenntlich gemacht.
• Tipps:
  • Status immer doppelt: Farbe + Textfeedback („Richtig/Falsch“, „Ausgewählt“).
  • Achten Sie darauf, dass Fokus/Markierung sichtbar bleibt (nicht „Ton-in-Ton“).

Text in Bildern / Folien (Course Presentation etc.)

• Problem: Text ist „eingebrannt“ und hat oft schlechten Kontrast; bei Zoom wird’s pixelig.
• Tipps:
  • Text als echten Text in H5P/Moodle setzen, nicht ins Bild.
  • Wenn Bildtext unvermeidbar: hohe Kontraste, große Schrift, zusätzlich Textalternative im Fließtext.

Drag-and-Drop & farbcodierte Aufgaben

• Problem: „Zieh die roten Begriffe…“ oder Zuordnung nur über Farben.
• Tipp: Kategorien/Targets benennen („Kategorie A/B“) und nicht farbabhängig erklären.

6. Tools und Tests

• Beamer-Test: Sieht man es noch im Seminarraum? Wenn nicht: Kontrast erhöhen.
• Graustufen-Test: Wenn Elemente in Graustufen nicht unterscheidbar sind, sind sie wahrscheinlich farbabhängig.
• Zoom-Test (200%): Bleibt alles lesbar und klar erkennbar?
• Kontrast-Design-Test: Über das Betriebssystem umstellen und den Kurs testen: Verschwinden Bedienelemente oder sind Aufgabenstellungen nicht mehr lösbar?
• "Untersuchen" über den Browser/Dev-Tools: Viele Browser zeigen Kontrastwerte direkt an und bieten eine technische Überprüfung der Seite.
• Selbsttests: Es stehen eine Vielzahl halb- bis vollautomatisierter Testtools zur Verfügung, die Ihre Selbsteinschätzung unterstützen können. Übersicht Selbsttestoptionen digitale Barrierefreiheit der Bundesfachstelle Barrierefreiheit (externer Link)
• Simulationen: Nutzen Sie die Möglichkeit, Grafiken aus der Sicht bestimmter Beeinträchtigungen anzuzeigen und zu testen. Z. B. die Seite farbschwaeche.de des Interessenverbands der Farbsehschwachen und Farbblinden e.V. (externer Link) bietet die Möglichkeit Beispielbilder, aber auch eigene Grafiken in einer Simulation zu betrachten.