diff --git a/addons/crm/static/src/scss/crm.scss b/addons/crm/static/src/scss/crm.scss
index 9cfe1507798..7f8a7a23425 100644
--- a/addons/crm/static/src/scss/crm.scss
+++ b/addons/crm/static/src/scss/crm.scss
@@ -66,7 +66,7 @@
             }
             @at-root a#{&} {
                 &:hover {
-                    color: color-yiq($background-color);
+                    color: color-contrast($background-color);
                     background-color: darken($background-color, 10%);
                 }
             }
diff --git a/addons/hr_skills/static/src/css/hr_skills.scss b/addons/hr_skills/static/src/css/hr_skills.scss
index 8ecf79264e9..97153beab2a 100644
--- a/addons/hr_skills/static/src/css/hr_skills.scss
+++ b/addons/hr_skills/static/src/css/hr_skills.scss
@@ -144,7 +144,7 @@
         }
 
         &.o_group_skills .o_group_name > b, .o_horizontal_separator {
-            color: color-yiq(gray('200'));
+            color: color-contrast(gray('200'));
             font-style: italic;
         }
     }
diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss
index 243cff2dfbd..9d5e5e57422 100644
--- a/addons/portal/static/src/scss/bootstrap_overridden.scss
+++ b/addons/portal/static/src/scss/bootstrap_overridden.scss
@@ -1,3 +1,7 @@
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
 // This variable affects the `.h-*` and `.w-*` classes.
 $sizes: () !default;
 $sizes: map-merge((
diff --git a/addons/portal/static/src/scss/portal.scss b/addons/portal/static/src/scss/portal.scss
index 3658d19353f..1d351e93469 100644
--- a/addons/portal/static/src/scss/portal.scss
+++ b/addons/portal/static/src/scss/portal.scss
@@ -166,7 +166,7 @@ li > p {
     flex-flow: row nowrap;
 }
 .list-group-item:not([class*="list-group-item-"]):not(.active) {
-    color: color-yiq($list-group-bg);
+    color: color-contrast($list-group-bg);
 }
 
 %o-portal-breadcrumbs {
diff --git a/addons/portal_rating/static/src/scss/portal_rating.scss b/addons/portal_rating/static/src/scss/portal_rating.scss
index fb219896e71..ce4ff841d94 100644
--- a/addons/portal_rating/static/src/scss/portal_rating.scss
+++ b/addons/portal_rating/static/src/scss/portal_rating.scss
@@ -83,7 +83,7 @@ $o-w-rating-star-color: #FACC2E;
 }
 
 .o_rating_popup_composer_label {
-    color: color-yiq(white);
+    color: color-contrast(white);
 }
 
 .o_portal_rating_chatter_messages {
diff --git a/addons/stock/static/src/scss/report_stock_reception.scss b/addons/stock/static/src/scss/report_stock_reception.scss
index e65179c5302..c767d1c07b9 100644
--- a/addons/stock/static/src/scss/report_stock_reception.scss
+++ b/addons/stock/static/src/scss/report_stock_reception.scss
@@ -23,7 +23,7 @@
     }
 
     @each $-name, $-bg-color in $theme-colors {
-        $-safe-text-color: color-yiq(mix($-bg-color, $o-view-background-color));
+        $-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
         @include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
     }
 }
diff --git a/addons/survey/static/src/scss/survey_templates_results.scss b/addons/survey/static/src/scss/survey_templates_results.scss
index e1ac7a97a5a..b7bdf515d70 100644
--- a/addons/survey/static/src/scss/survey_templates_results.scss
+++ b/addons/survey/static/src/scss/survey_templates_results.scss
@@ -39,7 +39,7 @@
         }
         .dropdown-item {
             &.active .badge { // Invert badge display when the item is active
-                background-color: color-yiq(theme-color('primary'));
+                background-color: color-contrast(theme-color('primary'));
                 color: theme-color('primary');
             }
         }
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
index 47d456cc050..6fabc02e408 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss
@@ -38,6 +38,10 @@ $theme-colors: map-merge(
     $theme-colors
 );
 
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
 // Options
 //
 // Quickly modify global styling by enabling or disabling optional features.
diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss
index 0c656ae1db2..589e5d50280 100644
--- a/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss
@@ -1,3 +1,7 @@
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
diff --git a/addons/web/static/src/legacy/scss/bs_mixins_overrides.scss b/addons/web/static/src/legacy/scss/bs_mixins_overrides.scss
index e7db43e7b67..9be536f67e0 100644
--- a/addons/web/static/src/legacy/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/legacy/scss/bs_mixins_overrides.scss
@@ -7,13 +7,6 @@
 // otherwise we will have deprecation messages for assets_common generation
 $enable-deprecation-messages: false !default;
 
-// Override color-yiq function to handle the alpha component of colors and
-// automatic threshold
-@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light, $background: $body-bg, $cross-mix: true) {
-    $threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false);
-    @return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
-}
-
 @function mute-color($color) {
     @return scale-color($color, $alpha: -30%);
 }
@@ -34,7 +27,7 @@ $o-color-extras-nesting-selector: '&' !default;
     @if ($color) {
         $-yiq-threshold-met: alpha($color) > $yiq-min-opacity-threshold;
 
-        $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-yiq($color, $background: $background), null));
+        $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-contrast($color), null));
         background-color: $color#{if($important, ' !important', '')};
         color: $-yiq-color; // not important so that text utilities still work
 
diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss
index 68a3f368efa..5bc17e6e0a1 100644
--- a/addons/web/static/src/legacy/scss/fields.scss
+++ b/addons/web/static/src/legacy/scss/fields.scss
@@ -264,7 +264,7 @@
                 } @else {
                     &, &::after {
                         background-color: nth($o-colors, $size);
-                        color: color-yiq(nth($o-colors, $size));
+                        color: color-contrast(nth($o-colors, $size), $min-contrast-ratio: 2.2);
                     }
                 }
             }
diff --git a/addons/web/static/src/legacy/scss/form_view.scss b/addons/web/static/src/legacy/scss/form_view.scss
index fa722c422f4..a1e7a2c6ef6 100644
--- a/addons/web/static/src/legacy/scss/form_view.scss
+++ b/addons/web/static/src/legacy/scss/form_view.scss
@@ -282,7 +282,7 @@ $o-form-label-margin-right: 0px;
 
                 &.btn-primary.disabled {
                     background-color: $o-brand-odoo;
-                    color: color-yiq($o-brand-odoo);
+                    color: color-contrast($o-brand-odoo);
 
                     &:after, &:before {
                         border-left-color: $o-brand-odoo;
diff --git a/addons/web/static/src/legacy/scss/web_calendar.scss b/addons/web/static/src/legacy/scss/web_calendar.scss
index a007eba7a72..01586b376cd 100644
--- a/addons/web/static/src/legacy/scss/web_calendar.scss
+++ b/addons/web/static/src/legacy/scss/web_calendar.scss
@@ -409,7 +409,7 @@ $o-cw-filter-avatar-size: 20px;
                     color: black;
 
                     &.o_attendee_status_tentative {
-                        color: color-yiq($color);
+                        color: color-contrast($color);
                         background: repeating-linear-gradient(
                                     45deg,
                                     $color,
@@ -610,7 +610,7 @@ $o-cw-filter-avatar-size: 20px;
 
             &.ui-datepicker-current-day a {
                 background: $info;
-                color: color-yiq($info);
+                color: color-contrast($info);
                 font-weight: bold;
             }
 
@@ -894,7 +894,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
 
             &.o_cw_custom_hover, &.o_cw_custom_highlight {
                 box-shadow: 0 12px 12px -5px rgba($color, 0.3);
-                color: color-yiq($color);
+                color: color-contrast($color);
                 z-index: 10!important;
                 opacity: 1;
                 right: 1px!important;
@@ -911,7 +911,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
             }
         
             &.o_attendee_status_tentative {
-                color: color-yiq($color);
+                color: color-contrast($color);
                 .fc-bg {
                     background: repeating-linear-gradient(
                         45deg,
@@ -946,7 +946,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
         .o_cw_filter_input_bg {
             border-color: $color;
             background: $color;
-            color: color-yiq($color);
+            color: color-contrast($color);
         }
     }
 
@@ -955,7 +955,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
 
         .card-header, .card-header .popover-header {
             background-color: $color-subdle;
-            color: color-yiq($color-subdle);
+            color: color-contrast($color-subdle);
         }
 
         .card-header {
diff --git a/addons/web/static/src/webclient/burger_menu/burger_menu.scss b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
index 4199de6f9c0..4a15f65bceb 100644
--- a/addons/web/static/src/webclient/burger_menu/burger_menu.scss
+++ b/addons/web/static/src/webclient/burger_menu/burger_menu.scss
@@ -28,7 +28,7 @@
 
   // Scoped variables
   $-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode')
-  $-base-color: color-yiq($-base-bg);
+  $-base-color: color-contrast($-base-bg);
 
   // ====== Top-Bar
   .o_burger_menu_topbar {
diff --git a/addons/web/static/src/webclient/webclient.scss b/addons/web/static/src/webclient/webclient.scss
index 99d9dac0980..463de763bef 100644
--- a/addons/web/static/src/webclient/webclient.scss
+++ b/addons/web/static/src/webclient/webclient.scss
@@ -84,7 +84,7 @@ kbd {
 
 //== Backgound light colors variations (bootstrap extensions)
 @each $-name, $-bg-color in $theme-colors {
-  $-safe-text-color: color-yiq(mix($-bg-color, $o-view-background-color));
+  $-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
   @include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
 }
 
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index 6945a73299e..7010c22dfe5 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -1,5 +1,3 @@
-// Use auto threshold for yiq colors
-$yiq-contrasted-threshold: false !default;
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $colors: () !default;
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 4bf3a73d015..5159d8dad4c 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -16,7 +16,7 @@
     @for $index from 1 through length($o-color-combinations) {
         $-bg-color: o-color(color('o-cc#{$index}-bg'));
 
-        $-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg'));
+        $-text: color('o-cc#{$index}-text') or color-contrast(o-color('o-cc#{$index}-bg'));
         $-headings: color('o-cc#{$index}-headings') or $-text;
         $-h2: color('o-cc#{$index}-h2') or $-headings;
         $-h3: color('o-cc#{$index}-h3') or $-h2;
@@ -769,7 +769,7 @@ blockquote {
                 .nav-link.active,
                 .show > .nav-link {
                     background-color: $-btn-primary-color;
-                    color: color-yiq($-btn-primary-color);
+                    color: color-contrast($-btn-primary-color);
                 }
             }
             .dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
@@ -778,10 +778,10 @@ blockquote {
                 &:active {
                     &, h6 { // Quick fix: sometimes we use h6 in dropdowns
                         @include gradient-bg($-btn-primary-color);
-                        color: color-yiq($-btn-primary-color) !important;
+                        color: color-contrast($-btn-primary-color) !important;
 
                         &:hover, &:focus {
-                            color: color-yiq($-btn-primary-color) !important;
+                            color: color-contrast($-btn-primary-color) !important;
                         }
                     }
                 }
@@ -791,7 +791,7 @@ blockquote {
 
                 &.active {
                     background-color: $-btn-primary-color;
-                    color: color-yiq($-btn-primary-color);
+                    color: color-contrast($-btn-primary-color);
                     border-color: $-btn-primary-color;
                 }
             }
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index fcac171b064..b3cbd5c6c14 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -377,7 +377,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
                 background: $o-brand-primary;
 
                 &, &:hover {
-                    color: color-yiq($o-brand-primary);
+                    color: color-contrast($o-brand-primary);
                 }
 
                 &:hover {
diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss
index b098ebee5ed..a5756d37789 100644
--- a/addons/website/static/src/scss/bootstrap_overridden.scss
+++ b/addons/website/static/src/scss/bootstrap_overridden.scss
@@ -2,13 +2,16 @@
 // Color system
 //
 
-// Use auto threshold for yiq colors
-// Note: also need to be defined here so that color-yiq below works
-$yiq-contrasted-threshold: false !default;
+$white: #FFF !default;
+$black: #000 !default;
 
-// Customize the light and dark text colors for use in our YIQ color contrast function.
-$yiq-text-dark: o-color('900') !default;
-$yiq-text-light: o-color('white') !default;
+// The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio: 3 !default;
+
+// Customize the light and dark text colors for use in our color contrast function.
+$color-contrast-dark: o-color('900') !default;
+$color-contrast-light: o-color('white') !default;
 
 // Spacing
 //
@@ -23,7 +26,7 @@ $spacer: 1rem !default; // Need to predefine as used below
 // Settings for the `<body>` element.
 
 $body-bg: if(o-website-value('layout') != 'full', o-color('body'), o-color('o-cc1-bg')) !default;
-$body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
+$body-color: o-color('o-cc1-text') or color-contrast(o-color('o-cc1-bg')) !default;
 
 // Links
 //
@@ -43,7 +46,7 @@ $link-hover-decoration: if(o-website-value('link-underline') != 'never', underli
 // Note: for the 'active' color, color preset edition is not really flexible but
 // this could come in a future update.
 $component-active-bg: o-color('o-cc1-btn-primary') !default;
-$component-active-color: if($component-active-bg, color-yiq($component-active-bg), null) !default;
+$component-active-color: if($component-active-bg, color-contrast($component-active-bg), null) !default;
 
 // Fonts
 //
diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss
index b75b184dfd5..0d02694abbf 100644
--- a/addons/website/static/src/scss/website.scss
+++ b/addons/website/static/src/scss/website.scss
@@ -222,7 +222,7 @@ $-seen-urls: ();
     @include o-apply-colors('menu');
     @include o-apply-colors('menu-custom');
     $-menu-color: o-color('menu-custom') or o-color('menu');
-    @if ($-menu-color and color-yiq($-menu-color) != $yiq-text-dark) {
+    @if ($-menu-color and color-contrast($-menu-color) != $color-contrast-dark) {
         @extend .navbar-dark;
     }
     @include o-add-gradient('menu-gradient');
@@ -1340,7 +1340,7 @@ span.list-inline-item.o_add_language:last-child {
         text-decoration: none;
 
         @if $-footer-color == $-copyright-color {
-            color: rgba(color-yiq($-footer-color), 0.5);
+            color: rgba(color-contrast($-footer-color), 0.5);
         }
 
         &:hover, &:focus {
diff --git a/addons/website/static/src/snippets/s_google_map/000.scss b/addons/website/static/src/snippets/s_google_map/000.scss
index 9a8df732775..85c091a009d 100644
--- a/addons/website/static/src/snippets/s_google_map/000.scss
+++ b/addons/website/static/src/snippets/s_google_map/000.scss
@@ -16,7 +16,7 @@ $s-google-map-desc-hover-alpha: 0.55 !default;
         z-index: 99;
         padding: 0 1em;
         background: rgba($s-google-map-desc-bg, $s-google-map-desc-alpha);
-        color: color-yiq(rgba($s-google-map-desc-bg, $s-google-map-desc-alpha));
+        color: color-contrast(rgba($s-google-map-desc-bg, $s-google-map-desc-alpha));
         transition: background-color 250ms ease;
 
         font {
@@ -37,6 +37,6 @@ $s-google-map-desc-hover-alpha: 0.55 !default;
     &:hover .description {
         background: $s-google-map-desc-hover-bg;
         background: rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha);
-        color: color-yiq(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha));
+        color: color-contrast(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha));
     }
 }
diff --git a/addons/website/static/src/snippets/s_map/000.scss b/addons/website/static/src/snippets/s_map/000.scss
index 3b8c0fb5d34..80d27d48e69 100644
--- a/addons/website/static/src/snippets/s_map/000.scss
+++ b/addons/website/static/src/snippets/s_map/000.scss
@@ -16,7 +16,7 @@ $s-map-desc-hover-alpha: 0.55 !default;
         z-index: 99;
         padding: 0 1em;
         background: rgba($s-map-desc-bg, $s-map-desc-alpha);
-        color: color-yiq(rgba($s-map-desc-bg, $s-map-desc-alpha));
+        color: color-contrast(rgba($s-map-desc-bg, $s-map-desc-alpha));
         transition: background-color 250ms ease;
 
         font {
@@ -37,7 +37,7 @@ $s-map-desc-hover-alpha: 0.55 !default;
     &:hover .description {
         background: $s-map-desc-hover-bg;
         background: rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha);
-        color: color-yiq(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
+        color: color-contrast(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
     }
     .s_map_color_filter {
         @include o-position-absolute(0, 0, 0, 0);
diff --git a/addons/website/static/src/snippets/s_popup/001.scss b/addons/website/static/src/snippets/s_popup/001.scss
index 76c0361ed01..b7bac9cd5e4 100644
--- a/addons/website/static/src/snippets/s_popup/001.scss
+++ b/addons/website/static/src/snippets/s_popup/001.scss
@@ -22,7 +22,7 @@
         width: $font-size-lg * 2;
         height: $font-size-lg * 2;
         line-height: $font-size-lg * 2;
-        @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
+        @include o-bg-color(color-contrast(o-color('primary')), o-color('primary'), $with-extras: false);
         box-shadow: $box-shadow-sm;
         cursor: pointer;
         font-size: $font-size-lg;
diff --git a/addons/website_event/static/src/scss/event_templates_common.scss b/addons/website_event/static/src/scss/event_templates_common.scss
index 5c4dd47f9a1..d5569607780 100644
--- a/addons/website_event/static/src/scss/event_templates_common.scss
+++ b/addons/website_event/static/src/scss/event_templates_common.scss
@@ -77,7 +77,7 @@
         }
         .dropdown-item  {
             &.active .badge { // Invert badge display when the item is active
-                background-color: color-yiq(theme-color('primary'));
+                background-color: color-contrast(theme-color('primary'));
                 color: theme-color('primary');
             }
         }
diff --git a/addons/website_event/static/src/snippets/s_events/000.scss b/addons/website_event/static/src/snippets/s_events/000.scss
index f31635477a1..ae329c2a83b 100644
--- a/addons/website_event/static/src/snippets/s_events/000.scss
+++ b/addons/website_event/static/src/snippets/s_events/000.scss
@@ -81,7 +81,7 @@
             }
 
             a {
-                color: color-yiq($o-brand-primary);
+                color: color-contrast($o-brand-primary);
 
                 &:hover {
                     text-decoration: none;
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index 94495792a89..f3b827135a9 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -39,7 +39,7 @@ $bronze: #eea91e;
         word-wrap: break-word;
 
         pre {
-            color: color-yiq(gray('100'));
+            color: color-contrast(gray('100'));
             border-radius: $border-radius;
             padding: 1rem;
             background-color: gray('100');
diff --git a/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
index 425d9e1a98e..7beef1a8389 100644
--- a/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
+++ b/addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
@@ -15,7 +15,7 @@
         line-height: $font-size-lg * 2;
         margin: 0;
         padding: 0;
-        @include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
+        @include o-bg-color(color-contrast(o-color('primary')), o-color('primary'), $with-extras: false);
         box-shadow: $box-shadow-sm;
         opacity: 1;
     }
diff --git a/addons/website_payment/static/src/snippets/s_donation/000.scss b/addons/website_payment/static/src/snippets/s_donation/000.scss
index 2fde7bb4830..215229dfff4 100644
--- a/addons/website_payment/static/src/snippets/s_donation/000.scss
+++ b/addons/website_payment/static/src/snippets/s_donation/000.scss
@@ -34,7 +34,7 @@
             left: 0%;
             margin-top: 28px;
             padding: 0.5rem 1rem;
-            color: color-yiq(o-color('primary'));
+            color: color-contrast(o-color('primary'));
             background: theme-color('primary');
             font-size: 1.15rem;
             border-radius: 0.3rem;
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index 7749c0334eb..94cc7eefbb7 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -66,7 +66,7 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
             }
 
             &.active {
-                color: color-yiq($owprofile-color-bg);
+                color: color-contrast($owprofile-color-bg);
                 background: $owprofile-color-bg;
                 border-color: $owprofile-color-bg;
             }
diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 223d66d5697..25affd2a73a 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -95,7 +95,7 @@ $truncate-limits: 2, 3, 10;
             }
             @at-root a#{&} {
                 &:hover {
-                    color: color-yiq($background-color);
+                    color: color-contrast($background-color);
                     background-color: darken($background-color, 10%);
                 }
             }
@@ -310,7 +310,7 @@ $truncate-limits: 2, 3, 10;
         }
 
         &.active {
-            color: color-yiq($tab-active-color);
+            color: color-contrast($tab-active-color);
             background: $tab-active-color;
             border-color: $tab-active-color;
         }