Lektion Fortschritt
0% Beendet
Farben machen eine Website lebendig – aber nicht jeder Mensch sieht sie gleich.
Für viele Nutzer:innen mit Sehbeeinträchtigung ist Kontrast wichtiger als Farbe.
In dieser Lektion erfährst du, wie du mit guten Farbkontrasten und bewusster Farbwahl dafür sorgst, dass deine Inhalte für alle sichtbar und verständlich sind – ganz ohne Design zu opfern.
Du lernst:
- Welche Farbkontraste gut funktionieren
- Was du bei Texten, Buttons und Hintergründen beachten musst
- Warum du Farben nie allein zur Informationsvermittlung nutzen solltest
- Wie du deine Farben kostenlos testen kannst
Barrierefreie Farbgestaltung macht deine Seite nicht nur zugänglich – sondern auch professioneller, klarer und benutzerfreundlicher für alle.
Sorge für ausreichenden Kontrast
- Text sollte sich klar vom Hintergrund abheben
- Nutze Tools wie:
Vermeide Farb-Kombinationen mit schlechter Lesbarkeit
Schlechte Beispiele:
- Hellgrauer Text auf weißem Hintergrund
- Roter Text auf grünem Hintergrund (Problem für Farbenblinde!)
Gute Beispiele:
- Dunkelblauer Text auf hellgrauem Hintergrund
- Weißer Text auf dunkelblauem Button
Verwende Farben nicht als einziges Erkennungsmerkmal
Beispiel:Ein fehlerhaft ausgefülltes Feld sollte nicht einfach nur rot erscheinen. Es sollte auch einen erklärenden Text geben.
Achte auf Barrierefreiheit bei Buttons & Links
- Buttons sollten farblich auffallen
- Der Text darauf braucht Kontrast zum Button-Hintergrund
- Links im Fließtext benötigen eine visuelle Hervorhebung (z. B. unterstrichen)
Teste deine Farben mit Simulations-Tools
- Es gibt Tools, die dir zeigen, wie deine Seite für Menschen mit Farbsehschwäche aussieht
Beispiel: Coblis – Color Blindness Simulator
📌 Fazit:
Gute Kontraste + klare Farbsprache = bessere Lesbarkeit und mehr Inklusion.
Spreadmind
Antworten