Contents

// Returns either the `$light` or `$dark` color
// by deciding which contrasts more with `$color`.
//
// E.g. This can be used to select the more readable foreground color
// for a given background color.
//
// @param  $color {Color} - The color that you wish to contrast with.
// @return {Color} - Returns the value of `$dark` or `$light`, based on which one provides better contrast against the passed `$color`.
@function auto-contrast($color) {
  $dark: #000;
  $light: #fff;

  @if $color == null {
    @return null;
  }
  @else {
    // =====
    // $color-brightness: round((red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000);
    // $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
    // @return if(abs($color-brightness) < ($light-color / 2), $light, $dark);
    // =====

    // YIQ Method for calculating colour contrast
    $yiq: (red($color) * 299 + green($color) * 587 + blue($color) * 114) / 1000;
    @return if($yiq >= 128, $dark, $light);
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
oscailte-3.0.1	_sass/oscailte/tools/_functions.scss