From f1c0bc1349347f3d173c6b7ab795baf085acf698 Mon Sep 17 00:00:00 2001 From: Jon Gunderson Date: Mon, 28 Oct 2024 20:31:48 -0500 Subject: [PATCH] updated content --- .../css/switch-increase-contrast.css | 124 ++++++++++ .../high-contrast/high-contrast-practice.html | 229 +++++++++++++++--- .../{ => js}/high-contrast-practice.js | 6 +- 3 files changed, 329 insertions(+), 30 deletions(-) create mode 100644 content/practices/high-contrast/css/switch-increase-contrast.css rename content/practices/high-contrast/{ => js}/high-contrast-practice.js (99%) diff --git a/content/practices/high-contrast/css/switch-increase-contrast.css b/content/practices/high-contrast/css/switch-increase-contrast.css new file mode 100644 index 0000000000..d4cfe343e3 --- /dev/null +++ b/content/practices/high-contrast/css/switch-increase-contrast.css @@ -0,0 +1,124 @@ +button[role="switch"] { + display: block; + margin: 2px; + padding: 4px 4px 8px 8px; + border: 0 solid #005a9c; + border-radius: 5px; + width: 17em; + height: 3em; + text-align: left; + background-color: #e9e9e9; + color: #242424; +} + +button[role="switch"][aria-checked="true"] { + background-color: #eeeeee; + color: #000000; +} + +button[role="switch"][aria-checked="true"] .label { + color: #242424; +} + +button[role="switch"] .label { + position: relative; + top: -3px; + display: inline-block; + padding: 0; + margin: 0; + width: 10em; + vertical-align: middle; + color: #242424; +} + +button[role="switch"] svg { + display: inline-block; + width: 36px; + height: 20px; + position: relative; + top: 4px; +} + +button[role="switch"] svg rect { + fill: #a1a1a1; + stroke-width: 2; + stroke: #757575; +} + +button[role="switch"] svg circle.off { + display: block; + stroke: #757575; + fill: #ffffff; + fill-opacity: 1; +} + +button[role="switch"] svg circle.on { + display: none; +} + +button[role="switch"][aria-checked="true"] svg rect { + fill: #0051a4; + stroke: #061d3a; +} + +button[role="switch"][aria-checked="true"] svg circle.off { + display: none; +} + +button[role="switch"][aria-checked="true"] svg circle.on { + display: block; + stroke: #061d3a; + fill: #ffffff; + fill-opacity: 1; +} + +button[role="switch"] span.off { + display: inline-block; +} + +button[role="switch"] span.on { + display: none; +} + +button[role="switch"][aria-checked="true"] span.off { + display: none; +} + +button[role="switch"][aria-checked="true"] span.on { + display: inline-block; +} + +button[role="switch"]:focus, +button[role="switch"]:hover { + padding: 2px 2px 6px 6px; + border-width: 2px; + outline: none; + cursor: pointer; +} + + @media (prefers-contrast: more) { + + button[role="switch"] { + background-color: #eeeeee; + color: #000000; + } + + button[role="switch"] .label { + color: #000000; + } + + button[role="switch"] svg rect { + fill: #0051A4; + stroke: #061d3a; + } + + button[role="switch"] svg circle.off, + button[role="switch"] svg circle.on { + stroke: #061d3a; + fill: #ffffff; + } + + } + + +} diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html index 0d425eca9a..ff553e7e27 100644 --- a/content/practices/high-contrast/high-contrast-practice.html +++ b/content/practices/high-contrast/high-contrast-practice.html @@ -8,6 +8,9 @@ + + + @@ -26,11 +29,15 @@ padding-top: 0; } - #samples div.sample { + table.data td div.sample { height: 30px; width: 50px; border: 1px solid gray; } + .color, + .font { + font-family: monospace; + } @@ -47,23 +54,20 @@

Introduction

This section covers:

    -
  1. Understanding user agent features for adjusting the colors rendered by the user agent.
    2. +
  2. Understanding user agent features for adjusting the colors rendered by the user agent to improve contrast and readability.
  3. The benefits of using SVG graphics to create components whose rendering can adapt to contrast and theme settings.
    4. -
  4. Setting the forced-colors-adjust=auto CSS property on SVG elements.
    5. -
  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. -
  7. Using the forced-colors CSS media query for high contrast settings.
    8. -
  8. Using <system-colors> CSS data types for consistency with the rendering of other components in high contrast settings.
    9. -
  9. Using currentcolor value for inheriting the color property value of ancestors.
    10. +
  10. Using the CSS media queries support user color and contrast preferences (e.g. prefers-contrast, prefers-color-theme and forced-colors).
    11. +
  11. Using <system-colors> CSS data types for consistency with the rendering of other components.
    12. +
  12. Using currentcolor value for inheriting the color property value of text content that responds to user color and contrast preferences.
-

Understanding User Options For Adjusting Colors

+

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. These options are set through operating system accessibility features. Not all of the options provide information for authors to adjust the rendering of content based on user settings. The following table summarizes the features, operating systems and authors ability to detect the setting.

+

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 Color Adjustment Features

+

Operating System Contrast Adjustment Features

@@ -79,7 +83,7 @@

Operating System Color Adjustment Features

@@ -112,11 +116,11 @@

Operating System Color Adjustment Features

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

@@ -124,10 +128,10 @@

Operating System Color Adjustment Features

@@ -137,12 +141,12 @@

Operating System Color Adjustment Features

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.

+

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 black. Content styled as blue is rendered as a brown (e.g. a mixture of red and green). There are no media queries associated with identifying 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.

+

Authors support this setting by insuring their content meets WCAG 1.4.3: Contrast (Minimum) contrast requirements, including 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

+

Invert Color Example: Button Switch

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 some types of visual impairments to perceive. + 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.

Some examples of color inversion:

    @@ -89,17 +93,17 @@

    Operating System Color Adjustment Features

 - Authors have no information to respond to when users enable invert colors option. + 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).
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. + 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. - Authors can respond to the prefers-contrast: more media query and should ensure rendered text content meets WCAG 1.4.6: Contrast (Enhanced) requirement. + 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.
- Authors can respond to the prefers-color-theme: dark | light media query by creating styles for dark text on a light background and light text on a dark background. Text color contrast should meet WCAG 1.4.3: Contrast (Minimum) requirement. + 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.
Windows 10 and 11 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 switch to using system-color CSS Media Types so the content of the page adapts to the user color preferences. + 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. - Authors can respond to the forced-colors: active media query by using currentcolor and system-color values to style user interface controls and custom widgets. + 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.
@@ -166,16 +170,186 @@

Invert Color: Button Switch Example

Increase Contrast

-

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

+

When the increase contrast setting is is enabled the prefers-contrast media query changes from no-preference to more. The author should update the rendering of text content and components to meet WCAG 1.4.6: Contrast (Enhanced) requirement. If content already meets the enhanced requirement, the author may want to exceed the enhanced color contrast requirement.

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

+

Increase Contrast Example

+ +

The example shows how the color contrast was increased from 4.57 to 7 when the prefers-contrast: more is set. The example simulates the change on colors when the increased option switch is set to "on". If you enable operating system "increased contrast" feature the example will use be rendered in any state with the increased contrast values.

+ +
+ + + +
+ +

Increase Contrast Example Color Changes

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
prefers-contrastTextButton
BGTextCCRBGBorderFillCCR
no-preference + + #e9e9e9 + + + #242424 + 12.8 + + #a1a1a1 + + + #757575 + + + #ffffff + 4.6
+ more + + + #eeeeee + + + #000000 + 18.1 + + #0051A4 + + + #061d3a + + + #ffffff + 12.2
+ +

CSS Media Query Code

+ + 
+          
+  @media (prefers-contrast: more) {
+
+    button[role="switch"] {
+      background-color: #eeeeee;
+      color: #000000;
+    }
+
+    button[role="switch"] .label {
+      color: #000000;
+    }
+
+    button[role="switch"] svg rect {
+      fill: #0051A4;
+      stroke: #061d3a;
+    }
+
+    button[role="switch"] svg circle.off,
+    button[role="switch"] svg circle.on {
+      stroke: #061d3a;
+      fill: #ffffff;
+    }
+  }
+          
+
+ +

Testing Increase Contrast

+ +

Turn on the increase contrast feature for major operating systems and verify text and components color contrast ratios meet at least WCAG 1.4.6: Contrast (Enhanced) requirement.

+

System Color Theme (Light or Dark)

-

Wikipedia Page with Showing User Theme Options

+

The light and dark color are not designed specifically for accessibility, but there are many people with visual impairments who prefer support for the dark color theme. Both the light and dark color theme need to meet at least the WCAG 1.4.3: Contrast (Minimum) requirements to be beneficial to people with disabilities.

+ +

The following example illustrates how Wikipedia supports system color theme media query. The example includes showing the "Appearance" sidebar allowing the user to choose the light or dark theme and other rendering options for text size and column width.

+ +

System Color Theme Example: Wikipedia Page

@@ -206,7 +380,7 @@

Wikipedia Page with Showing User Theme
-

Forced Colors

+

Contrast Themes (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.

@@ -355,7 +529,7 @@

Summary of SVG vs. Bit-Mapped Features

- + @@ -395,7 +569,8 @@

Chrome High Contrast Options

- + + diff --git a/content/practices/high-contrast/high-contrast-practice.js b/content/practices/high-contrast/js/high-contrast-practice.js similarity index 99% rename from content/practices/high-contrast/high-contrast-practice.js rename to content/practices/high-contrast/js/high-contrast-practice.js index 64d6ef2144..dd7ae944b5 100644 --- a/content/practices/high-contrast/high-contrast-practice.js +++ b/content/practices/high-contrast/js/high-contrast-practice.js @@ -820,15 +820,15 @@ window.addEventListener('load', () => { div.style.backgroundColor = v.value; tds.appendChild(div); const divHex = document.createElement('div'); - divHex.style.fontFamily = 'monospace'; + divHex.className = 'color'; tds.appendChild(divHex); tr.appendChild(tds); const tdRGB = document.createElement('td'); - tdRGB.style.fontFamily = 'monospace'; + tdRGB.className = 'font'; tdRGB.textContent = '??'; tr.appendChild(tdRGB); const tdHex = document.createElement('td'); - tdHex.style.fontFamily = 'monospace'; + tdHex.className = 'font'; tdHex.textContent = '??'; const tdd = document.createElement('td'); tdd.textContent = v.desc;
Invert Colors