Nachdem wir uns im letzten Teil mit der Typografie beschäftigt haben, bringen wir heute Farbe ins Spiel. Doch Vorsicht: Farbe im Webdesign ist weit mehr als nur eine Frage des persönlichen Geschmacks. Für ein inklusives Internet müssen wir sicherstellen, dass Farben so gewählt werden, dass jeder die Inhalte mühelos erkennen kann.
Was ist Farbfehlsichtigkeit?
Um zu verstehen, warum Barrierefreiheit bei Farben so wichtig ist, müssen wir uns mit der Farbfehlsichtigkeit beschäftigen. Viele Menschen nehmen Farben anders wahr, als man es vielleicht erwartet.
Die bekannteste Form ist die Rot-Grün-Schwäche, die allein in Deutschland etwa 8 % aller Männer betrifft. Für diese Menschen sind Rot- und Grüntöne schwer voneinander zu unterscheiden. Es gibt aber auch Menschen, die gar keine Farben sehen können (Achromatopsie) oder eine Blau-Gelb-Schwäche haben.
Die goldene Regel lautet daher: Verlasse dich niemals allein auf die Farbe, um eine Information zu vermitteln. Ein Fehler sollte nicht nur durch roten Text markiert werden, sondern zusätzlich durch ein Icon oder einen erklärenden Text.
Farben und Hintergründe in CSS festlegen
In CSS nutzen wir hauptsächlich zwei Eigenschaften, um die Farbstimmung zu definieren:
color: Legt die Textfarbe fest.background-color: Legt die Hintergrundfarbe fest.
Hier ein Beispiel, wie wir einen barrierefreien dunklen Text auf einem hellgelben Hintergrund erstellen:
/* Ein dunkles Anthrazit für den Text auf hellem Hintergrund */
body {
color: #333333;
background-color: #FFF9E5;
}
Barrierefreie Kontraste: Der WCAG-Standard
Damit Texte für Menschen mit Sehbehinderung oder Senioren lesbar sind, muss der Kontrast zwischen Textfarbe und Hintergrundfarbe groß genug sein. Die internationalen Richtlinien (WCAG) geben hier klare Werte vor:
- Standard-Text: Ein Kontrastverhältnis von mindestens 4,5:1.
- Großer Text: Ein Kontrastverhältnis von mindestens 3:1.
Das Profi-Tool: Colour Contrast Analyser (CCA)
Man muss diese Verhältnisse nicht im Kopf ausrechnen. Ein fantastisches und kostenloses Werkzeug dafür ist der Colour Contrast Analyser (CCA) von TPGi (Vispero).
Mit diesem Programm können Sie ganz einfach mit einer Pipette die Farben auf Ihrem Bildschirm auswählen und sofort sehen, ob Ihr Design die Barrierefreiheits-Standards erfüllt.
Sie kannst das Tool hier herunterladen: Colour Contrast Analyser (CCA) Webseite
Video: Den Farbkontrast richtig überprüfen
In meinem YouTube-Video zeige ich dir Schritt für Schritt, wie Sie den Colour Contrast Analyser einsetzt, um Webseiten und Software auf Barrierefreiheit zu prüfen:
Zusammenfassung für barrierefreie Farben
- Vermeide Farbkombinationen, die für Menschen mit Farbfehlsichtigkeit problematisch sind (z. B. Rot auf Grün).
- Nutze Tools wie den CCA, um das Kontrastverhältnis zu messen.
- Verlasse dich nicht nur auf Farben, sondern nutze zusätzlich Symbole oder Texte.
Ein hoher Kontrast hilft übrigens allen! Wer hat nicht schon einmal versucht, bei hellem Sonnenlicht etwas auf seinem Smartphone-Display zu lesen? In diesem Moment profitiert jeder von barrierefreiem Design.
Haben Sie Fragen zur Farbwahl oder zur Bedienung des Colour Contrast Analysers? Kontaktieren Sie mich gerne!
Kontakt:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463
Ihr Markus Lemcke
Weiterlesen
CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei
Ein Kommentar zu „CSS lernen leicht gemacht: Farben, Hintergründe und Kontraste“