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

Introduction

-

Understanding User Options For Adjusting Contrast

- -

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.

- -

Operating System Contrast Adjustment Features

- +

User Options for Adjusting Colors and Contrast

+

The following table summarizes operating system settings that enable users to adjust color themes and increase contrast as well as authoring practices for supporting those settings in web content.

+
+ @@ -87,58 +85,93 @@

Operating System Contrast Adjustment Features

- + - + + When this setting is enabled, the CSS media query prefers-contrast is set to more. + Develop a higher contrast color scheme and use this media query to determine when to enable it. + This can also include switching to use system-colors CSS media types. + - - + + - - + +
Operating System Contrast Adjustment Features
Feature
Invert ColorsAll +
    +
  • macOS
  • +
  • Windows
  • +
  • iOS
  • +
  • Android
  • +
+

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

    -
  • rgb(255,255,255) is rendered as rgb(0,0,0)
  • -
  • rgb(165, 42, 42) is rendered as rgb(90,213,213)
  • -
  • rgb(220, 220, 220) is rendered as rgb(35,35,35)
  • +
  • rgb(255, 255, 255) is rendered as rgb(0, 0, 0)
  • +
  • rgb(165, 42, 42) is rendered as rgb(90, 213, 213)
  • +
  • rgb(220, 220, 220) is rendered as rgb(35, 35, 35)
- 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 contrastAll - 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. +
    +
  • macOS
  • +
  • Windows
  • +
  • iOS
  • +
  • Android
  • +
+
+ 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. -
System Color ThemeAll + System Color Theme
+ (AKA Light Mode and Dark Mode) +
-

- Operating systems support light and dark color themes. -

-

The light color theme is typically the default on most operating systems. Authors identify this preference when the CSS media query prefers-color-theme is set to light. -

-

- The dark color theme is associated with lower power consumption, less eye strain and considered easier to read or less disruptive in dark settings (e.g. night time). People with some types of visual impairments prefer to use the dark color theme as their default. When the user selects the dark color theme the CSS media query prefers-color-theme is set to dark. -

+
    +
  • macOS
  • +
  • Windows
  • +
  • iOS
  • +
  • Android
  • +
+
+ 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 ThemesWindows 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.