Korrigiere deine SCSS-Farbkontrastfunktion

Veröffentlicht: 24. April 2023 – Kommentar hinterlassen Letzte Aktualisierung: 5. Mai 2023

Wenn es um Barrierefreiheit geht, findet man häufig Kontrastfehler. Mit einer SCSS-Kontrastfunktion scheinen diese einfach automatisch korrigiert werden zu können. Doch leider funktioniert der Großteil der Farbkontrastfunktionen da draußen nicht so, wie sie sollen. Zumindest nicht gemäß der Spezifikationen nach WCAG 2.

Oftmals, wenn man SCSS und eine Funktion oder ein Mixin verwendet, um automatisch eine Kontrastfarbe zu berechnen (z. B. wird je nach gegebener Hintergrundfarbe entweder eine weiße oder schwarze Textfarbe gewählt), sieht es so aus:

$threshold: 55%;

@function contrast-color($color, $dark, $light) {
  @return if(lightness($color) < $threshold, $light, $dark)
}
Code-Sprache: SCSS (scss)

Das ist das erste Ergebnis, das ich über Google finden konnte. Du übergibst der Funktion eine Farbe und eine dunkle und eine helle (Text-)Farbe und je nach Helligkeit der ersten Farbe, wird entweder die helle oder dunkle Farbe zurückgegeben.

Das funktioniert für einen Großteil der Farben, aber nicht für alle. Ich bin darüber hier auf Epiphyt gestoßen, da ich hier Buttons mit der Hintergrundfarbe #1b978b verwende. Die Helligkeit dieser Farbe liegt bei 35 %, sodass sie unterhalb des Grenzwerts in der Funktion oben liegt und damit die helle Textfarbe zurückgegeben wird. Doch gemäß der Spezifikationen nach WCAG 2, ist ein weißer Text auf solch einem Hintergrund nur für großen Text erlaubt, da sein Kontrastverhältnis nur bei 3,55 liegt (für normalen Inhalt sollte es bei mindestens 4,5 liegen).

Das Problem hier ist dass die Helligkeit nicht der einzige Wert ist, der bei der Kontrastberechnung beachtet werden darf. Tatsächlich ist die Spezifikation hier wesentlich komplizierter, was du unter folgendem Link sehen kannst:
https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

Glücklicherweise hat Tony Pinel bereits eine Lösung für diese Berechnung in SCSS implementiert:
https://medium.com/@tonipinel/how-to-get-an-accurate-contrast-color-with-sass-b0ebc01bf17f#.jrfrion7k

Da sein Beitrag jedoch zum Zeitpunkt, an dem ich diesen Beitrag schreibe, acht Jahre alt ist, beachtet es nicht die aktuelle Implementierung von Dart Sass, das die sass:math-Funktionen verwendet. Da es jedoch der empfohlene Weg ist, SCSS zu CSS zu kompilieren und es auch so von @wordpress/scripts für Blöcke verwendet wird, habe ich seinen Code verändert, um dieser empfohlenen Implementierung zu entsprechen. Das sieht dann folgendermaßen aus:

@use "sass:math";

@function de-gamma($n) {
	@if $n <= 0.03928 {
		@return math.div($n, 12.92);
	}
	@else {
		@return math.pow((math.div(($n + 0.055), 1.055)), 2.4);
	}
}

@function re-gamma($n) { 
	@if $n <= 0.0031308 { 
	   @return $n * 12.92; 
	} @else { 
	   @return 1.055 * math.pow($n, math.div(1, 2.4)) - 0.055;
	}
 }

// sRGB BT-709 BRIGHTNESS
@function brightness($c) {
	$rlin: de-gamma(math.div(red($c), 255));
	$glin: de-gamma(math.div(green($c), 255));
	$blin: de-gamma(math.div(blue($c), 255));
	@return re-gamma(0.2126 * $rlin + 0.7152 * $glin + 0.0722 * $blin) * 100;
}

// Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
@function contrast-color($color, $dark: #000, $light: #fff) {
	@if $color == null {
		@return null;
	}

	@else {
		$color-brightness: brightness($color);
		$light-text-brightness: brightness($light);
		$dark-text-brightness: brightness($dark);

		@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
	}
}
Code-Sprache: SCSS (scss)

Du kannst die Funktion contrast-color() genauso verwenden wie das erste Beispiel, aber jetzt mit einer akkuraten Kontrastberechnung.