Source on Github

Compass Color Contrast

This file can be imported using: @import "compass/utilities/color/contrast"

Examples

Compass Contrast Color Example
Make text readable

Configurable Variables help

black

white

30%

Functions

view source 

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold)
  @return if(lightness($color) 

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold) {
  @return if(lightness($color)

Returns the $light color when the $color is dark and the $dark color when the $color is light. The $threshold is a percent between 0% and 100% and it determines when the lightness of $color changes from "dark" to "light".

Mixins

view source 

=contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold)
  background-color: $background-color
  color: contrast-color($background-color, $dark, $light, $threshold)

@mixin contrasted($background-color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: $contrasted-lightness-threshold) {
  background-color: $background-color;
  color: contrast-color($background-color, $dark, $light, $threshold);
}

Sets the specified background color and calculates a dark or light contrasted text color. The arguments are passed through to the contrast-color function.