Compass Color Contrast

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

Examples

Compass Contrast Color Example: Make text readable

Imports

Color Brightness – Compute the brightness of a color.

Configurable Variables help

$contrasted-dark-default `black`

$contrasted-light-default `white`

Functions

view source

contrast-color($color, $dark, $light, $threshold)

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null)
  @if $threshold
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release."
  @if $color == null
    @return null
  @else
    $color-brightness: brightness($color)
    $dark-text-brightness: brightness($dark)
    $light-text-brightness: brightness($light)
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark)

@function contrast-color($color, $dark: $contrasted-dark-default, $light: $contrasted-light-default, $threshold: null) {
  @if $threshold {
    // Deprecated in Compass 0.13
    @warn "The $threshold argment to contrast-color is no longer needed and will be removed in the next release.";
  }
  @if $color == null {
    @return null;
  }
  @else {
    $color-brightness: brightness($color);
    $dark-text-brightness: brightness($dark);
    $light-text-brightness: brightness($light);
    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
  }
}

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.

$dark defaults to black and $light defaults to white.

When $color is null, this function returns null.

Mixins