Das Kontrastverhältnis beschreibt den Helligkeitsunterschied zwischen zwei aneinander grenzenden Farben, beispielsweise zwischen Text und Hintergrund. Berechnet wird es aus der relativen Leuchtdichte beider Farben:
(L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die hellere und L2 die dunklere Farbe ist.
Der Zuschlag von 0,05 sorgt dafür, dass der Wert bei Schwarz nicht ins Unendliche läuft. So ergibt sich eine Skala von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß).
Weil die Berechnung allein auf der Helligkeit beruht, ist sie farbunabhängig. Daraus folgen zwei Dinge, die beim Gestalten oft überraschen: Beim reinen Textkontrast entsteht durch Farbenfehlsichtigkeit kein zusätzliches Problem. Wer 4,5:1 erfüllt, hat den Fall abgedeckt. Umgekehrt können zwei kräftig unterschiedliche Farben durchfallen, wenn ihre Helligkeit ähnlich ist. Rot auf Grün ist das klassische Beispiel.
Die Mindestwerte nach WCAG 2:
Normaler Text: mindestens 4,5:1 (Stufe AA), auf Stufe AAA mindestens 7:1
Großer Text ab 18 pt oder 14 pt fett: mindestens 3:1 (Stufe AA), auf Stufe AAA mindestens 4,5:1
Bedienelemente und grafische Objekte: mindestens 3:1 gegenüber angrenzenden Farben (Stufe AA)
.high-contrast {
color: #000000;
background-color: #ffffff; /* Kontrastverhältnis 21:1 */
}
Ausgenommen von den Textanforderungen sind:
Logos und Markennamen
Inaktive, also deaktivierte Bedienelemente
Rein dekorative Elemente
Unsichtbarer Text
Text, der Teil eines Bildes mit wesentlichem Bildinhalt ist — etwa auf einem Foto
Ausreichende Kontraste sind besonders wichtig für:
Menschen mit Sehbeeinträchtigung oder Farbenfehlsichtigkeit
altersbedingte Veränderungen des Sehvermögens
die Nutzung bei ungünstigem Licht, etwa mobil im Freien
Bildschirme mit geringer Qualität oder ohne Kalibrierung
Bei halbtransparenten Überlagerungen und Text auf Bildern oder Farbverläufen gibt es keinen einheitlichen Hintergrundwert. Geprüft wird deshalb gegen die ungünstigste Stelle. Genau daran scheitern großformatige Kopfbereiche regelmäßig: Der Text ist über dem dunklen Bildteil gut lesbar und über dem hellen nicht mehr.
Das Kontrastverhältnis wird mit den WCAG 3.0 möglicherweise durch den Accessible Perceptual Contrast Algorithm abgelöst.
