Spricht man mit anderen über Barrierefreiheit im Internet, so fallen oft zwei Begriffe: Alternativtexte und Farbkontraste. Auch wenn das Thema damit bei weitem nicht abschließend geklärt ist, so spielen doch vor allem die Farben eine entscheidende Rolle – dienen Sie doch nicht wie sonst vieles der Barrierefreiheit vor allem Menschen mit Einschränkungen, sondern allen Nutzern einer Seite. Wie oft kniffen wir schon die Augen zusammen, wenn ein vermutlich unwichtiger Hinweistext in hellgrau auf weißem Hintergrund platziert wurde? Für Personen mit Sehstörungen vervielfacht sich dieses Problem, wenn der Kontrast nicht stimmt.
Die WCAG 2.0 definiert klare Vorgaben für den Kontrast zwischen Vorder- und Hintergrund welcher sich aus dem Verhältnis der relativen Luminanzwerte, also der Helligkeit der Farben, berechnet und im Format n:1 angegeben wird.
Es gelten folgende Grenzwerte:
- grafische Bedienelemente: 4.5:1 (AAA) bzw. 3:1 (AA)
- Große Schriften (ab 24px bzw 19px für fette Schrift: 4.5:1 (AAA) bzw. 3:1 (AA)
- Schrift allgemein: 7:1 (AAA) bzw. 4.5:1 (AA)
Online findet man unzählige Kontrast-Rechner welche mehr oder weniger deutlich kennzeichnen, wie hoch der Kontrast zweier Farben ist, und für welchen Einsatzbereich die Farben damit geeignet sind. Leider sind die Berechnungen dahinter oft nicht ersichtlich und so muss man dem Ergebnis blind vertrauen. Als Mathematikertochter wollte ich es genauer wissen und habe die Formeln hinter den Tools gesucht.
Berechnung der Luminanz
Also, wie berechnen sich diese Werte denn jetzt? Nun, jetzt wird es mathematisch. Ausgangsbasis für die Berechnung der Luminanzwerte ist der RGB-Code einer Farbe, also die Repräsentation als Kombination aus Rot, Grün und Blau. Jeder Farbe wird ein Wert von 0 bis 255 zugeordnet. Nehmen wir als Beispiel unser stolperfrei.digital-Türkis: rgb(72,128,121).
Zunächst wird jeder dieser Werte in eine Dezimalzahl zwischen 0 und 1 umgerechnet.
- RsRGB = R8bit/255
- GsRGB = G8bit/255
- BsRGB = B8bit/255
In unserem Beispiel:
- RsRGB = 72/255 = 0.28235294117
- GsRGB = 128/255 = 0.50196078431
- BsRGB = 121/255 = 0.47450980392
Anschließend werden diese Werte verwendet um den Anteil jeder Farbe an der Luminanz zu ermitteln.
- wenn RsRGB <= 0.04045
- dann R = RsRGB /12.92
- sonst R = ((RsRGB +0.055)/1.055)2.4
- wenn GsRGB <= 0.04045
- dann G = GsRGB/12.92
- sonst G = ((GsRGB+0.055)/1.055)2.4
- wenn BsRGB <= 0.04045
- dann B = BsRGB/12.92
- sonst B = ((BsRGB+0.055)/1.055)2.4
In unserem Beispiel:
- R = ((0.28235294117 + 0.055)/1.055)2.4 = 0.06480326668
- G = ( (0.50196078431+ 0.055)/1.055)2.4 = 0.21586050011
- B = ((0.47450980392 + 0.055)/1.055)2.4 = 0.19120168273
Diese Einzelwerte werden nun gewichtet addiert, da sich die wahrgenommene Helligkeit zwischen Rot, Grün und Blau unterscheidet.
Y = 0.2126 * R + 0.7152 * G + 0.0722 * B
In unserem Beispiel:
Y = 0.2126 * 0.06480326668 + 0.7152 * 0.21586050011 + 0.0722 * 0.19120168273 = 0.18196536566
Die relative Luminanz von unserem Türkis beträgt also 0.18196536566. Nun brauchen wir eine Vergleichsfarbe – der Einfachheit halber vergleichen wir mit einem weißen Hintergrund – einer Luminanz von 1.
Berechnung des Kontrastes
Der Kontrast berechnet sich mittels folgender einfacher Formel:
(Y1 + 0.05) / (Y2 + 0.05) wobei Y1 die Luminanz der helleren Farbe ist und Y2 die Luminanz der dunkleren Farbe.
Also ergibt sich in unserem Beispiel:
(1 + 0.05) / (0.18196536566 + 0.05) = 4.52653781746
Das Kontrastverhältnis zwischen Türkis und weiß beträgt also 4.52:1 und wäre damit ausreichend hoch für die Konformitätsstufe AA der WCAG. Strebt man eine Zertifizierung nach AAA an, so dürfen nur Grafiken und große Schriften mit dieser Farbe gestaltet werden.
Hinweis: In der WCAG 2.0 sind 2 kleine Fehler in der Berechnung enthalten, welche ich in diesem Artikel korrigiert habe. Zum einen wird statt dem Schwellwert von 0.04045 ein Wert von 0.03928 angenommen, zum Anderen wird als Zeichen für die relative Luminanz nicht Y, sondern L verwendet, welches üblicherweise für die absolute Luminanz verwendet wird. Ersteres hat für den RGB-Farbraum kaum Auswirkungen, letzteres ist eine reine Formalie der wissenschaftlichen Korrektheit.
Gut zu wissen
Beim Kontrast spielt es übrigens keine Rolle, welche der Farben ich als Vorder- und welche als Hintergrundfarbe einsetze – für bestimmte Nutzer kann genau das aber einen großen Unterschied ausmachen. Vielen fällt es leichter helle Schrift auf dunklem Untergrund zu lesen. Deshalb bietet stolperfrei.digital ein besonderes Feature: Die Seite passt sich von selbst den Einstellungen des Betriebssystems an und wechselt selbständig in den Darkmode. Probieren Sie es doch einmal aus und schauen Sie, wie stolperfrei.digital in Dunkel wirkt. Fällt Ihnen das Lesen leichter oder schwerer?
In einem anderen Blogbeitrag befasse ich mich übrigens genauer mit den Grenzwerten und wieso es keine barrierefreien Farben gibt : Barrierefreie Farben gibt es nicht.
Falls Sie nun auch Interesse daran haben, die Kontraste Ihrer Website prüfen zu lassen oder eine Hochkontrastversion zusätzlich anbieten wollen, dann kontaktieren Sie mich gern.
Quellen:
https://www.w3.org/WAI/GL/wiki/Relative_luminance
https://www.w3.org/WAI/GL/wiki/Contrast_ratio