Lektion 5 von 7 · Video
Farbe und Kontrast
Der Fortschritt wird nur auf diesem Gerät gespeichert. Mit einem kostenlosen LFW-Konto geräteübergreifend speichern.
Lehrplan0 von 7 erledigt
Machen Sie Text vor seinem Hintergrund lesbar, transportieren Sie Bedeutung nie allein über Farbe und prüfen Sie den Kontrast mit einem kostenlosen Werkzeug in einer Minute.
Notizen
Schritt 1 von 5
Einstieg
Bei der Farbe treffen sich Gestaltung und Barrierefreiheit. Zwei Regeln decken das meiste ab, was eine Redaktion beeinflusst: Text muss sich von seinem Hintergrund abheben, und Farbe darf nicht der einzige Weg sein, etwas auszudrücken.
Schritt 2 von 5
Kontrast: Text, den Menschen lesen können
Kontrast ist der Helligkeitsunterschied zwischen Text und Hintergrund. Grauer Text auf einer weißen Seite, weißer Text auf einem blassen Foto und Gelb auf Weiß sind häufige Fehler. Sie benachteiligen Menschen mit Sehbehinderung, ältere Lesende und alle, die ein Telefon im Sonnenlicht lesen.
In der WebAIM Million 2026 war Text mit zu geringem Kontrast der häufigste Fehler: Er fand sich auf 83,9 Prozent der eine Million wichtigsten Startseiten.
WCAG 2.1 AA legt die Mindestwerte als Verhältnisse fest:
- Normaler Text: mindestens 4,5 zu 1.
- Großer Text, etwa 18 Punkt oder 14 Punkt fett: mindestens 3 zu 1.
- Symbole und die Ränder von Formularfeldern, die Menschen sehen müssen: mindestens 3 zu 1 gegenüber ihrer Umgebung.
Schwarz auf Weiß hat 21 zu 1. Mittelgrauer Text auf Weiß liegt oft unter 4,5 zu 1.
Schritt 3 von 5
So prüfen Sie es in einer Minute
Sie müssen nichts berechnen. Kostenlose Kontrastprüfer, etwa der von WebAIM, nehmen zwei Farben entgegen und sagen Ihnen, ob sie bestehen. Auch die Entwicklerwerkzeuge vieler Browser zeigen den Kontrast an.
Als Redaktion wählen Sie Farben meist nur an wenigen Stellen: über die Textfarben-Schaltflächen im Editor, bei Banner- und Schaltflächenfarben in einem Page Builder und bei Bildern mit Text darauf. Prüfen Sie diese.
Wenn die Standardfarben Ihrer Website die Prüfung nicht bestehen, ist das eine Korrektur für die Person, die die Gestaltung der Website verwaltet, nicht etwas, das Sie Seite für Seite umgehen sollten.
Schritt 4 von 5
Text auf Fotos
Text auf einem Foto ist ein häufiges Problem. Der Kontrast ändert sich über das Bild hinweg: lesbar über den dunklen Bäumen, unsichtbar über dem hellen Himmel. Er ändert sich auch, wenn die Website das Foto auf einem Telefon anders zuschneidet.
Setzen Sie den Text auf einen einfarbigen Hintergrund, unter das Foto oder stattdessen in den Seitentext.
Schritt 5 von 5
Nie allein über Farbe
WCAG 2.1 besagt, dass Farbe nicht das einzige Mittel sein darf, um Informationen zu vermitteln. Das National Eye Institute gibt an, dass etwa 1 von 12 Männern eine Farbsehschwäche hat, und Screenreader sagen Farben überhaupt nicht an.
Häufige Fehler und ihre Lösungen:
- Pflichtfelder nur rot markiert. Ergänzen Sie „(Pflichtfeld)“ in der Beschriftung.
- „Schließtage sind rot“ in einem Kalender. Ergänzen Sie das Wort „Geschlossen“.
- Ein Diagramm, dessen Linien sich nur durch die Farbe unterscheiden. Beschriften Sie die Linien direkt, oder verwenden Sie unterschiedliche Linienarten.
- Links, die sich nur durch die Farbe vom Text unterscheiden. Behalten Sie die Unterstreichung bei.
Ein schneller Test: Drucken Sie die Seite schwarz-weiß aus, oder stellen Sie sie sich so vor. Wenn dann etwas keinen Sinn mehr ergibt, hat allein die Farbe Bedeutung getragen.
Quellen
- W3C, Understanding Success Criterion 1.4.3: Contrast (Minimum)
- W3C, Understanding Success Criterion 1.4.1: Use of Color
- W3C, Understanding Success Criterion 1.4.11: Non-text Contrast
- National Eye Institute, Color Blindness
- WebAIM, Contrast Checker und The WebAIM Million, Bericht 2026
Transkript
Synthetische Sprecherstimme; später ersetzt sie eine aufgenommene Stimme.
- 0:00Two rules cover most of what an editor controls: text must stand out from its background, and color cannot be the only way you say something.
- 0:09Contrast is the difference in lightness between text and its background.
- 0:13In the 2026 WebAIM Million, low contrast text was the most common failure: it appeared on 83.9 percent of the top one million home pages.
- 0:23WCAG 2.1 AA sets the minimums as ratios.
- 0:27Normal text: at least 4.5 to 1.
- 0:31Large text: at least 3 to 1.
- 0:33Icons and the edges of form fields: at least 3 to 1.
- 0:38You do not need to calculate anything.
- 0:41Free checkers, such as WebAIM's, take two colors and tell you whether they pass.
- 0:46Here is a light gray, 9 9 9 9 9 9, on white.
- 0:51About 2.8 to 1.
- 0:52It fails for normal text.
- 0:54Mid-gray text on white often lands below 4.5 to 1.
- 0:59A darker gray, 5 9 5 9 5 9, on the same white passes, at about 7 to 1.
- 1:07As an editor, check the places you choose colors: text color in the editor, banner and button colors, and images with text on them.
- 1:15If your site's standard colors fail, that is a fix for whoever manages the design.
- 1:20Text on photos changes contrast across the picture, and again when a phone crops it.
- 1:26Put the text on a solid background, below the photo, or in the page text instead.
- 1:32Never color alone.
- 1:33About 1 in 12 men have a color vision deficiency, and screen readers do not announce color.
- 1:39Add the word Required, or Closed.
- 1:41Label chart lines directly.
- 1:43Keep the underline on links.
- 1:46Your task.
- 1:47Find one place where you chose a color.
- 1:50Check it with a free contrast checker, and write down the ratio.
- 1:53Then find one place where color alone carries meaning, and add a word or symbol.
Aufgabe
Ihre Aufgabe in Ihrer Einrichtung
Quiz
4 Fragen. Wählen Sie bei jeder eine Antwort und prüfen Sie dann. Zu jeder Antwort wird die Begründung angezeigt.
Antworten zeigen
- B. 4,5 zu 1. Normaler Text braucht mindestens 4,5:1. Großer Text, etwa 18 Punkt oder 14 Punkt fett, braucht mindestens 3:1.
- B. Die Bedeutung wird allein über Farbe vermittelt. Wer Rot nicht unterscheiden kann, übersieht es. Ergänzen Sie ein Wort oder Symbol, etwa „(Pflichtfeld)“.
- B. Der Kontrast ändert sich über das Foto hinweg, und Teile können unlesbar sein. Text auf Fotos besteht die Kontrastanforderung oft stellenweise nicht. Setzen Sie den Text stattdessen auf einen einfarbigen Hintergrund.
- B. Text mit zu geringem Kontrast. Text mit zu geringem Kontrast fand sich auf 83,9 Prozent der eine Million wichtigsten Startseiten.
Sie haben auf diesem Gerät alle Lektionen von „Grundlagen barrierefreier Inhalte“ erledigt. Ein kostenloses LFW-Konto speichert das und gibt Ihnen einen datierten Abschlussnachweis.