diff --git a/scss/_variables.scss b/scss/_variables.scss index cac9febec6..76394c2259 100644 --- 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 fc8a8dc61f..79eaefbce2 100644 --- 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