WCAG-2-konforme SCSS-Farbkontrastfunktion mit scssphp

Veröffentlicht: 8. Mai 2023 – Kommentar hinterlassen

Letzte Woche veröffentlichte ich einen SCSS-Code, um ungenaue Farbkontrastberechnungen zu korrigieren. Dort ist es eine Implementierung nach Dart Sass und basiert auf einer älteren Implementierung. Für ein anderes Projekt benötigte ich aber noch eine andere Implementierung, die auf Basis von scssphp funktioniert, das wiederum eine eigene Implementierung besitzt.

Und wie auf der Website von scssphp steht:

Note that scssphp is not fully compliant with the Sass specification yet. Sass modules are not implemented yet either.

scssphp-Website

Zu Deutsch:

Bedenke, dass scssphp noch nicht vollständig konform zur Sass-Spezifikation ist. Sass-Module sind ebenfalls noch nicht implementiert.

Übersetzung der scssphp-Website

So fehlen also ein paar Funktionen in dieser Implementierung. Und eine davon ist das Sass-Modul sass:math, das ich in meinem vorherigen Beitrag verwendete. Glücklicherweise benötigen wir als einziges davon die pow-Funktion.

Ich habe mir einige Polyfills dazu angesehen, die die pow-Funktion über reinen SCSS-Code implementieren, aber diese waren entweder zu einfach implementiert (sodass man beispielsweise nur ganze Zahlen als Exponent verwenden konnte) oder sie haben bei mir schlicht nicht funktioniert (was zu einer Zeitüberschreibung bei der Verwendung führte).

Glücklicherweise kommt scssphp mit einer praktischen Funktion, um eigene Funktionen in PHP zu implementieren, die dann in SCSS verwendet werden können. Wie du vielleicht schon weißt, gibt es in PHP natürlich eine Implementierung von pow, die auch noch performanter sein sollte. Du könntest auch die gesamte Farbkontrastfunktion direkt in PHP implementieren, aber das ist etwas für einen anderen Beitrag.

Um deine eigene pow-Funktion zu registrieren, sieht der Code so aus:

$compiler = new ScssPhp\ScssPhp\Compiler();
$compiler->registerFunction(
	'pow',
	function( $args ) use ( $compiler ) {
		$number = $compiler->assertNumber( $args[0], 'number' );
		$exponent = $compiler->assertNumber( $args[1], 'exponent' );
		$number->assertNoUnits( 'number' );
		$exponent->assertNoUnits( 'exponent' );
		
		return pow( $number->getDimension(), $exponent->getDimension() );
	},
	[ 'number', 'exponent' ]
);
Code-Sprache: PHP (php)

Jetzt können wir ihn in SCSS als pow() verwenden:

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

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

// sRGB BT-709 BRIGHTNESS
@function brightness($c) {
	$rlin: de-gamma(red($c) / 255);
	$glin: de-gamma(green($c) / 255);
	$blin: de-gamma(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)

Die Implementierung ist ziemlich ähnlich zu jener in meinem vorherigen Beitrag, aber ohne das Modul sass:math.