diff --git a/app/assets/stylesheets/blacklight/_facets.scss b/app/assets/stylesheets/blacklight/_facets.scss
index 10265b0f7..3bd90d3e3 100644
--- a/app/assets/stylesheets/blacklight/_facets.scss
+++ b/app/assets/stylesheets/blacklight/_facets.scss
@@ -118,17 +118,8 @@
   border-color: $facet-active-border;
 
   .card-header {
+    --bs-btn-color: #{$facet-active-header-color};
     background-color: var(--bl-facet-active-bg);
-
-    .btn {
-      @if function-exists(color-contrast) {
-        color: color-contrast($facet-active-bg);
-      }
-
-      @if function-exists(color-yiq) {
-        color: color-yiq($facet-active-bg);
-      }
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/blacklight/blacklight_defaults.scss b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
index e0e229dde..0fdb1f6c9 100644
--- a/app/assets/stylesheets/blacklight/blacklight_defaults.scss
+++ b/app/assets/stylesheets/blacklight/blacklight_defaults.scss
@@ -7,6 +7,15 @@ $logo-height: 50px !default;
 $facet-active-border: $success !default;
 $facet-active-bg: $success !default;
 $facet-active-item-color: $success !default;
+$facet-active-header-color: $black;
+/* Bootstrap 5+ */
+@if function-exists(color-contrast) {
+  $facet-active-header-color: color-contrast($facet-active-bg);
+}
+/* Bootstrap 4 */
+@if function-exists(color-yiq) {
+  $facet-active-header-color: color-yiq($facet-active-bg);
+}
 
 /* for compatability with BS < 5.3  */
 $body-secondary-color: rgba($body-color, 0.75) !default;