diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss
index a74f0991e90..00421903bfa 100644
--- a/addons/web/static/src/scss/bootstrap_review_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss
@@ -112,15 +112,8 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     // body is white, the text will not be visible on modals with a white
     // background.
 
-    // Check if the body text color is light.
-    $-is-body-text-light: color-contrast($body-color) == $color-contrast-dark;
-
     @if $modal-content-color == null {
-        color: if(
-            $-is-body-text-light,
-            color-contrast($modal-content-bg, $body-color, $color-contrast-dark),
-            color-contrast($modal-content-bg, $color-contrast-light, $body-color)
-        );
+        color: adjust-color-to-background($body-color, $modal-content-bg);
 
         // This prevents these elements from taking their colors from the body
         // inside a modal.
@@ -153,9 +146,26 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
             }
         }
     }
-    @if $-is-body-text-light {
-        .text-muted {
-            color: color-contrast($modal-content-bg, $text-muted, mute-color($color-contrast-dark)) !important;
+    .text-muted {
+        color: adjust-color-to-background($text-muted, $modal-content-bg, mute-color($color-contrast-light), mute-color($color-contrast-dark)) !important;
+    }
+}
+
+// Popover
+.popover {
+    // The popover can have a different background color than that of the body.
+    // Here, we adjust the text color of the popover in case the body color
+    // (used by default for the text color of popovers) is not visible inside a
+    // popover due to a lack of contrast (e.g. on a website with a dark
+    // background).
+    @if $popover-header-color == null {
+        .popover-header {
+            color: adjust-color-to-background($body-color, $popover-header-bg);
+        }
+    }
+    @if $popover-body-color == $body-color {
+        .popover-body {
+            color: adjust-color-to-background($body-color, $popover-bg);
         }
     }
 }
@@ -167,3 +177,18 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
     // on the 'currentColor' of the inputs.
     color: inherit;
 }
+
+$-color-for-gray-200-bg: adjust-color-to-background($body-color, $gray-200);
+// Input group text (e.g. Date time picker)
+.input-group-text {
+    // Adapt only if the variables have their default values.
+    @if ($input-group-addon-bg == $gray-200) and ($input-group-addon-color == $body-color) {
+        color: $-color-for-gray-200-bg;
+    }
+}
+// File upload button
+.form-control::file-selector-button {
+    @if ($form-file-button-bg == $gray-200) and ($form-file-button-color == $body-color) {
+        color: $-color-for-gray-200-bg;
+    }
+}
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 4946ec70274..e6555b33ba3 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -93,6 +93,17 @@
     }
 }
 
+// This function checks if the color ($color) has enough contrast to be visible
+// on a background with the color ($background-color). If not, it is replaced
+// with $light (if too dark) or $dark (if too light).
+@function adjust-color-to-background($color, $background-color, $light: $color-contrast-light, $dark: $color-contrast-dark) {
+    @return if(
+        color-contrast($color) == $color-contrast-dark,
+        color-contrast($background-color, $color, $dark),
+        color-contrast($background-color, $light, $color)
+    );
+}
+
 // ------------------------------------------------------------------
 // Padding
 // ------------------------------------------------------------------
diff --git a/addons/website_sale/static/src/scss/website_sale.scss b/addons/website_sale/static/src/scss/website_sale.scss
index d8cc05febe1..5b3df4ee583 100644
--- a/addons/website_sale/static/src/scss/website_sale.scss
+++ b/addons/website_sale/static/src/scss/website_sale.scss
@@ -159,6 +159,13 @@ $input-border-color: $gray-400;
             max-width: $o-wsale-input-max-width;
         }
     }
+
+    // Extra price badge
+    .text-bg-light .variant_price_extra.text-muted {
+        // Needed to be visible on a dark <body> background.
+        color: adjust-color-to-background($text-muted, $light, mute-color($color-contrast-light), mute-color($color-contrast-dark)) !important;
+    }
+
     input.js_quantity {
         min-width: 48px;
         text-align: center;