Authors: Rossen Atanassov, Alison Maher
Last Updated: 2019-01-18
This document is intended as a starting point for engaging the community and standards bodies in developing collaborative solutions fit for standardization. As the solutions to problems described in this document progress along the standards-track, we will retain this document as an archive and use this section to keep the community up-to-date with the most current standards venue and content location of future work and discussions.
- This document status: ARCHIVED
- Current venue: W3C CSS Working Group | w3c/csswg-drafts
- Current version:
High contrast is a Windows accessibility feature intended to increase the readability of text through color contrast. Individuals with low vision may find it more comfortable to read content when there is a strong contrast between foreground and background colors. High contrast is a useful feature in increasing the readability of screen-based text for such users.
The Windows platform provides built-in high contrast color themes such as the more popular "black-on-white" and "white-on-black" themes. Besides the default themes, users can customize the colors and create their own themes. Applications can make use of these color themes and propagate them into their content model. In the case of the web browser, high contrast colors are propagated to website pages as a set of user agent styles, thus increasing readability of the text and allowing a coherent experience across the Windows OS and various applications.
Microsoft Edge and IE are currently the only browsers to support the high contrast feature using Windows high contrast themes. Many of the features described in this document were first shipped in 2012 with IE 10 and continue to use the -ms- vendor prefix for names and values.
When high contrast is currently enabled in Chrome, a popup is displayed prompting the user to install the High Contrast extension. This extension uses CSS/SVG filter effects overlaid on the entire webpage using its own predefined themes. The advantage of enabling high contrast in the core platform, in comparison to the extension-based approach, is that it provides a more seamless experience for users with the rest of the Windows OS. This includes not just the browser-context, but also other Chromium-powered applications.
- User enables high contrast on their Windows device.
- User opens the Chrome browser, and the chosen high contrast theme ("white-on-black" in this case) is used throughout their entire browsing experience.
- User turns high contrast off.
- The opened browser is dynamically updated to use the original site-defined colors.
In order to allow developer defined high contrast rules for webpages, a high contrast media query type would be added called high-contrast. This CSS media query type is currently supported by Microsoft Edge and IE. If a high-contrast media query evaluates to true, any styles defined within that media query will be used when in high contrast and will not be overridden by the high contrast feature.
| Value | Description |
|---|---|
| active | The subsequent style rules will be applied when high contrast is enabled under any theme, custom or not. |
| black-on-white | The subsequent style rules will be applied when high contrast is enabled under the black-on-white color theme. |
| white-on-black | The subsequent style rules will be applied when high contrast is enabled under the white-on-black color theme. |
<style>
@media (high-contrast: active) {
p { color: red; }
}
@media (high-contrast: black-on-white) {
p { color: blue; }
}
@media (high-contrast: white-on-black) {
p { color: green; }
}
body {
color: orange;
}
</style>
<body>
<p>Some Text</p>
<body>In the HTML code snippet above, "Some Text" will appear orange when high contrast is disabled. When high contrast is enabled under the "black-on-white" high contrast color scheme, "Some Text" will appear blue. "Some Text" will appear green when high contrast is enabled under the "white-on-black" high contrast color scheme. In any other high contrast color scheme (for example, under a custom high contrast theme), "Some Text" will appear red.
To provide readability between foreground and background colors, high contrast color schemes would override defined webpage styles for the following CSS properties:
background-colorcolorborder-bottom-colorborder-top-colorborder-left-colorborder-right-colorbox-shadowcolumn-rule-coloroutline-colortext-shadow-webkit-tap-highlight-colorbackground-image(only in the case of text/date/file input control types, as well as forselect,option, andoptgroupHTML tags)
To allow for further developer customization of the high contrast feature, a CSS property, high-contrast-adjust, would be added. This CSS property type is currently supported by Microsoft Edge and IE. This property can be used to override the effects of high contrast.
| Value | Description |
|---|---|
| auto | Indicates that the applicable CSS styles will be overridden when high contrast is enabled. |
| none | Indicates that the applicable CSS styles will not be overridden when high contrast is enabled. |
<style>
body {
high-contrast-adjust: none;
color: orange;
}
</style>
<body>
<p>Some Text</p>
<body>In the HTML code snippet above, "Some Text" will appear orange whether or not high contrast is enabled because high-contrast-adjust is set to none, effectively preventing high contrast from affecting its color.
As mentioned previously, high contrast color schemes work by overriding user defined webpage styles for various CSS properties in order to ensure readability. The process model for these high contrast overrides is as follows:
Given an element and a declaration from a CSS rule whose selector matches that element, the application of that declaration will be suppressed if all of the following conditions are met:
-
The declaration is for a CSS property in the set of properties that are adjusted for high contrast (as defined in CSS Properties)
-
High contrast mode is enabled in the host environment
-
The computed value of
high-contrast-adjuston the element isauto -
The rule is not contained (directly or indirectly) inside an
@mediablock matching thehigh-contrastmedia feature -
The rule is not defined in the default UA style sheet
If all of the above conditions are met, the computed color value of the CSS property is overridden by a system color value.
High contrast relies on system color keywords to fetch the appropriate theme colors, which are deprecated from the CSS Color standard in both Level 3 and Level 4. Blink currently does have support for these keywords, but they're currently mapped to hard-coded values instead of being plumbed through to the system color API. There is a derived class LayoutThemeWin, but it currently doesn't add any functionality for this. Functionality can be added here to support the required system color keywords.
In addition to existing CSS system color keywords, a new system color keyword would be added called hotlight that defines the system color for hyperlinks. It is important to track and store this system color because a developer might choose to unset high contrast styles for an ancestor of a link, but the high contrast link styles for descendent links must be preserved.
This system color keyword is currently supported by Microsoft Edge and IE. On Windows, the value for hotlight should map to the COLOR_HOTLIGHT system color. On other platforms, it should map to the default color used for links.
<style>
a:link {
color: hotlight;
}
</style>The goal of high contrast is to ensure a certain level of contrast between foreground and background colors. A problem arises with images. If text lies atop an image, altering the color of the text in high contrast will not guarantee its readability. One option would be to override images to allow text readability. This solution, however, is not an ideal one, as it can alter the context of a webpage for users under high contrast.
Instead, a preferred solution is to draw a so-called "readability backplate" behind all text to ensure contrast for text lying above images. As illustrated in the screenshots below, adding a backplate behind text in high contrast can drastically increase its readability. This solution is currently used in Microsoft Edge to ensure the readability of text in high contrast.
This backplate does not replace the background of an element, but rather is drawn on an intermediary layer:
As the diagram demonstrates, an element's text content is rendered using the WindowText system color and a backplate with a Window system color fill is drawn behind the text. These are then layered on top of the element's background (with background-color being filtered out). In the case of links, the text would instead use the appropriate high contrast link color.
Should the high contrast readability backplate be customizable for developers? In other words, should there be a similar high-contrast-backplate CSS property to allow certain styles of the backplate to be customized?
- CSS Properties that could apply:
padding,border-radius,opacity.
In order to support existing content, we will need to add an alias for -ms- properties and values to our implementation. Is this an acceptable solution?
Is hotlight an appropriate name for the system color keyword for hyperlinks, or would a more neutral name such as link be preferred?