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)…

… if there are a lot of good options?

Yes I know, there are some frontend framewoks real good out there, and even that I’m creating Frontendcore. What’s the reason of this?

I can do it better

Nop. It’s not true, for example all the scss code behind foundation it’s really good and I don’t think I’m able to do it better.

I have a new system pretty cool

Nop. AngularJS is pretty cool… from the infinity and beyond. It’s the most innovative way to work and my framework it’s not going to beat it.

Because in the real life you need to do it well and do it…