benjamincharity
1/20/2014 - 9:39 PM

Avoid using a light text color over certain background colors. http://sassbin.com/gist/8529640/

Avoid using a light text color over certain background colors.

http://sassbin.com/gist/8529640/

@function checkLightness($color) {
    @if ( (lightness($color) > 70) or (hue($color) > 40 and hue($color) < 200 )) {
      @return #000000;
    }
  
    @else {
      @return #FFFFFF;
    }
}

$myColor: green;

div {
  background-color: $myColor;
  color: checkLightness($myColor);
  content: "HUE:#{hue($myColor)} - LIGHTNESS:#{lightness($myColor)}";
  padding: .4em;
}