Was sind Farbkontraste?
Nicht alle Menschen nehmen Farben gleich wahr – manche haben Sehschwächen oder Farbfehlsichtigkeiten (z. B. Rot-Grün-Schwäche). Ist der Kontrast zwischen Text und Hintergrund zu gering, wird der Inhalt schwer oder gar nicht lesbar.
In der Grundeinstellung ist SlideSync bereits mit korrekten
Farbkontrasten ausgestattet. Wenn Sie keine farblichen Änderungen vornehmen,
müssen Sie also nichts weiter beachten.
Ändern Sie jedoch in der Beschreibung Textfarben oder Hintergründe, oder lassen
Sie über den Support eigene Farbprofile einrichten, sollten Sie die Kontraste
überprüfen. Dafür stehen zwei hilfreiche Werkzeuge zur Verfügung.
Tools zur Prüfung von Farbkontrasten
Endergebnis prüfen: WAVE Checker
- Installieren Sie die Chrome-, Firefox- oder Edge-Erweiterung
- Öffnen Sie die Teilnehmerseite und klicken Sie auf das WAVE-Symbol neben der Browser-Adressleiste
- Alternativ: Rechtsklick auf die Seite → „WAVE this page“
- Das Tool zeigt Ihnen direkt an, ob Farbkontraste oder andere
Barrierefreiheitsprobleme bestehen
Kontraste vorab prüfen: WebAIM Contrast Checker
- Geben Sie Textfarbe und Hintergrundfarbe als Hex-Code oder RGB-Wert ein
- Das Tool zeigt, ob die ausgewählte Farbkombination die WCAG-Kontrastanforderungen erfüllt
- Besonders hilfreich, wenn Sie schon bei der Gestaltung neue Farben testen möchten, bevor Sie diese im System einsetzen
Prüfen von Farbkonstrasten mit Wave
Installieren Sie zunächst die Chrome-Erweiterung. Anschließend mit der rechten Maustaste an eine beliebige Stelle in der Teilnehmerseiten-Vorschau klicken – es erscheint ein Menü
"Wave this page" mit weiteren Optionen.
Daraufhin wird eine Seitenleiste erscheinen mit einer Zusammenfassung, für Sie
ist besonders der letzte Tab "Contrast" relevant:
Aktuell hat die Seite keine Farbkontrastverletzungen (Contrast Errors 0), das wird ebenfalls auf dem Kontrastfeld gezeigt:
Angenommen sie ändern die Textfarben in der Beschreibung:
Beide Änderungen sind nicht vereinbar mit Kontrastrichtlinien, das wird jetzt in der Vorschau von Wave erkannt. Sie können speziell auf den Fehler klicken, dann wird auf der Seite der Fehler Rot umrahmt:
So können sie Fehler frühzeitig erkennen und dann entsprechend wieder in der Beschreibung ändern, bis die Kontraste stimmen.
Vorabprüfung von Farbkontrasten
Sollten Sie dem Support benutzerdefinierte Designs mitgeben, ist es hilfreich
diese vorher prüfen zu lassen. Hierbei kann der Contrast-Checker helfen.
Wichtig ist, dass Sie immer bedenken welche Farbe der Text hat und welche
Farben der Hintergrund haben soll. Möchten Sie zum Beispiel ein helleres Blau
für die Countdown-Box, können Sie vorab prüfen, ob die Kontraste passen bzw. ob
Sie ggf. auch die Schrift ändern müssten.
Würden sie die Farbe vorher prüfen, würden Sie sofort erkennen, dass der Kontrast nicht passt:
Sie können zum Beispiel die Helligkeit schrittweise verringern und dabei beobachten, wann die WCAG-AA-Kontrastanzeigen grün werden. Eine Konformität auf AA-Niveau reicht in der Regel aus, die strengere AAA-Stufe kankann meist vernachlässigt werden:
Wichtig ist, dass Farben nur begrenzt flexibel sind. Ein von Ihnen geplantes Design könnte daher die erforderlichen Kontrastregeln nicht erfüllen und müsste angepasst werden, damit die Lesbarkeit und Barrierefreiheit gewährleistet sind.