diff --git a/assets/scss/_colors.scss b/assets/scss/_colors.scss
index d09d3a2c57..8d2825c570 100644
--- a/assets/scss/_colors.scss
+++ b/assets/scss/_colors.scss
@@ -4,21 +4,21 @@
 
 @each $color, $value in $colors {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }
 
 @each $color, $value in $theme-colors {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }
 
 @each $color, $value in $grays {
   .swatch-#{$color} {
+    color: color-yiq($value);
     background-color: #{$value};
-    @include color-yiq($value);
   }
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 5d43b57087..43210f7fb3 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -49,7 +49,7 @@
 }
 
 // Color contrast
-@mixin color-yiq($color) {
+@function color-yiq($color) {
   $r: red($color);
   $g: green($color);
   $b: blue($color);
@@ -57,9 +57,9 @@
   $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
 
   @if ($yiq >= 150) {
-    color: #111;
+    @return #111;
   } @else {
-    color: #fff;
+    @return #fff;
   }
 }
 
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 257a6abb7d..eeca0b40de 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,10 +1,10 @@
 @mixin badge-variant($bg) {
-  @include color-yiq($bg);
+  color: color-yiq($bg);
   background-color: $bg;
 
   &[href] {
     @include hover-focus {
-      @include color-yiq($bg);
+      color: color-yiq($bg);
       text-decoration: none;
       background-color: darken($bg, 10%);
     }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 7ce8fef5f3..50cd4fcbcd 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -4,13 +4,13 @@
 // and disabled options for all buttons
 
 @mixin button-variant($background, $border, $active-background: darken($background, 7.5%), $active-border: darken($border, 10%)) {
-  @include color-yiq($background);
+  color: color-yiq($background);
   background-color: $background;
   border-color: $border;
   @include box-shadow($btn-box-shadow);
 
   @include hover {
-    @include color-yiq($active-background);
+    color: color-yiq($active-background);
     background-color: $active-background;
     border-color: $active-border;
   }