Warum Kontrastverhältnisse existieren
Wie Auge und Mathematik hinter 4,5 zu 1 zusammenhängen.
Warum Kontrastverhältnisse existieren ist eine kostenlose Web Accessibility Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Web Accessibility Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was Kontrast wirklich bedeutet
Beim Lesen von Text vergleicht das Auge, wie hell oder dunkel die Buchstaben im Verhältnis zum Hintergrund sind. Dieser Unterschied ist der Kontrast. 👀
Warum wir eine Zahl brauchen
Ein Designer findet eine Farbe gut lesbar, ein anderer kneift die Augen zusammen. Um das zu klären, verwendet Barrierefreiheit ein Kontrastverhältnis – eine einzelne messbare Zahl, die jeder prüfen kann.
Die Skala des Verhältnisses
Das Verhältnis reicht von 1:1 bis 21:1. Schwarz auf Weiß erreicht mit 21:1 das Maximum, während dieselbe Farbe auf sich selbst 1:1 ergibt und vollständig unsichtbar ist.
Luminanz, nicht nur Farbe
Die Berechnung basiert auf der Luminanz, also der wahrgenommenen Helligkeit einer Farbe. Zwei sehr unterschiedliche Farbtöne können sich dennoch schlecht unterscheiden, wenn ihre Helligkeit zu ähnlich ist.
Augen sind nicht gleich
Kontrastregeln gibt es, weil sich das Sehvermögen unterscheidet. Menschen mit eingeschränktem Sehvermögen, ältere Menschen und müde Leser brauchen einen größeren Unterschied als ein junger Designer vor einem hellen Bildschirm.
Die Realität stellt Sie vor Herausforderungen
Sonnenblendung, günstige Monitore und gedimmte Smartphones verringern den Kontrast. Ein Verhältnis, das unter diesen Bedingungen bestehen bleibt, hält Text überall lesbar.
Woher 4,5 zu 1 kommt
WCAG hat 4.5:1 für normalen Text als forschungsbasierten Mindestwert festgelegt. Damit wird eingeschränktes Sehvermögen mittleren Grades ungefähr berücksichtigt, ohne reines Schwarz und Weiß zu erzwingen.
Größerer Text, geringere Anforderungen
Großer Text ist leichter zu lesen, daher sinkt der Grenzwert auf 3:1. Dicke, große Buchstaben vertragen einen geringeren Helligkeitsunterschied als kleiner Fließtext.
Vordergrund und Hintergrund als Paar
Ein Verhältnis bezieht sich immer auf zwei Farben zusammen. Grau ist allein weder lesbar noch unlesbar, sondern nur im Verhältnis zur Oberfläche, auf der es erscheint.
Nicht nur Text
Dasselbe Prinzip gilt für UI-Komponenten. Auch Schaltflächenränder, Symbole und Umrisse von Formularfeldern brauchen genügend Kontrast, damit Benutzer sie finden können.
Ein Verhältnis in echtem CSS
Diese beiden Farben ergeben ungefähr ein 4.6:1-Verhältnis und überschreiten damit knapp den Grenzwert für normalen Text, sodass sie angenehm lesbar sind.
p {
color: #595959;
background: #ffffff;
}Schnelltest
Testen wir, warum dieses Verhältnis überhaupt existiert.
Zusammenfassung: Warum es Verhältnisse gibt
Sie haben gelernt, dass ein Kontrastverhältnis Lesbarkeit in eine eindeutige Zahl fasst. Diese basiert auf der Luminanz, damit Text für jedes Sehvermögen funktioniert. Als Nächstes geht es um die AA-Grenzwerte. ✅
Häufig gestellte Fragen
Ist die Lektion „Warum Kontrastverhältnisse existieren“ kostenlos?
Ja — der vollständige Text von „Warum Kontrastverhältnisse existieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Web Accessibility Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Web Accessibility Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Warum Kontrastverhältnisse existieren“?
Wie Auge und Mathematik hinter 4,5 zu 1 zusammenhängen. Du übst Web Accessibility Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Web Accessibility Academy zu starten?
Keine Vorkenntnisse erforderlich. Web Accessibility Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Warum Kontrastverhältnisse existieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Web Accessibility Academy-Lektion Code schreiben und ausführen?
Ja. Jede Web Accessibility Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Warum Kontrastverhältnisse existieren
- AA erreichen: Grenzwerte für Text und großen Text
- Verlassen Sie sich nie allein auf Farbe
- Kontrast mit kostenlosen Tools prüfen