diff --git a/scss/_badge.scss b/scss/_badge.scss
index 175b19d86e25..0ffd98bdf01f 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -52,25 +52,25 @@ a.badge {
 // Contextual variations (linked badges get darker on :hover).
 
 .badge-default {
-  @include badge-variant($badge-default-bg);
+  @include badge-variant($badge-default-bg,$badge-default-color);
 }
 
 .badge-primary {
-  @include badge-variant($badge-primary-bg);
+  @include badge-variant($badge-primary-bg,$badge-primary-color);
 }
 
 .badge-success {
-  @include badge-variant($badge-success-bg);
+  @include badge-variant($badge-success-bg,$badge-success-color);
 }
 
 .badge-info {
-  @include badge-variant($badge-info-bg);
+  @include badge-variant($badge-info-bg,$badge-info-color);
 }
 
 .badge-warning {
-  @include badge-variant($badge-warning-bg);
+  @include badge-variant($badge-warning-bg,$badge-warning-color);
 }
 
 .badge-danger {
-  @include badge-variant($badge-danger-bg);
+  @include badge-variant($badge-danger-bg,$badge-danger-color);
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 957e69d5c21a..83e7cd2b9e07 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -737,11 +737,17 @@ $popover-arrow-outer-color:           fade-in($popover-border-color, .05) !defau
 // Badges
 
 $badge-default-bg:            $gray-light !default;
+$badge-default-color:         $white !default;
 $badge-primary-bg:            $brand-primary !default;
+$badge-primary-color:         $white !default;
 $badge-success-bg:            $brand-success !default;
+$badge-success-color:         $white !default;
 $badge-info-bg:               $brand-info !default;
+$badge-info-color:            $white !default;
 $badge-warning-bg:            $brand-warning !default;
+$badge-warning-color:         $white !default;
 $badge-danger-bg:             $brand-danger !default;
+$badge-danger-color:          $white !default;
 
 $badge-color:                 $white !default;
 $badge-link-hover-color:      $white !default;
diff --git a/scss/mixins/_badge.scss b/scss/mixins/_badge.scss
index 9fa44b647813..ccc214da6f78 100644
--- a/scss/mixins/_badge.scss
+++ b/scss/mixins/_badge.scss
@@ -1,7 +1,8 @@
 // Badges
 
-@mixin badge-variant($color) {
-  background-color: $color;
+@mixin badge-variant($bgcolor,$color) {
+  background-color: $bgcolor;
+  color: $color;
 
   &[href] {
     @include hover-focus {