Skip to Content

high-contrast-color()

Return the color with the higher contrast ratio against the background.

Sass April 2, 2019

Usage

Sass
high-contrast-color($bg, $light, $dark)

Parameters

$bg
(Required) (color) The color to determine a readable color for
Default: None

$light
(Optional) (mixed) The value to return if the background is dark
Default: #fff

$dark
(Optional) (mixed) The value to return if the background is light
Default: #000

Parameter Notes

The $bg color can be any valid CSS or Sass color such as red#123456rgb(123, 45, 210), etc.

Request or provide clarification »

Examples

Basic usage (consider using readable-color() function instead here)

Sass
.element {background: $primary_color; color: high-contrast-color($primary_color);}

Lighten a color if it is determined to be dark

Sass
$active_color: lighten($primary_color, 25%); //Lighten the color in case it is dark
@if high-contrast-color($primary_color, true, false) { //If the color is light
    $active_color: $primary_color; //Use the original color since it is already light
}

Additional Notes

This function requires the linear channel value lookup table. For simple functionality (when only needing black and white return values) consider using the readable-color() function instead.

Source File

Located in /assets/scss/partials/_functions.scss on line 58.

Sass
@function high-contrast-color($bg, $light: #fff, $dark: #000){
    $lightContrast: contrast($bg, $light);
    $darkContrast: contrast($bg, $dark);

    @if ( $lightContrast > $darkContrast ){
        @return $light;
    }

    @return $dark;
}

Override

To override or disable this, redefine the mixin/function later on, or use different class names to prevent this from targeting your element.

Sass
@mixin high-contrast-color($bg, $light, $dark){
    //Write your own code here, leave it blank, or return false.
}