From fdb7459689bbc68f4d7d35e6556389c305fedfd9 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Thu, 17 Oct 2024 16:39:06 -0500 Subject: [PATCH] editing practice --- .../high-contrast/high-contrast-practice.html | 159 +++++++++++------- 1 file changed, 97 insertions(+), 62 deletions(-) diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html index cef2bf32b..0d425eca9 100644 --- a/content/practices/high-contrast/high-contrast-practice.html +++ b/content/practices/high-contrast/high-contrast-practice.html @@ -48,9 +48,10 @@

Introduction

This section covers:

  1. Understanding user agent features for adjusting the colors rendered by the user agent.
    2. -
  2. Using SVG graphics to create components whose rendering can adapt operating system contrast and theme settings.
    3. +
  3. The benefits of using SVG graphics to create components whose rendering can adapt to contrast and theme settings.
  4. Setting the forced-colors-adjust=auto CSS property on SVG elements.
  5. Using the prefers-contrast CSS media query for high contrast settings.
    6. +
  6. Using the prefers-color-theme CSS media query to support light and dark user settings.
  7. Using the forced-colors CSS media query for high contrast settings.
  8. Using <system-colors> CSS data types for consistency with the rendering of other components in high contrast settings.
  9. Using currentcolor value for inheriting the color property value of ancestors.
    10. @@ -134,9 +135,14 @@

    Operating System Color Adjustment Features

    -

    Invert Color

    +

    Invert Colors

    -

    Button Switch Example for Invert Colors

    +

    The invert colors setting is a simple transformation of colors used to render content to the opposite color. For example, content rendered as white is changed to render as black. A mostly blue content is rendered as a brown (e.g. a mixture of red and green). There is no media query associated with the invert color setting.

    + +

    Authors support this setting by insuring their content meets WCAG 1.4.3: Contrast (Minimum) contrast requirements, including the features of custom components. The following example illustrates how the switch role example is rendered on macOS when invert colors is disabled and enabled.

    + + +

    Invert Color: Button Switch Example

    @@ -157,8 +163,17 @@

    Button Switch Example for Invert Colo

    +
    +

    Increase Contrast

    + +

    When the increase contrast setting is is enabled the prefers-contrast media query changes from no-preference to more.

    + +

    Note: Operating systems that support the forced-colors media query will set prefers-contrast to custom when the forced-colors is set to active.

    + +
    +
    -

    System Color Theme

    +

    System Color Theme (Light or Dark)

    Wikipedia Page with Showing User Theme Options

    @@ -189,66 +204,9 @@

    Wikipedia Page with Showing User Theme

    -
    -

    SVG for Components

    - -

    Bit-mapped images (e.g. .png, .jpeg) should not be used for components, since their rendering cannot be changed based on user color theme settings. SVG graphics can respond to the forced-colors CSS media query and supports the use of currentcolor value for color properties. An additional advantage of SVG graphics is the smooth scaling of the graphics as the size of content adjusted using browser zoom features. SVG elements can also adapt to a wide variety of screen sizes and load faster due to their smaller size than equivalent bit-mapped images.

    - -

    Note: Be sure to include forced-color-adjust=auto CSS property on SVG elements, due to inconsistencies in browsers setting the default value to auto.

    - -
    - -
    -

    Contrast Theme

    - - - -

    currentcolor Keyword

    - -

    The currentcolor keyword provides a means for components to use the color value of ancestors to set the color properties of an element. When the user chooses a high contrast setting the browser changes the color and background-color values of text content. The currentcolor value is set to the text color for use in setting the color of other properties including: border and outline on HTML elements, and stroke and fill properties on SVG elements. Note: There is no equivalent value for using the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color to be visible.

    - -

    Using currentcolor is the most popular technique in the ARIA APG examples for supporting user theme and high contrast settings.

    - -

    Button Switch Example

    - -

    The Button Switch Example uses currentcolor value to style the SVG rect elements used as the switch container and to indicate the on and off states. Current color applied to the stroke and fill properties of the rect elements. The following table shows how the graphical rendering changes for some high contrast options.

    - -

    Button Switch Example with Selected High Contrast User Settings in Windows 11

    - - - - - - - - - - - - - - - - - - - - - -
    SettingScreen Shot
    Contrast Theme: none (default)Screen shot of switch example with no contrast theme applied
    Contrast Theme: Night skyScreen shot of switch example with night sky contrast theme applied
    Contrast Theme: DesertScreen shot of switch example with desert contrast theme applied
    - -

    Examples using currentcolor keyword

    - -
    -

    forced-colors Media Query

    +

    Forced Colors

    The forced-colors CSS media query provides a means for components to use the color preferences of people with visual impairments. When the user chooses a high contrast setting in their operating system, browsers set forced-colors property to active. CSS media queries can change component colors to use operating system specified values using <system-colors> CSS data types. The advantage of using forced-colors over currentcolor is the ability to set a background color and to uniquely define colors for borders, outlines and text content.

    @@ -330,6 +288,83 @@

    Examples in using forced-colors

    + +
    +

    currentcolor Keyword

    + +

    The currentcolor keyword provides a means for components to use the color value of ancestors to set the color properties of an element. When the user chooses a high contrast setting the browser changes the color and background-color values of text content. The currentcolor value is set to the text color for use in setting the color of other properties including: border and outline on HTML elements, and stroke and fill properties on SVG elements. Note: There is no equivalent value for using the background color, so when using this technique it is important for the background of the element to be transparent to allow the background color to be visible.

    + +

    Using currentcolor is the most popular technique in the ARIA APG examples for supporting user theme and high contrast settings.

    + +

    Button Switch Example

    + +

    The Button Switch Example uses currentcolor value to style the SVG rect elements used as the switch container and to indicate the on and off states. Current color applied to the stroke and fill properties of the rect elements. The following table shows how the graphical rendering changes for some high contrast options.

    + +

    Button Switch Example with Selected High Contrast User Settings in Windows 11

    + + + + + + + + + + + + + + + + + + + + + +
    SettingScreen Shot
    Contrast Theme: none (default)Screen shot of switch example with no contrast theme applied
    Contrast Theme: Night skyScreen shot of switch example with night sky contrast theme applied
    Contrast Theme: DesertScreen shot of switch example with desert contrast theme applied
    + +

    Examples using currentcolor keyword

    + +
    + +
    +

    SVG Graphics versus Bit-Mapped Images for Components

    + +

    Limitations of Bit-Mapped Images

    + +

    The pixels used in bit-mapped images (e.g. .png, .jpeg) cannot respond to changes in media queries changes based on user contrast and theme preferences. Low resolution images also do not scale smoothly when the browser zoom feature is used to increase the size of rendered content. These limitations make bit-mapped images a problem for accessibility of custom components for people with visual impairments.

    + +

    Note: Bit-mapped images used for components should meet WCAG 1.4.3: Contrast (Minimum) requirement. + +

    Benefits of SVG Graphics

    + +

    SVG graphics can respond to contrast related media queries including prefers-contrast, prefers-color-theme and forced-colors to change the styling of components. SVG provide smooth scaling of the graphics as the size of content adjusted using browser zoom features. SVG elements can also adapt to a wide variety of screen sizes and load faster due to their smaller size than equivalent bit-mapped images.

    + +

    Note: Be sure to include forced-color-adjust=auto CSS property on SVG elements, due to inconsistencies in browsers setting the default value to auto.

    + +

    Summary of SVG vs. Bit-Mapped Features

    + + + + + + + + + + + +
    Invert Colors
    + +
    +

    Testing for Contrast Theme Support