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 @@

Supporting High Contrast Settings

Introduction

- 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 @@

Button Switch Example with Selected Hi - - -

Other Examples using currentcolor keyword

+

Examples using currentcolor keyword

-

forced-colors Media Query

@@ -208,7 +203,6 @@

System Colors

-

Rating Slider Example

The 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.

@@ -269,6 +263,39 @@

Examples in using forced-colors

+
+

Testing for High Contrast Support

+ +

Testing for high contrast can be done in two ways

+ +

Operating System High Contrast Testing

+ + + +

Chrome High Contrast Testing

+ +

+ + + +

High Contrast Features

+ +

Add content

+ + +
+ +