Add checks to fix color contrast issues (#32085)

diff --git a/scss/_alert.scss b/scss/_alert.scss
index f67dcc6a1d9e9174b332fbca3c29a895cca17549..24fa2bd14075941c6bf86719c545cde07a146516 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -43,9 +43,15 @@
 // scss-docs-start alert-modifiers
 // Generate contextual modifier classes for colorizing the alert.
 
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    @include alert-variant(scale-color($value, $alert-bg-scale), scale-color($value, $alert-border-scale), scale-color($value, $alert-color-scale));
+@each $state, $value in $theme-colors {
+  $background: scale-color($value, $alert-bg-scale);
+  $border: scale-color($value, $alert-border-scale);
+  $color: scale-color($value, $alert-color-scale);
+  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  }
+  .alert-#{$state} {
+    @include alert-variant($background, $border, $color);
   }
 }
 // scss-docs-end alert-modifiers

diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 84fbb1b0eec9c4ea04974aac07b814270be080e0..2ce0c8b159b7d04ff81927c79615163066cacc9d 100644 (file)
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -151,7 +151,13 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, scale-color($value, $list-group-item-bg-scale), scale-color($value, $list-group-item-color-scale));
+@each $state, $value in $theme-colors {
+  $background: scale-color($value, $list-group-item-bg-scale);
+  $color: scale-color($value, $list-group-item-color-scale);
+  @if (contrast-ratio($background, $color) < $min-contrast-ratio) {
+    $color: mix($value, color-contrast($background), abs($alert-color-scale));
+  }
+
+  @include list-group-item-variant($state, $background, $color);
 }
 // scss-docs-end list-group-modifiers

diff --git a/scss/_variables.scss b/scss/_variables.scss
index de7656e9179eb71208e9f8a9f67fd1dcc780522d..358b43dd52ecb1c281029b064d5dcf43fab05652 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1182,7 +1182,7 @@ $alert-border-width:                $border-width !default;
 
 $alert-bg-scale:                    -80% !default;
 $alert-border-scale:                -70% !default;
-$alert-color-scale:                 50% !default;
+$alert-color-scale:                 40% !default;
 
 $alert-dismissible-padding-r:       $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 
@@ -1211,7 +1211,7 @@ $list-group-border-radius:          $border-radius !default;
 $list-group-item-padding-y:         $spacer / 2 !default;
 $list-group-item-padding-x:         $spacer !default;
 $list-group-item-bg-scale:          -80% !default;
-$list-group-item-color-scale:       50% !default;
+$list-group-item-color-scale:       40% !default;
 
 $list-group-hover-bg:               $gray-100 !default;
 $list-group-active-color:           $component-active-color !default;