Alternative themes (high contrast, dark mode)

[shawna-slh]

[Content below from Boomhika] 15 Feb 2022

User Needs

Glare Sensitivity: I’m very sensitive to bright light. Looking at a white computer screen is painful and nearly impossible to read. I often end up getting headaches. I use “dark mode” with the background dark and the text not bright. Some websites have bright background images that don’t change in dark mode, so I can’t even read the page.
[screen shot example]

Low Contrast Sensitivity: I can’t see text unless it’s very different from the background, and it’s getting worse as I get older. My doc calls it low contrast sensitivity. I use “high contrast mode” so the text really stands out.
In some websites, some elements are not visible in high contrast mode.
[screen shot example]

Examples

Social Media Icons Visible in Default Display Settings

Social Media Icons Disappear in High Contrast Setting

Websites with Bright background Images

Description

The purpose of an alternative theme is to maximize readability and legibility. The default display settings which typically include darker text on a lighter background is very strenuous to read for many individuals with vision impairments. A recent survey conducted by WebAIM on users with low vision indicate that 51.4% of respondents report using some type of high contrast mode, with the majority using light text on a dark background. Other users prefer using low contrast settings for better comprehension and/or readability. Thus alternative themes help users to:

• reduce eye strain, avoid headaches and migraines, and facilitate higher productivity as they enable users to have the control over accessing information and consuming web content in their preferred color schemes.
• focus on the task at hand instead of looking for third party extensions or other alternatives. It helps them to save their time and unnecessary frustration.

How We Can Address This?

• Avoid box shadows: A box shadow that adds shadow effects around the frame of a web element or or content that appears on top of other elements on the page is typically used by developers to draw users’ attention. However, when the display is switched to dark mode or other alternative themes, the box shadow which is used to denote a selected state may be lost. Stroke width, border, bold, and underline are not likely to get overridden and may be used in place of box shadows.
• Use Semantic Structure: Use semantic structure in addition to visual presentation in order to communicate critical information (e.g. use of the em and strong elements in HTML)
• Use currentcolor CSS Keyword: Due to their flexibility with any display type, high resolution, and small file size, Scalable Vector Graphics or SVGs are increasingly being used to create icons and different web elements. The SVG Fill and Stroke properties are exceptions to the fact that Windows High Contrast Mode overrides all color schemes. This is particularly problematic when SVGs are used to convey meaningful information while the high contrast mode is on.
• To address this issue, the currentcolor CSS keyword can be used to define the value of the text color property which can be overridden by the high contrast mode. This is generally an effective approach if we want to make SVG icon color match the user-defined text colors as it eliminates the need to define fill and color separately or update fill when the text color is changed.
• Use Media Queries: Media queries allow authors to test and query values or features of the user agent or display device, independent of the document being rendered. They are used in CSS to conditionally apply styles to a document, and in various other contexts and languages, such as HTML and JavaScript. For instance, the prefers-color-scheme media query can be used to style elements with custom colors or images in dark mode.

Support

Different browsers and operating systems have different levels and scope for supporting dark themes. For example, Microsoft Edge has a built in dark theme that can be activated through the system preferences. On the other hand, Safari does not offer its own dark mode but supports the MacOS dark theme. Mozilla Firefox follows the color schemes of the users’s operating system by default but also offers a dark theme option that can be enabled through extensions and Themes option on the browser settings. Similarly, Google Chrome supports the color schemes of a users’ operating system and offers additional user color preferences through personalization option on the advanced settings menu.

Related WCAG

SC 1.4.1 (Use of Color)
SC 1.4.8 (Visual Presentation)

Related UAAG

UAAG 2.0 1.4.5 Default to platform text settings: https://www.w3.org/TR/2015/NOTE-UAAG20-20151215/#gl-text-config

Related Resources

Google Chrome Dark Mode
https://support.google.com/chrome/answer/9275525?hl=en&co=GENIE.Platform%3DDesktop

Microsoft Edge Dark Theme
https://support.microsoft.com/en-us/microsoft-edge/use-the-dark-theme-in-microsoft-edge-9b74617b-f542-77ed-033b-1a5cfb17a2df

Mozilla Firefox
https://addons.mozilla.org/en-US/firefox/addon/dark-mode-webextension/

Mac OS Dark Mode
https://support.apple.com/en-us/HT208976

Windows OS High Contrast Mode
https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025

[mraccess77]

Users that benefit

• Users who are glare or contrast sensitive

Other comments

• High contrast mode is different but share similarities with dark mode.
• Some browsers keep background images while others remove them.
• Edge even put a box around text that overlays background images (example here https://labs.levelaccess.com/index.php/Background_color_and_image).
• Background images and images don't invert unless they have transparent portions or are SVGs designed to follow currentColor (more info needed).

[mraccess77]

Need to include dark mode, low contrast, and high contrast (not just light on dark) modes.

[Myndex]

WCAG 2 contrast math is specifically faulty in dark colors, making it unsuitable for calculating contrast for dark colors.

In December I released Bridge PCA which is fully backwards compatible to WCAG 2, but using APCA technology, and that makes it very suitable for calculating contrast for dark mode.

https://www.myndex.com/BPCA/

[mraccess77]

For "what to do" our guidance may need to be technology agnostic type guidance like the following:

• Do not rely on presentations elements to solely communicate properties like state as they may disappear in different themes such as box shadows. for example, stroke width, border, bold, underline are likely to not get overridden while other things like shadows and background colors may go away.
• In HTML, create style sheets that support multiple themes such as dark or light mode
• Construct content in ways assuming that you may not know if an alternative theme such as high contrast mode is enabled or not
• Consider all aspect of standards including communicate properties and states such as the focus indicator, selected state, inactive states, etc. (Certain properties such as disabled in HTML may automatically rendered differently)
• Create content that does not rely on background images that may disappear in some themes
• Use techniques such as SVG (curentColro) that can support alternative themes rather than raster images
• Use semantic structure in addition to presentation to communicate information (e.g. use of the em and strong elements in HTML).
• Transparent images can cause problems and could replace.

Look at group, how long should the list be? Avoid linking to outside resources.
Illustrate with examples.
Should discuss the default approach of using technique that just work without additional media queries but queries could be used to go beyond or if you want to control experience of if default doesn't work.

[shawna-slh]

Based on discussions in the last meeting, here is an idea for the User Needs section.

User Needs

I’m very sensitive to bright light. Looking at a white computer screen is painful and nearly impossible to read. I use “dark mode” with the background dark and the text not bright.

Some websites have bright background images that don’t change in dark mode, so I can’t even read the page.

[screen shot example]

---

I can’t see text unless it’s very different from the background, and it’s getting worse as I get older. My doc calls it low contrast sensitivity. I use “high contrast mode” so the text really stands out.

In some website site, some elements are not visible in high contrast mode.

[screen shot example]

[mraccess77]

Combine how it helps into description and have 1 section description. How it helps should be about the user - not the tester. Mention the 3 groups low contrast for glare sensitive, high contrast for though with low contrast perception, and alternative themes for people with migraine or other disabilities that require specific colors. This could be a short section and cover more details of what was in user needs.

[mraccess77]

Getting started should be merged into What do Do.

[mraccess77]

In general remove resources unless they are advice from WAI or browser vendor.

[mraccess77]

Please add UAAG references back https://www.w3.org/TR/UAAG20/. Thank you!

[sdw32]

Hi all, suggested text below for the 'what to do' section that I wrote just after our discussion on 17/2/22. Happy to try and describe the examples more if they make no sense!

WHAT TO DO

Basic:

• Avoid rasterised images (i.e. PNG, JPG) with large areas of plain background. Background colours in rasterised images cannot be altered by the theme, so should only be used where absolutely necessary, and should be as minimalist as possible. Text should be rendered by HTML rather than flattened into the image (possible examples like the example Bhoomika found, a photo plus some text with a white background around everything, versus the photo close-cropped and the text created in HTML and positioned via css, so both foreground and background of text can change by dark mode, and the area of bright background is much more minimalist
• Avoid PNG with transparent backgrounds. When the theme changes the background colour, details on these images may become impossible to perceive. The background colour should instead be forced to white (noting the above guidance to avoid rasterised images with large areas of plain background!)
• Avoid using CSS background-images. These will be lost when the background is forced by the theme.
• Avoid using background colours and/or drop shadows as the sole indicator of states, like focus, mouse-over (i.e. :hover), active or inactive. When alternative themes are used, all background effects will disappear, and all background colours will become universal and dictated by the theme, so these differentiations will be lost. Although it remains helpful to use background colours to indicate state, additional graphical effects should also be used. For example, the accompanying text could additionally become more bold or underlined, or line thicknesses can change, or lines can appear or disappear. (Example showing a button on a page where mouseover hover is indicated by drop shadow and a slight change in background colour, and an image showing how this looks when dark theme is used)

Advanced
Advanced developers may want enhanced control of the appearance of text and graphics, which are sensitive to alternative themes. This is possible via:

• Advanced use of SVG images and the CSS currentcolour property
• Advanced use of media queries, like 'prefers-color-scheme'

[Myndex]

Everything here is presented in the spirit of opening discussion on various points indicated.

Organizational issues

In another case of the left-hand not knowing what the right-hand is doing due to an organization being large with no formal support of a liaison structure:

https://www.w3.org/TR/css-color-adjust-1/

I'm not sure why is there's a "castle moat" in-between accessibility and CSS, when they both should be part of the same set of standards, actually. Perhaps the point is increasingly moot as standards are moving away from this organization over to WHATWG...? I really don't know where to spend my time and resources at this point.

Technical issues

There is at present no standardization in terms of how to invert a light mode into a dark mode, and useful versus not useful applications of increased contrast. Many of the current implementations I've seen for inverting polarity for instance have some bizarre ideas that are far from best practices. Here are some general thoughts, mostly relating to automated polarity inversion:

Polarity considerations relating to color and lightness/darkness

• With an automatic polarity reversal, hue as a polar coordinate angle should never be "reversed", i.e. never shifted by 180°.
  • this means that reversing by direct adjustment of RGB tuples or other non-polar cartesian space is inappropriate.
  • Ideally, a polar coordinate system with orthogonal lightness, orthogonal hue, and orthogonal saturation is needed.
    • SACAM (aka SAPC, from which APCA is derived) is a developmental project for this purpose.
• the first step in polarity reversal is to rearrange the relative luminances (lightness/darkness) essentially pivoting around "middle contrast."
  • unfortunately middle contrast is not static and varies based on special frequency of the stimuli and ambient conditions.
  • nevertheless a relative luminance of approximately 0.42 Y is a useful mid contrast pivot point.
  • See my article "Let's Flip for Color" for more on this concept.
• rearranging luminances correctly requires a perceptual uniform method such as APCA.
  • WCAG 2 contrast math can not be used for this purpose, (indeed WCAG 2 contrast math can not be used for any aspect of dark mode design).
• Colors that are more saturated will generally not be able to have their luminance reversed directly.
  • again, it would be incorrect to simply shift the hue to try and correct this.
  • instead, changing the chroma or saturation of the color to allow the luminance reversal is a best practice for maintaining original design intent.
• conversely, light colors that are less saturated may benefit by being made more saturated when their luminance is reversed to a darker color.
• some elements that contain a color group should not have a polarity reversal, but only an overal luminance shift.
  • By color group, I mean something like an image.
  • Some images, like icons, probably should be reversed in luminance.
  • but images of people buildings things... Should not be reversed in luminance nor hue.
    • instead, images should have their gamma and whiteness levels adjusted to suit the overall polarity reversal.
    • example, a very light image of noon time activities would need to be darkened and have its display gamma increased in order to fit properly in a dark mode.

Contrast Increase considerations relating to color and lightness/darkness

• contrast increase should not be assumed to mean a lightness increase.
  • and some cases contrast is best increased by reducing luminance of dark elements.
• an increase in overall contrast should not reduce important relative contrast differences that are needed for differentiation.
• increasing color contrast by increasing saturation can be helpful.
• increasing color contrast by shifting hue can be detrimental, and generally should not be automated.
• hi spatial frequency, in other words small thin items, will generally not benefit as much from things like saturation increases, whereas small thin items will derive the greatest benefit by increasing luminance contrast.

To be added to later...