From f13138eefa8cfa9943483c51e9a2de58f7fb4cde Mon Sep 17 00:00:00 2001
From: Matt King
Date: Sun, 14 Apr 2024 22:09:03 -0700
Subject: [PATCH 001/130] Create starter page for high contrast practice.
---
.../high-contrast/high-contrast-practice.html | 37 +++++++++++++++++++
1 file changed, 37 insertions(+)
create mode 100644 content/practices/high-contrast/high-contrast-practice.html
diff --git a/content/practices/high-contrast/high-contrast-practice.html b/content/practices/high-contrast/high-contrast-practice.html
new file mode 100644
index 0000000000..a990aeb683
--- /dev/null
+++ b/content/practices/high-contrast/high-contrast-practice.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Supporting High Contrast Settings
+
+
+
+
+
+
+
+
+
+
+
Supporting High Contrast Settings
+
+
Editor's note: After content is complete and near ready for merge, add a heading and abstract to practices.html
+
+
+
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.
+
Many operating systems provide accessibility settings that enable users to specify high contrast preferences.
This section explains how to ensure components respect those preferences.
+
+
This section covers:
+
+
Using SVG graphics to create components whose rendering can adapt operating system color settings.
+
Using the forced-colors CSS media query for high contrast settings.
+
Using currentColor CSS data type for components consistency with the rendering of other components in high contrast settings.
+
Using <system-colors> CSS data types for consistency with the rendering of other components in high contrast settings.
+
-
-
section title
-
+
+
Operating System Color and High Contrast Settings
+
Mobile, tablet and desktop operating systems have accessibility features for users to change the colors used to render content, including the colors used to render content from web browsers. The features are found in the accessibility settings of the operating system. The following table highlights the major high contrast features in selected operating systems.
+
+
+
+
+
Operating System
+
Accessibility Features
+
+
+
+
+
Android
+
+
+
High contrast text
+
+
+
+
+
iPhone/iPad
+
+
+
Invert colors
+
Increase contrast
+
Display contrast
+
Reduce transparency
+
+
+
+
+
Apple macOS
+
+
+
Smart invert
+
Classic invert
+
Increase contrast
+
Display contrast
+
+
+
+
+
GNOME Desktop
+
+
+
Dark mode theme
+
High contrast setting
+
+
+
+
+
Microsoft Windows 10/11
+
+
+
Enable high contrast theme
+
Choose high contrast theme
+
User can define custom theme
+
+
+
+
+
+
+
+
+
forced-colors Media Query
+
+
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 change component colors to use operating system specified values using <system-colors> CSS data types.
+
+
+
+
SVG for Components
+
+
Bit-mapped images (e.g. .png, .jpeg) should not be used for components, since they cannot change their rendering based on forced-colors media query. SVG graphics on the other hand can respond to the forced-colors media query and scale smoothly as size of content is changed through zoom features of browsers.