3:1, 7:1 – Wie berechnet sich eigentlich der Kontrast zwischen Farben?

15.12.2023
Absurde Illustration: Pinsel mit menschlichem Körper, es tropft Farbe in Herzform. Bedeutung: Steht für gut ausgewählte Farben und Farbkontraste.

Viele kennen die barrierearmen Grenzwerte für den Farbkontrast im Web. Aber wissen Sie, wie der Kontrast sich berechnet? Hier der mathematische Hintergrund.

Inhaltsverzeichnis

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
    • 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
    • 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

    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 gleich 2 Features: Mittels einer Toolbar in der oberen rechten Ecke können Nutzer zwischen verschiedenen Farbmodi wählen. Außerdem passt sich die Seite 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?

    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

    Mehr entdecken