diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
index 9ae6db9ecc1..e12c41b7def 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -27,15 +27,18 @@ $enable-deprecation-messages: false !default;
     }
 }
 
+$o-yiq-min-opacity-threshold: 0.3 !default;
 $o-color-extras-nesting-selector: '&' !default;
 
-@mixin o-bg-color($color, $text-color: null, $with-extras: true, $important: true, $nesting-selector: $o-color-extras-nesting-selector) {
+@mixin o-bg-color($color, $text-color: null, $with-extras: true, $important: true, $yiq-min-opacity-threshold: $o-yiq-min-opacity-threshold, $nesting-selector: $o-color-extras-nesting-selector) {
     @if ($color) {
-        $-yiq-color: if($text-color, $text-color, color-yiq($color));
+        $-yiq-threshold-met: alpha($color) > $yiq-min-opacity-threshold;
+
+        $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-yiq($color), null));
         background-color: $color#{if($important, ' !important', '')};
         color: $-yiq-color; // not important so that text utilities still work
 
-        @if $with-extras {
+        @if $with-extras and $-yiq-threshold-met {
             #{$nesting-selector} {
                 @extend %o-bg-color-component-color-reset;
 
diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 08a202263fc..7da88635a5f 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -615,7 +615,7 @@ blockquote {
     // bg and text utility classes. **
     .o_cc#{$index} {
         // Background & Text
-        @include o-bg-color(o-color($-bg), o-color($-text), $important: false);
+        @include o-bg-color(o-color($-bg), o-color($-text), $important: false, $yiq-min-opacity-threshold: 0);
 
         #{$o-color-extras-nesting-selector} {
             // Headings