Skip to content

Instantly share code, notes, and snippets.

@isGabe
Last active January 7, 2019 15:48
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save isGabe/8959422 to your computer and use it in GitHub Desktop.
Save isGabe/8959422 to your computer and use it in GitHub Desktop.
Sass function to check contrast ratio & conditionally change text color
<button>Submit</button>
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// ----
/* Awesome contrast ratio function
* via https://gist.github.com/voxpelli/6304812
**/
@function color_luminance($color) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
$rgba: red($color), green($color), blue($color);
$rgba2: ();
@for $i from 1 through 3 {
$rgb: nth($rgba, $i);
$rgb: $rgb / 255;
$rgb: if($rgb < .03928, $rgb / 12.92, pow(($rgb + .055) / 1.055, 2.4));
$rgba2: append($rgba2, $rgb);
}
@return .2126 * nth($rgba2, 1) + .7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
}
@function color_contrast($color1, $color2) {
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
$luminance1: color_luminance($color1) + .05;
$luminance2: color_luminance($color2) + .05;
$ratio: $luminance1 / $luminance2;
@if $luminance2 > $luminance1 {
$ratio: 1 / $ratio;
}
$ratio: round($ratio * 10) / 10;
@return $ratio;
}
$button-blue: #3879B3;
@mixin button($color: $button-blue){
display: inline-block;
vertical-align: top;
padding: 2px 10px 3px;
-webkit-appearance: none;
cursor: pointer;
border-style: solid;
border-color: darken($color,15%);
border-width: 1px 1px 2px;
background-color: $color;
border-radius: 3px;
// Check contrast ratio of white to background color
@if color_contrast($color, #FFF) < 4.5{
color: #111;
text-shadow: none;
}
@else{
color: #FFF;
text-shadow: 0 1px #000;
}
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"]{
@include button;
}
/* Awesome contrast ratio function
* via https://gist.github.com/voxpelli/6304812
**/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
display: inline-block;
vertical-align: top;
padding: 2px 10px 3px;
-webkit-appearance: none;
cursor: pointer;
border-style: solid;
border-color: #265279;
border-width: 1px 1px 2px;
background-color: #3879b3;
border-radius: 3px;
color: #FFF;
text-shadow: 0 1px #000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment