It’s very common using Sass to need to get the best color for text depending on the background-color. If you are using Compass maybe you’ve notice that there is a function called contrast-color that it suppose to do this… but the true is that it fails a lot, in Frontendcore I’ve solve this with custom functions.

It’s not very difficult to do an algorithm to do this, the general idea is to get the lightness of each color and return the most “contrasty”. This is the contrast color function I’m using in Frontendcore overwriting the Compass function.

@function contrast-color (
   $color, 
   $dark: $color-foreground,
   $light: $color-background
){ 
   @if $color == null { 
       @return null;
   } @else { 
       $color-brightness: brightness($color);
       $light-text-brightness: brightness($light);
       $dark-text-brightness: brightness($dark);
       @return if(abs($color-brightness — $light-text-brightness) > abs($color-brightness — $dark-text-brightness), $light, $dark)…