diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html index c0e0e40d9..baf2d0e7f 100644 --- a/content/practices/high-contrast/high-contrast-practice.html +++ b/content/practices/high-contrast/high-contrast-practice.html @@ -70,12 +70,10 @@
Inverting colors, increase contrast and color themes are the three main ways users can adjust the rendered colors of web content to improve contrast for their visual or learning disability. These options are set through operating system accessibility features. Not all of the options provide information for authors to adjust the rendering of their content based on user settings. The following table summarizes the features, operating systems and authors responsibility for improving accessibility.
- -Feature | @@ -87,58 +85,93 @@|||||
---|---|---|---|---|---|
Invert Colors | -All | +
+
|
- Invert colors is a simple transformation of the rendered colors by subtracting each RGB value from 255. This is a simple way of turning a lighter color theme into a darker color theme or visa-versa depending on the original styling of the content. Inverting colors can create a color palette that is easier for people with many types of visual impairments to perceive. It is the most prominent setting in operating system accessibility features. + Invert colors transforms colors by subtracting each RGB value from 255. + This is a simple way of turning a light color theme into a dark color theme or vice-versa. + It is a prominent feature in the accessibility settings of most operating systems. -Some examples of color inversion: +Examples of color inversion:
|
- Authors have no information to respond to when users enable invert colors option. Authors should insure their content meets the minimum color requirements of the Web Content Accessibility Guidelines (WCAG). + Browsers do not provide a way for authors to determine whether a user has the setting for invert colors enabled. + For invert colors to work well, ensure content meets the minimum color requirements specified by + Web Content Accessibility Guidelines (WCAG). | |
Increase contrast | -All |
- When the user enables increased contrast the CSS media query prefers-contrast set to more . The media query can be used by authors to provide a higher contrast color scheme, including switching to use system-colors CSS media types.
+
|
+ + Specifies that the user prefers contrast that is stronger than the default minimum. + Each operating system has its own approach to supporting this setting; there is no standard that specifies how much contrast should be increased when this setting is enabled. + A reasonable target for web content is specified by + WCAG 1.4.6: Contrast (Enhanced). |
- Authors can respond by adding media queries to their CSS to detect the prefers-contrast: more value that updates rendered text content and components to meet WCAG 1.4.6: Contrast (Enhanced) requirement.
- |
+ When this setting is enabled, the CSS media query |
System Color Theme | -All | +
+ System Color Theme + (AKA Light Mode and Dark Mode) + |
-
- Operating systems support The
- The
|
+
+ Operating systems support light and dark color themes.
+ They typically default to the light color theme.
+ Many people switch to the dark color theme in dark settings, e.g. at night, because it can make content easier to read or be less disruptive to other people.
+ However, people with certain visual disabilities prefer a dark color theme as their default.
|
- Authors can respond by adding media queries to their CSS to detect the prefers-color-theme: dark | light media queries by creating styles for dark text on a light background and light text on a dark background. The text content and components for both settings must meet WCAG 1.4.3: Contrast (Minimum) requirement.
+ The CSS media query prefers-color-theme identifies the current color theme by returning light or dark .
+ Develop styles for dark text on a light background and light text on a dark background and use this media query to apply the appropriate style.
+ Ensure the text content and components for both settings meet
+ WCAG 1.4.3: Contrast (Minimum).
|
Contrast Themes | -Windows 10 and 11 | +
+ Contrast Themes + (AKA High Contrast Mode) + |
+ Windows 10 and later. |
- Some operating systems accessibility features include support for high contrast and user customizable color themes.
- When a user selects a high contrast color theme the CSS media query forced-colors is set to active . The media query can be used by authors to include the use of system-color CSS Media Types so the content of the page adapts to the user color preferences.
+ This accessibility feature provides extra high contrast and user customizable color themes.
|
- Authors can respond by adding media queries to their CSS to detect the forced-colors: active media query by using currentcolor and system-color values to style user interface controls and custom widgets to the user preferences.
+ When a user selects a high contrast color theme, the CSS media query forced-colors is set to active .
+ Use currentcolor and system-color values to style user interface controls and custom widgets to the user preferences.
|