improved-a11y-contrast.scss

@function pow($base, $exponents) {
  $raised: 1;
  @for $i from 1 through $exponents {
    $raised: $raised * $base;
  }
  @return $raised;
}
@function luma($color){
  // Thanks voxpelli for a very concise implementation of luminance measure in sass
  // Adapted from: https://gist.github.com/voxpelli/6304812
  $rgba: red($color), green($color), blue($color);
  $rgba2: ();
  @for $i from 1 through 3 {
    $rgb: nth($rgba, $i);
    $rgb: $rgb / 255;
    $rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2));
    $rgba2: append($rgba2, $rgb);
  }
  @return (.2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3))*100;
}

@function contrast_ratio($color1, $color2) {
  $luma1: luma($color1) + 5;
  $luma2: luma($color2) + 5;
  $ratio: $luma1 / $luma2;
  @if $luma1 < $luma2 {
    $ratio: 1 / $ratio;
  }
  @return $ratio;
}

@function contrast($color, $bgcolor: $color, $threshold:5.0) {
  // $threshold: 4.5; // 4.5 = WCAG AA,7= WCAG AAA
  // $threshold: 5.0;
  $percent: 0;
  @while $percent < 100 {
    $lighter:       lighten($color, $percent);
    $darker:        darken($color, $percent);
    $darker-ratio:  contrast_ratio($bgcolor, $darker);
    $lighter-ratio: contrast_ratio($bgcolor, $lighter);

    @if($darker-ratio > $lighter-ratio){
      @if ($darker-ratio > $threshold){
        @return $darker;
      }
    }
    @if($lighter-ratio > $darker-ratio){
      @if ($lighter-ratio > $threshold){
        @return $lighter;
      }
    }
    $percent: $percent + 2;
  }
  @return if(lightness($color) < 51, #000, #FFF) // Couldnt find an answer
}