Farbleuchtdichte-Funktion

Bei einer tiefgehenden Beschäftigung mit Farbtheorie gibt es etwas namens relative Farbleuchtdichte. Vereinfacht ausgedrückt definiert die Leuchtdichte einer Farbe ihre Helligkeit. Eine Leuchtdichte von 1 bedeutet, die Farbe ist weiß. Umgekehrt bedeutet ein Leuchtdichtewert von 0, dass die Farbe schwarz ist.

Das Wissen um die Leuchtdichte einer Farbe kann nützlich sein, wenn man mit dynamischen oder zufälligen Farben arbeitet, um eine genaue Hintergrundfarbe bereitzustellen, falls die Farbe zu hell oder zu dunkel ist. Als Faustregel kann man davon ausgehen, dass eine Farbe mit einer Leuchtdichte über 0,7 auf einem weißen Hintergrund schwer zu lesen sein wird.

Code

/// Returns the luminance of `$color` as a float (between 0 and 1)
/// 1 is pure white, 0 is pure black
/// @param {Color} $color - Color
/// @return {Number}
/// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef Reference
@function luminance($color) {
  $colors: (
    'red': red($color),
    'green': green($color),
    'blue': blue($color)
  );

  @each $name, $value in $colors {
    $adjusted: 0;
    $value: $value / 255;

    @if $value < 0.03928 {
      $value: $value / 12.92;
    } @else {
      $value: ($value + .055) / 1.055;
      $value: pow($value, 2.4);
    }

    $colors: map-merge($colors, ($name: $value));
  }

  @return (map-get($colors, 'red') * .2126) + (map-get($colors, 'green') * .7152) + (map-get($colors, 'blue') * .0722);
}

Verwendung

$color: #BADA55;
$luminance: luminance($color);
// 0.6123778773