By: David E. Miller, MNIT Department of Corrections, and Jennie Delisi, Office of Accessibility

In February 2021 we published High Contrast Mode and Dark Theme Accessibility Testing, which discusses the relationship between dark mode and digital accessibility measurements of effective contrast. That article focused on testing. Testing, however, is the end of the story. 
The story of creating accessible digital experiences begins with:

• project planning
• business requirements
• design
• coding

Business analysts, designers, developers, quality assurance professionals, and digital accessibility professionals can use the tips in this article to improve their project’s compatibility with high contrast modes and dark themes.

We will focus on how to ensure that a content creator’s color scheme plays nicely with a user’s selected operating system (OS) and browser theme(s). It is specifically to guide planning, design, and testing to avoid contrast issues that occur only when the user has chosen a specific theme (as opposed to the default theme) like dark mode. It does not validate against the Web Content Accessibility Guidelines (WCAG) 2.0 success criteria related to color contrast, or using color alone.

Sometimes the line between true accessibility and usability by people with disabilities may feel blurred when a specific accessibility guideline does not resolve an issue. At this time, ensuring good color contrast when using high contrast themes in browsers is not a requirement of the /mnit/government/policies/accessibility/index.jspState of Minnesota’s digital accessibility standard. However, it is a key component of usability. 

People with low vision, those with difficulty perceiving specific colors or color combinations, and those with migraines are just some of the individuals that may use different color themes when accessing your content. They all benefit when development teams follow these testing and design considerations.

This article assumes readers are comfortable with technical details regarding Cascading Style Sheets (CSS), and CSS specificity rules. The resources section at the end provides some refresher material. 

Before we begin, a few definitions

As we prepared this article, we realized that it may help if we define a few terms we will use. 

Scheme

A scheme is a set of rules for how to display content. A scheme can be defined by the user, or by the creators of: 

• an OS, 
• a browser, or 
• content.

A “color scheme” means a designer’s choices of colors for displaying the web content. This is a type of scheme.

Operating System (OS) theme

At the time of publication, Windows 10 has multiple uses of the word “theme” in their settings. In this article operating system (OS) theme will be the same as the old term high contrast mode.

Theme

Theme is an environmental scheme selected or defined by the user at the OS or browser level.

Specificity

 According to the W3Schools page on CSS Specificity,

“If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out. Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.”

Use case: A heading which is also a hyperlink. The styling of your heading might clash or get merged with the styling of your hyperlink. If they both have different colors assigned, the specificity will decide which style applies.

Inline styles

“Inline styling” means using HTML’s style attribute to define how an object should look.  

Example:  <div style=”font-color: black;”><p>This texts is <span style=”font-color: red;”>important!</span></p></div>

Because of CSS specificity rules, inline styling will always be applied. This sounds like heaven for designers, until it’s not. If a browser applies a dark background, and text has inline styling that sets the font-color to a dark color as well, all that text will be unreadable at best, or disappear completely.

Tip 1: Plan and design a color scheme for a variety of themes

You don't use your computer like you did in 2010. You access websites on your smart phone. You take your laptop outside where it is sunny. Your screen may adapt to changing light conditions in your room or time of day. People with disabilities also have more options for how they interact with digital information.

Planning and designing a color scheme for a variety of themes ensures more people can use the information.

1. Choose one of the following options:
   • design content with a single color scheme using styles that allow the OS or browser to override those colors, or
   • design both light and dark color schemes and use media queries (more on media queries in the resources section) to use the one that matches the user’s preference. Ensure your styles don't override those used by the browser or operating system.
2. Avoid using "inline styles" and the !important CSS rule:
   • inline styles: They're the worst offender because they completely override stylesheets and themes.
   • !important rule: Avoid using for foreground or background colors unless it's absolutely essential, and in that case define both, and make both !important.
3. Include business requirements that specify using good color contrast, that meets the Web Content Accessibility Guidelines 2.0 (or 2.1).
   • If having multiple color schemes have requirements for each scheme. Example: link text color for dark scheme, link text color for light scheme.
4. If you choose to design both light and dark schemes:
   • Simplify the overall color scheme so you have less to manage in each scheme.
   • Define foreground and background colors for both schemes. Whenever you create a style that has a specific foreground color, also include a contrasting background color in that definition.
5. Identify key project roles to participate and budget time for wireframe reviews of each scheme by at least the:
   • business analyst
   • graphic designer
   • digital accessibility specialist
   • web developer

Tip 2: Plan how you will use images

For many projects, you may have to think more closely about how images will be used. For example, your project may discuss using a logo, but not exactly how you will use it.

Plan for how you will use images in templates as well as images that might be a part of future content.

And, consider the different types of images:

• Logos
• Icons
• Content images

Generally, images have a subject and a background. The background color can be specified within the image itself, or it can be transparent. Transparent backgrounds allow whatever is behind that image to show through.

Images and background recommendations

Option 1 – Use a single image

When using one image with more than one scheme, test it on both light and dark background colors.

Option 2 – Using different images for each color scheme

When designing separate images for each color scheme, use CSS to pull the correct image for the specific light or dark background color. 

Test each image with its specific background color.

Transparent images 

Avoid transparent images to reduce the amount of troubleshooting you will need to complete. If you use transparent images, the appearance should be thoroughly checked against both light and dark backgrounds. Alternatively, design light and dark versions of an image and use CSS to load the appropriate one based on the user’s theme.

Example: if you are using transparent images, your image or some portions of your image may disappear into the background when users use a specific theme.

Tip 3: Include info about themes in your “run book”

As part of your project, you may prepare documentation about your project for other people who will update the content. Or your application may enable users to load their own content. Let the designers of content understand if there they need to adjust how to load images.

For example, a project team may make a website for users that has two different background colors. The website needs to display the appropriate image to go with each specific background. It may display the image that works with a light background when that is in use or display an image that works with the dark background. In order to do this, the project team member that is updating the content will need to know that they have to load two images – one for light mode and one for dark mode.

Tip 4: Test

Test the website design and how it displays with various OS and browser themes. Once you validate your design with the unit tests, you can perform system/site-wide tests using alternate themes.

Don’t assume that users will use the OS default color scheme. You need to test with at least one high contrast theme. Many OS themes also enable the user to specify specific colors for interactive elements. If your code respects the selected OS theme, the user will be able to set this to match their need.

Primary tests

• "Default” color theme (typically light)
• High contrast, white-on-black theme (dark)

Additional tests

• OS high contrast, black-on-white theme (light)
• Other OS-level, high contrast themes
• A “default” OS theme (light) with a dark browser theme

Conclusion

Users benefit when their experience is consistent, and they can tailor settings to their needs. The fewer settings they need to apply, the better. If you follow the suggestions from this article, hopefully you will build content that looks the way you want it to, and it can adjust based on each user’s needs. When you design for inclusion, everyone benefits.

References/Resources

• MDN Web Docs: prefers-color-scheme
• W3 Schools: CSS Specificity
• WebAIM: Evaluating Color and Contrast - How hard can it be?
• CSS-Tricks: A Complete Guide to Dark Mode on the Web