Generated by SassMeister.com.

test-contrast.scss

////
/// @group UI
///

/// The minimum authorized contrast
/// @type Number
$minimum-authorized-contrast: 4.5 !default;

/// The minimum authorized contrast for bigger size
/// @type Number
$minimum-authorized-contrast-large-text: 3.1 !default;

/// Get the luminance of the color
/// @link https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js Adapted from LeaVerou
/// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef See formula
/// @author https://gist.github.com/voxpelli/6304812
/// @param {color} $color
@function color_luminance($color) {
  $rgba: red($color), green($color), blue($color);
  $rgba2: ();

  @for $i from 1 through 3 {
    $rgb: nth($rgba, $i);
    $rgb: $rgb / 255;

    $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));

    $rgba2: append($rgba2, $rgb);
  }

  @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
}

/// Get the contrast ratio between two color
/// @link https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js Adapted from LeaVerou
/// @link http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef See formula
/// @author https://gist.github.com/voxpelli/6304812
/// @param {color} $color1 - First color to compare
/// @param {color} $color2 - Second color to compare
/// @return {number} The contrast ratio between two color
@function color_contrast($color1, $color2) {
  $luminance1: color_luminance($color1) + 0.05;
  $luminance2: color_luminance($color2) + 0.05;
  $ratio: $luminance1 / $luminance2;

  @if $luminance2 > $luminance1 {
    $ratio: 1 / $ratio;
  }

  $ratio: round($ratio * 10) / 10;

  @return $ratio;
}

/// Get the best color from a list with the best color ratio depending on selected contrast
/// @param {color} $base - main color
/// @param {map | color} $colors - color(s) to test for get the best one with the better color ratio
/// @param {number} $contrast_limit - the contrast use to calculate the better color
/// @return {color} the color who have the best color ratio
/// @example scss
///   color: pick_best_color(#f00, #fff, 4.1);
///   color: pick_best_color(#f00, (#fff, #ccc, #666));
@function pick_best_color($base, $colors, $contrast_limit: $minimum-authorized-contrast) {
  $contrast: 0;
  $best: '';

  @if type_of($colors) == list {
    $contrast: color_contrast($base, nth($colors, 1));
    $best: nth($colors, 1);

    @for $i from 2 through length($colors) {
      $current_contrast: color_contrast($base, nth($colors, $i));
      @if ($current_contrast > $contrast) {
        $contrast: $current_contrast;
        $best: nth($colors, $i);
      }
    }
  } @else {
    $contrast: color_contrast($base, $colors);
    $best: $colors;
  }

  @if ($contrast < $contrast_limit) {
    @warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast} instead of a minimum of #{$contrast_limit}";
  }

  @return $best;
}

/// Get the best color from a list with the best color ratio depending on contrast based on font size
/// In the internationale reglementation etablished by the WCAG, the success criteria 1.4.3 requires a minimum contrast ratio of 4.5:1 (and 3:1 for enlarged text).
/// This minimum contrast ratio is also required by the French regulation, established by the RGAA 3.0 2016, in the criteria 3.3 et 3.4.
/// @param {color} $base - main color
/// @param {map | color} $colors - color(s) to test for get the best one with the better color ratio
/// @param {number} $size - size of the text, need to select the correct contrast
/// @param {bool} $is_bold - set if the text is bold, need to select the correct contrast
/// @return {color} the color who have the best color ratio
/// @example scss
///   color: pick_best_color(#f00, (#fff, #ccc, #666), 18, true);
///   color: pick_best_color(#f00, #fff);
@function pick_best_color_by_size($base, $colors, $size: $font-size-default, $is_bold: false) {
  $contrast_limit: $minimum-authorized-contrast;
  @if $is_bold {
    @if $size >= $font-size-default*1.2 {
      $contrast_limit: $minimum-authorized-contrast-large-text;
    }
  } @else {
    @if $size >= $font-size-default*1.5 {
      $contrast_limit: $minimum-authorized-contrast-large-text;
    }
  }

  @return pick_best_color($base, $colors, $contrast_limit)
}