Wie wird meine Webseite barrierefrei? Kontraste und Farben einstellen.

In diesem Artikel erfährst du, wie du die Kontraste eurer Vereins-Webseite prüfen kannst und wie du die verwendeten Farben bezüglich Barrierefreiheit in ClubDesk anpasst, um die Inhalte auch für Menschen mit Behinderung nutzbar zu machen. 

Hintergrund und Motivation

Für Menschen mit Sehbehinderung (z.B. Farbfehlsichtigkeit) ist es wichtig, dass alle Vordergrund-Elemente einen genügend starken Kontrast zum Hintergrund aufweisen (Texte, Knöpfe, Balken, Trennlinien usw.). Dies sorgt dafür, dass Inhalte problemlos erfasst und genutzt werden können. Seit 2025 gibt es dazu klare Vorgaben in der EU (BFSG, BaFG), in der Schweiz voraussichtlich ab 01.01.2027 (Teilrevision BehiG). Detaillierte Informationen zu den gesetzlichen Vorgaben findet ihr im ClubDesk Ratgeber Vereinswissen: Digitale Barrierefreiheit für Vereine

Damit Webseiten-Besucher mit Sehbehinderung eure Inhalte nutzen können, ist es wichtig, dass die verwendeten Farben einen genügend hohen Kontrast aufweisen (z.B. sehr dunkler Text auf genügend hellem Hintergrund). In ClubDesk kannst du die Farben in der Regel ganz einfach in einem einzigen Fenster anpassen.

Seit der Version 4.5 von ClubDesk ist eure Webseite, ohne dass ihr etwas ändern müsst, automatisch über die Tastatur navigierbar, unterstützt Screenreader die eure Seiteninhalte vorlesen, verwendet barrierefreie CAPTCHAs u.v.m. - Alles dazu findet ihr in unseren News-Artikel: Release 4.5: Webseite und Vereinstermine auch für Menschen mit Behinderung

Wie gehe ich vor?

1. Prüfe die Barrierefreiheit eurer bestehenden Farben mit einem Online-Tool, z.B. mit dem «Kontrastrechner für Farben» der Seite barrierefreies.design. Du kannst dort ganz einfach den Kontrast eurer bestehenden Vordergrund- und Hintergrundfarben prüfen. Mit der Farbpipette (1) kannst du deine bestehenden Farben ins Tool übernehmen oder alternativ den Farbcode direkt in das entsprechende Feld (2) eingeben. Das Ergebnis wird dir direkt darunter angezeigt (3).

Falls eure Farben den Test nicht bestehen, kannst du Die Helligkeit der Farbe direkt in diesem Online-Tool verschieben (1) bis das Kontrastverhältnis konform ist (2). Die neuen HEX-Farbcodes (3) lassen sich dann ganz einfach kopieren und in ClubDesk übernehmen.

2. Passe die Farben in ClubDesk an. Selektiere dazu im Modul «Webseiten» deine Hauptseite, klicke auf «Einstellungen» und dann auf «Design anpassen».

Wenn du größere Änderungen testen möchtest, kannst du deine bestehende Webseite duplizieren und dort das neue Design ausprobieren. So behältst du deine aktuelle Seite unverändert, bis du mit dem Ergebnis zufrieden bist.

3. Klicke oben auf «Farben ändern», um die Farbanpassung zu öffnen.

4. Im Fenster «Farben ändern» siehst du nun eine Übersicht mit den aktuell im Design verwendeten Farben und den neuen Farben.

Klicke in der Spalte «Neu» auf das Symbol «…», um eine Farbe auszuwählen oder zu ersetzen. Auf diese Weise kannst du die vorhandenen Designfarben Schritt für Schritt durch deine eigenen ersetzen.

5. Im Fenster «Farbe wählen» kannst du die gewünschte Farbe einstellen. Dazu hast du verschiedene Möglichkeiten

1. Links oben Farbwert direkt als RGBA oder HEX eingeben. 
2. Rechts mit der Maus Farbton und Helligkeit auswählen.
3. Mitte links per Klick aus den zuletzt verwendeten Designfarben wählen.
4. Unten links wird dir die aktuelle Auswahl in Textform angezeigt.
5. Der unterste Balken zeigt eine Vorschau der gewählten Farbe.

Wenn du mehrere Bereiche (z. B. Titel und Text) auf die gleiche Farbe setzt, fasst ClubDesk diese automatisch zusammen. Änderst du dann später nochmals die Farbe, wirkt sich das auf beide Bereiche aus. Möchtest du anschließend wieder unterschiedliche Farben für Titel und Text, kannst du dies dann in den individuellen Einstellungen wieder trennen, indem du dort die Farbe manuell hinterlegst (siehe Schritte 7-9).

6. Speichere deine Änderungen und kontrolliere die Darstellung auf verschiedenen Geräten.

Verwende regelmäßig eines der Tools, um deine Ergebnisse zu kontrollieren. Ein weiteres, simples Tool ist der «Farbkontrast-Check» des Anbieters Siteimprove.

7. Zusätzlich kannst du nun auch individuelle Schriften, Schriftfarben und die Farben weiterer Elemente (z.B. Überschriften, Fliesstext etc) individuell anpassen. Selektiere dazu im Modul «Webseiten» deine Hauptseite, klicke auf «Einstellungen» und dann auf «Design anpassen». Wähle schliesslich «Inhalt» auf der linken Seite, um die verschiedenen Inhaltselemente zu sehen.

8. Wähle, welches Element du verändern willst. Klicke z.B. auf «Überschrift 1» (1), um dieses Element auf allen Seiten zu verändern. In der Vorschau werden die entsprechenden Elemente mit einem gepunkteten Rahmen hervorgehoben (2).

9. Klicke dann auf das «...»-Symbol (1), um das Dialogfeld «Farbe wählen» zu öffnen. Hier kannst du neben den Farben auch die Transparenz wählen (2).   

Nachdem du die Kontraste überprüft und die Farben in ClubDesk angepasst hast, ist deine Vereins-Webseite nun auch für Menschen mit Behinderung besser zugänglich. Wenn du willst, kannst du einen Schritt weitergehen und in ClubDesk für sämtliche Bilder und Videos neu auch alternative Texte hinterlegen. Wie genau das geht, haben wir in einem anderen Artikel erläutert: Wie hinterlege ich in ClubDesk einen Alt-Text in einer Bilddatei?

Um die Barrierefreiheit eurer Webseite ganzheitlich zu prüfen, empfehlen wir einen Test mit dem WAVE Web Accessibility Evaluation Tool. So erhältst du zusätzlich Hinweise zu weiteren Aspekten der Barrierefreiheit, die über Farben, Kontraste und Alt-Texte hinausgehen.

Weitere Informationen

• Wie hinterlege ich in ClubDesk einen Alt-Text in einer Bilddatei?
  
• Ein Statistik-Tool für die Webseite einbauen
• Wie füge ich meiner Webseite eine Kopf- und Fußzeile hinzu?

ClubDesk Hilfe

• Design anpassen
• Design wechseln