Skip to Content


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

Sass April 2, 2019


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


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

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

(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 »


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

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

Lighten a color if it is determined to be dark

$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.

Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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

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


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

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