From 32868be36d6188599328f73557f403d2c85e513c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael.poupard@orange.com> Date: Tue, 18 Feb 2020 12:03:36 +0100 Subject: [PATCH] docs(contrast): improve doc about WCAG contrast algo used in color-yiq() --- scss/_variables.scss | 3 ++- site/docs/4.4/getting-started/theming.md | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/scss/_variables.scss b/scss/_variables.scss index 90895548c9..a6155932d2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -117,7 +117,8 @@ $chevron-icon-active: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000 // Set a specific jump point for requesting color jumps $theme-color-interval: 8% !default; -// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255. +// 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 $yiq-contrasted-threshold: 4.5 !default; // Customize the light and dark text colors for use in our YIQ color contrast function. diff --git a/site/docs/4.4/getting-started/theming.md b/site/docs/4.4/getting-started/theming.md index fb595f719d..31d7fdeac4 100644 --- a/site/docs/4.4/getting-started/theming.md +++ b/site/docs/4.4/getting-started/theming.md @@ -195,7 +195,7 @@ Additional functions could be added in the future or your own custom Sass to cre #### Color contrast -An additional function we include in Boosted is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes. +An additional function we include in Bootstrap is the color contrast function, `color-yiq`. 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` colorspace to automatically return a light (`#fff`) or dark (`#111`) 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: @@ -223,6 +223,13 @@ You can also specify a base color with our color map functions: } {% endhighlight %} +{% capture callout %} +##### Accessibility + +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. +{% endcapture %} +{% include callout.html content=callout type="info" %} + #### Escape SVG We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE.