SCSS Mixin: Calculate color contrast between foreground and background color

/// Mixin that calculates if text needs to be light or dark, depending on the background color passed. /// Color brightness is determined by the following formula: /// ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 /// @author David Halford /// @link https://codepen.io/davidhalford/pen/wlDxL /// @link http://www.webmasterworld.com/r.cgi?f=88&d=9769&url=http://www.w3.org/TR/AERT#color-contrast /// @param {Color} $color Color /// @returns {Color} Light or dark color depending on the contrast to $color @function text-contrast($color) { $contrast-color: #ffffff; $color-brightness: round( (red($color) * 299) + (green($color) * 587) + (blue($color) * 114) / 1000 ); $light-color: round( (red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000 ); @if abs($color-brightness) < ($light-color / 2) { $contrast-color: #fff; } @else { $contrast-color: #000; } @return $contrast-color; }