This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle
The Windows operating system has a native High Contrast Mode which replaces colors with defaults or user-set values. It's popular with users who have low vision or photosensitivity.
The themes use black or white backgrounds, and color-code different element types. It's worth pointing out right away that CSS styles which use the **background** property don't show up in this mode. We'll learn how to maneuver around this shortly.
How to enable High Contrast mode
High Contrast Mode is built into Windows as a native accessibility setting. It can be enabled a few different ways in Windows 10, and be customized:
-
Left Alt+Left Shift+Print Screen - From the sign-in screen: Ease of Access > High Contrast
Use High Contrast Mode with Edge or Internet Explorer (or other Microsoft browsers that are released). It works with Firefox, but the effects are not always consistent or usable. High Contrast does not work with Chrome.
Review this Windows support document more instructions and guidance for other versions of Windows.
What to look for
Testing with High Contrast is another way to find issues with color, since it lets you easily check for:
- Content, icons, or other indicators that relies on color alone to convey information
- Elements that rely on background colors alone to be distinguished from other elements, such as buttons or modals
- Keyboard focus styles or error states that rely on color alone; common when these states rely on a change in color alone or on showing and hiding a border
- Transparent images or SVGs that aren't visible against black or white backgrounds
Solving for High Contrast
There are usually a few simple improvements that can be made to better support High Contrast mode users.
- Give elements that rely on a background color a transparent border. This can be done with a regular CSS property (
border: 1px solid transparent;) and will only be visible in High Contrast mode. - Use the default browser focus
outlineto show the keyboard focus state, instead of relying on aborder. - If a CSS border doesn't fix the issue, or displaying a specific color or focus style in High Contrast mode is needed, the
-ms-high-contrastvendor prefix can be used to apply styles only when a person is using High Contrast. Remember that people use High Contrast to reduce the number of colors and to customize the interface, so use High Contrast-specific styles sparingly. Learn more about the limitations of-ms-high-contrast. - For transparent graphics, give light graphic files a dark border and dark graphics a light border so they can be more easily distinguished against black or white backgrounds.
WCAG success criteria
This comes back to 1.4.1 Use of Color which states:
"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."
Resources:
- Microsoft Support: Use high contrast mode
- MSDN: -ms-high-contrast media feature
- Windows High Contrast Mode: the limited utility of -ms-high-contrast
- Accessible SVGs in High Contrast Mode
This content originally appeared on Scott Vinkle - Blog and was authored by Scott Vinkle
Scott Vinkle | Sciencx (2019-06-24T13:41:00+00:00) What is High Contrast Mode?. Retrieved from https://www.scien.cx/2019/06/24/what-is-high-contrast-mode/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.