diff --git a/scss/helpers/_colored-links.scss b/scss/helpers/_colored-links.scss
index 4eea8d333e..d135194d17 100644
--- a/scss/helpers/_colored-links.scss
+++ b/scss/helpers/_colored-links.scss
@@ -5,7 +5,7 @@
     @if $emphasized-link-hover-darken-percentage != 0 {
       &:hover,
       &:focus {
-        color: darken($value, $emphasized-link-hover-darken-percentage);
+        color: if(color-contrast($value) == $color-contrast-light, darken($value, $emphasized-link-hover-darken-percentage), lighten($value, $emphasized-link-hover-darken-percentage));
       }
     }
   }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index b72836fad2..eeade6a32e 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -7,11 +7,11 @@
   $background,
   $border,
   $color: color-contrast($background),
-  $hover-background: darken($background, 7.5%),
-  $hover-border: darken($border, 10%),
+  $hover-background: if($color == $color-contrast-light, darken($background, 7.5%), lighten($background, 7.5%)),
+  $hover-border: if($color == $color-contrast-light, darken($border, 10%), lighten($border, 5%)),
   $hover-color: color-contrast($hover-background),
-  $active-background: darken($background, 10%),
-  $active-border: darken($border, 12.5%),
+  $active-background: if($color == $color-contrast-light, darken($background, 10%), lighten($background, 10%)),
+  $active-border: if($color == $color-contrast-light, darken($border, 12.5%), lighten($border, 5%)),
   $active-color: color-contrast($active-background),
   $disabled-background: $background,
   $disabled-border: $border,