diff --git a/assets/scss/_boxes.scss b/assets/scss/_boxes.scss
index 42ea0a97c9..c33316099f 100644
--- a/assets/scss/_boxes.scss
+++ b/assets/scss/_boxes.scss
@@ -4,7 +4,11 @@
 @mixin box-variant($parent, $color-name, $color-value) {
   $text-color: color-contrast($color-value);
   $link-color: mix($blue, $text-color, lightness($color-value));
-  $link-hover-color: shade-color($text-color, $link-shade-percentage);
+  $link-hover-color: if(
+    color-contrast($link-color) == $color-contrast-light,
+    shade-color($link-color, $link-shade-percentage),
+    tint-color($link-color, $link-shade-percentage)
+  );
 
   #{$parent} {
     &--#{$color-name} {