From 3102b4a3e9a7af8737b5330ccf5c6879022577b4 Mon Sep 17 00:00:00 2001 From: "Patrick H. Lauke" Date: Fri, 3 Jun 2022 10:42:49 +0100 Subject: [PATCH] Update some WCAG links, expand sass.md contrast explanation (#36489) --- scss/_functions.scss | 6 +++--- site/content/docs/5.2/components/dropdowns.md | 2 +- site/content/docs/5.2/customize/sass.md | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/scss/_functions.scss b/scss/_functions.scss index 883375bf81..855768bef2 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -177,9 +177,9 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003 @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05)); } -// Return WCAG2.0 relative luminance -// See https://www.w3.org/WAI/GL/wiki/Relative_luminance -// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests +// Return WCAG2.1 relative luminance +// See https://www.w3.org/TR/WCAG/#dfn-relative-luminance +// See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio @function luminance($color) { $rgb: ( "r": red($color), diff --git a/site/content/docs/5.2/components/dropdowns.md b/site/content/docs/5.2/components/dropdowns.md index 4565b5fdff..8b8514b95b 100644 --- a/site/content/docs/5.2/components/dropdowns.md +++ b/site/content/docs/5.2/components/dropdowns.md @@ -14,7 +14,7 @@ Dropdowns are built on a third party library, [Popper](https://popper.js.org/), ## Accessibility -The [WAI ARIA](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/WAI/PF/aria/roles#menu), but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus. +The [WAI ARIA](https://www.w3.org/TR/wai-aria/) standard defines an actual [`role="menu"` widget](https://www.w3.org/TR/wai-aria/#menu), but this is specific to application-like menus which trigger actions or functions. ARIA menus can only contain menu items, checkbox menu items, radio button menu items, radio button groups, and sub-menus. Bootstrap's dropdowns, on the other hand, are designed to be generic and applicable to a variety of situations and markup structures. For instance, it is possible to create dropdowns that contain additional inputs and form controls, such as search fields or login forms. For this reason, Bootstrap does not expect (nor automatically add) any of the `role` and `aria-` attributes required for true ARIA menus. Authors will have to include these more specific attributes themselves. diff --git a/site/content/docs/5.2/customize/sass.md b/site/content/docs/5.2/customize/sass.md index a80004e1bb..6215d1032d 100644 --- a/site/content/docs/5.2/customize/sass.md +++ b/site/content/docs/5.2/customize/sass.md @@ -215,9 +215,9 @@ In practice, you'd call the function and pass in the color and weight parameters ### Color contrast -In order to meet [WCAG 2.0 accessibility standards for color contrast](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), authors **must** provide [a contrast ratio of at least 4.5:1](https://www.w3.org/WAI/WCAG20/quickref/20160105/Overview.php#visual-audio-contrast-contrast), with very few exceptions. +In order to meet the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/TR/WCAG/) contrast requirements, authors **must** provide a minimum [text color contrast of 4.5:1](https://www.w3.org/TR/WCAG/#contrast-minimum) and a minimum [non-text color contrast of 3:1](https://www.w3.org/TR/WCAG/#non-text-contrast), with very few exceptions. -An additional function we include in Bootstrap is the color contrast function, `color-contrast`. It utilizes the [WCAG 2.0 algorithm](https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance) in a `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. +To help with this, we included the `color-contrast` function in Bootstrap. It uses the [WCAG contrast ratio algorithm](https://www.w3.org/TR/WCAG/#dfn-contrast-ratio) for calculating contrast thresholds based on [relative luminance](https://www.w3.org/TR/WCAG/#dfn-relative-luminance) in an `sRGB` color space to automatically return a light (`#fff`), dark (`#212529`) or black (`#000`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. For example, to generate color swatches from our `$theme-colors` map: