[FIX] web, website, portal: fix the text color contrast over background

1. Introduce primary variable to simplified overridden value of
   `$min-contrast-ratio` and document its need.

2. Reduce `$min-contrast-ratio` to 2.9 to solve the inconsistency with
   the previous version 15.0 of text color over some background color.
   Of course it won't restore everything to the way it was: we still
   want the version 16.0 to be an evolution over version 15.0 using what
   bootstrap recommended to compare contrasts. But as going from 3.0 to
   2.9 should not impact existing websites too much and solve use cases
   we feel need solving, we feel it is an ok change.

3. Restore override of the `color-contrast` method that will now
   handle the transparent colors. Before this commit, a color-contrast
   function was just considering RGB value only, after this commit it
   will consider RGBA value, relying (by default) on the fact the body
   background is the background behind the colors we are comparing.

task-3241031

closes odoo/odoo#126759

X-original-commit: 313220ed4a0ff4ae26eb113a3a88b0dc44b649fe
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Divyesh Vyas (divy) <divy@odoo.com>

addons/portal/static/src/scss/bootstrap_overridden.scss

@@ -1,6 +1,8 @@
 // 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;
+
+// Overridden here as it is a dependency for some variables/functions afterwards
+$min-contrast-ratio: $o-frontend-min-contrast-ratio !default;
 
 //Restore BS4 Colors
 $blue: #007bff !default;

addons/web/static/src/scss/bootstrap_overridden_frontend.scss

@@ -16,7 +16,7 @@ $primary: $blue !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;
+$min-contrast-ratio: $o-frontend-min-contrast-ratio !default;
 
 // Body
 

addons/web/static/src/scss/bs_mixins_overrides.scss

@@ -7,6 +7,29 @@
 // otherwise we will have deprecation messages for assets_common generation
 $enable-deprecation-messages: false !default;
 
+// Override color-contrast function to handle the alpha component of colors
+@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio, $main-background: $body-bg) {
+    $real-color: opaque($main-background, $background);
+
+    $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black;
+    $max-ratio: 0;
+    $max-ratio-color: null;
+
+    @each $color in $foregrounds {
+      $contrast-ratio: contrast-ratio($real-color, $color);
+      @if $contrast-ratio > $min-contrast-ratio {
+        @return $color;
+      } @else if $contrast-ratio > $max-ratio {
+        $max-ratio: $contrast-ratio;
+        $max-ratio-color: $color;
+      }
+    }
+
+    @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$real-color} (mix of given color and background)...";
+
+    @return $max-ratio-color;
+}
+
 @function mute-color($color) {
     @return scale-color($color, $alpha: -30%);
 }
@@ -27,7 +50,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-contrast($color), null));
+        $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-contrast($color, $main-background: $background), null));
         background-color: $color#{if($important, ' !important', '')};
         color: $-yiq-color; // not important so that text utilities still work
 

addons/web/static/src/scss/primary_variables.scss

@@ -3,6 +3,9 @@
 /// They are available in every asset bundle.
 ///
 
+// Contrast ratio
+$o-frontend-min-contrast-ratio: 2.9 !default;
+
 // Color-scheme
 $o-webclient-color-scheme: bright !default;
 

addons/website/static/src/scss/bootstrap_overridden.scss

@@ -15,7 +15,9 @@ $black: #000 !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;
+
+// Overridden here as it is a dependency for some variables/functions afterwards
+$min-contrast-ratio: $o-frontend-min-contrast-ratio !default;
 
 // Prefix for :root CSS variables
 $variable-prefix: '' !default;