diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html index 8fe4663e2e..395e6f4bcb 100644 --- a/content/practices/high-contrast/high-contrast-practice.html +++ b/content/practices/high-contrast/high-contrast-practice.html @@ -32,9 +32,7 @@
- While all content and components should meet minimum contrast requirements by default, it is also possible to build components that automatically provide high contrast for users who need more than minimum contrast. - Many operating systems provide accessibility settings that enable users to specify high contrast preferences. - This section explains how to ensure components respect those preferences. + People with many types of visual impairments need to override the default colors used to render web content to make content perceivable to them. Operating system provide settings to enable users to choose color themes or preset high contrast themes that are useful to them. For web content to be compatible with high contrast settings, authors must ensure their content adapts to user settings. This section explains how to ensure components respect those preferences and verify compatibility through testing.
This section covers:
@@ -172,9 +170,7 @@currentcolor
keywordcurrentcolor
keywordcurrentcolor
ke
forced-colors
Media QueryThe Rating Slider Example uses CSS forced-colors: active
media query to change the styling of SVG elements used for the rating scale, thumb and labels. The buttontext
system color value is used for stroke
and fill
properties of the range and thumb elements and canvas
system color is used for the label elements (e.g. "Extremely Unsatisfied" and "Extremely Satisfied"). The following table shows how the graphical rendering changes for some high contrast options.
forced-colors
Testing for high contrast can be done in two ways
+ +prefers-color-scheme: dark
and forced-colors: active
Add content
+ + +