Add checks to fix color contrast issues (#32085)

1 files changed, 9 insertions, 3 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index f67dcc6a1d..24fa2bd140 100644
--- 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