mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00
Code Activity

Use WCAG contrast algo (#30168)

Browse Source
This commit is contained in:
Gaël Poupard
2020-03-23 18:03:56 +01:00
committed by GitHub
parent 2e150e722a
commit 03908ea37a
7 changed files with 155 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/4.3/getting-started/theming.md
+10 -4
View File
@@ -191,14 +191,14 @@ In practice, you'd call the function and pass in two parameters: the name of the
#### Color contrast
An additional function we include in Bootstrap 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-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` 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:
{{< highlight scss >}}
@each $color, $value in $theme-colors {
.swatch-#{$color} {
color: color-yiq($value);
color: color-contrast($value);
}
}
{{< /highlight >}}
@@ -207,7 +207,7 @@ It can also be used for one-off contrast needs:
{{< highlight scss >}}
.custom-element {
color: color-yiq(#000); // returns `color: #fff`
color: color-contrast(#000); // returns `color: #fff`
}
{{< /highlight >}}
@@ -215,10 +215,16 @@ You can also specify a base color with our color map functions:
{{< highlight scss >}}
.custom-element {
color: color-yiq($dark); // returns `color: #fff`
color: color-contrast($dark); // returns `color: #fff`
}
{{< /highlight >}}
{{< callout info >}}
##### 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.
{{< /callout >}}
#### Escape SVG
We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images.