Skip to content

Instantly share code, notes, and snippets.

@mattdrose
Last active March 8, 2022 14:16
Show Gist options
  • Save mattdrose/5638599 to your computer and use it in GitHub Desktop.
Save mattdrose/5638599 to your computer and use it in GitHub Desktop.
Use SASS to get the contrast color based on a color's luma value (the Y in YIQ). http://en.wikipedia.org/wiki/YIQ This calculates a color that is much more readable. Read more from the W3C. http://www.w3.org/TR/AERT#color-contrast
/*
* Calculate Luma
*
* Luma measures a colors percieved brightness
* by the human eye.
* http://en.wikipedia.org/wiki/YIQ
*/
@function luma($color){
$r: red($color);
$g: green($color);
$b: blue($color);
@return 0.299 * $r + 0.587 * $g + 0.114 * $b;
}
/*
* Contrast Color w/ Luma
*
* Calculate the contrast based on the luma
* value of the color, as per W3C.
* http://www.w3.org/TR/AERT#color-contrast
*/
@function contrast-color(
$color,
$dark: #000,
$light: #fff,
$threshold: 130
) {
@return if(luma($color) < $threshold, $light, $dark)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment