v5: Tweak some colors (#31276)

* Tweak green and cyan colors, bump min contrast ratio to 4.5

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/scss/_variables.scss b/scss/_variables.scss
index cac9febec6224336a31d1a758bb43cd3320d9302..76394c22592188d1a6503c2f126f174e7dcea76d 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -38,9 +38,9 @@ $pink:    #d63384 !default;
 $red:     #dc3545 !default;
 $orange:  #fd7e14 !default;
 $yellow:  #ffc107 !default;
-$green:   #28a745 !default;
+$green:   #198754 !default;
 $teal:    #20c997 !default;
-$cyan:    #17a2b8 !default;
+$cyan:    #0dcaf0 !default;
 
 // scss-docs-start colors-map
 $colors: (
@@ -87,10 +87,10 @@ $theme-color-interval: 8% !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:   4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
-$color-contrast-dark:      $gray-900 !default;
+$color-contrast-dark:      $black !default;
 $color-contrast-light:     $white !default;
 
 // fusv-disable

diff --git a/site/content/docs/5.0/migration.md b/site/content/docs/5.0/migration.md
index fc8a8dc61f1e9b0009f15ca705f04bc8eaaa1f40..79eaefbce279dffe7c093f7abed2ae7284cf5c3c 100644 (file)
--- a/site/content/docs/5.0/migration.md
+++ b/site/content/docs/5.0/migration.md
@@ -14,6 +14,13 @@ toc: true
 - Renamed `.sr-only` and `.sr-only-focusable` to `.visually-hidden` and `.visually-hidden-focusable`.
 - Renamed `sr-only()` and `sr-only-focusable()` mixins to `visually-hidden()` and `visually-hidden-focusable()`.
 
+### Colors
+
+- Bumped color contrast ratio from 3:1 to 4.5:1.
+- Set `$black` as color contrast color instead of `$gray-900`.
+- Improved `$green` (and its theme alias `$success`) color to reach new minimum color contrast (moving from `#28a745` to `#198754`).
+- Improved `$cyan` (and its theme alias `$info`) color to be more vibrant (moving from `#17a2b8` to `#0dcaf0`).
+
 ### Components
 
 #### Buttons