skip to content
Primary navigation

Accessibility News

Find the latest news from the Office of Accessibility. Once a month we will bring you tips, articles, and ways to learn more about digital accessibility. Want an easier way to stay informed? Subscribe to the Accessibility Newsletter!

Subscribe Today

High Contrast Mode and Dark Theme Accessibility Testing

Color schemes and accessibility

2/25/2021 7:00:00 AM

Color blocks

Mobile applications and operating systems increasingly use dark themes and high contrast modes. As more options for changing modes, themes, and specific colors have become available, both users of technology and digital accessibility testers are asking the question:

Does the State of Minnesota Digital Accessibility Standard cover one of these settings or all of them? 

For example, does it address all the high contrast settings that impact operating systems and software as well as all browser renderings of dark mode?

To answer this question, let’s start with a look at these features.

What are dark and high contrast modes?

Many of us are now familiar with dark mode features on our favorite apps. We may find ourselves using Twitter’s dark mode at night because it’s easier on our eyes. Software and web application designers noticed that users like these options. They are becoming more common in software and web applications. This is in addition to an increased ability for users to customize a personal view, or customize the view of published content.

High contrast mode has been available on operating systems like Windows since Windows 95. It is an accessibility feature that is part of the platform. This enables the setting to be used with the operating system, files, and software. Windows 10 now offers more options than the single high contrast mode of previous operating system versions. In the high contrast settings, the operating system now offers themes:

  • high contrast #1
  • high contrast #2
  • high contrast black
  • high contrast white

Screenshot of Windows 10 High Contrast options: High Contrast #1, High Contrast #2, High Contrast Black, High Contrast White.

For each of these themes Windows 10 also provides the ability to specify the colors for: 

  • text 
  • hyperlinks
  • disabled text
  • selected text
  • button text
  • background. 

Screenshot of color options selected for Text, Hyperlinks, Disabled Text, Selected Text, Button Text, Background.

Windows 10 has 3 themes in the Colors area setting – light, custom, and dark. The options for default Windows mode impact your system user interface (example: Start Menu, taskbar). Default Apps mode will apply to your Default Apps.

Screenshot of Windows 10 Colors options Light, Dark, Custom and preview (dark selected).

Some people need to change how software, documents, and websites look on their computers. It can be essential for people with certain types of disabilities. This includes some people with migraines, low vision, and difficulty seeing or differentiating between certain colors.

Bruce Bailey, Accessibility Specialist/Information Technology Specialist for the US Access Board adds, “Some users with certain vision disabilities find high contrast (including black text on a white background) very difficult. The popularity of Dark Mode has been of great benefit to these users.”

Follow these steps to determine if software and web applications meet the standard.

Step 1: Software, Web Application, or Web Content

Determine if you are talking about or testing software, a web application, or web content. Digital accessibility subject matter experts working for the State of Minnesota define software and web application as:

Software: Software is a desktop application that runs locally on a desktop or laptop computer. Software must be developed and installed for a particular operating system. It can have specific hardware requirements that must be met for it to function properly. Software is often dependent on the storage and processing power of the computer. Updates must be applied directly to the desktop or laptop installation. 

Web Application: A web application is delivered over the internet from a remote server, using a web browser. It works primarily with resources made available over the internet, such as storage and processing power. The use of modern web browsers increases web application capabilities. This allows developers to create more interactive interfaces that mimic a desktop application. Web applications may be limited by bandwidth.

The Guidelines for Accessibility and Usability of Information Technology Standard (PDF) defines platform software as, "software that controls or otherwise interacts with hardware or provides services for other software. Microsoft Windows and the Android operating system are two examples of platform software."

The Web Content Accessibility Guidelines (WCAG) 2.0 defines a web page as, "a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent." They have additional notes and examples available in the glossary listing for web page.

Step 2: Test


The goal of testing software is to identify that operating system preferences can be used throughout the software. Section 508 (502.2.2 No Disruption of Accessibility Features) states "Software shall not disrupt platform features that are defined in the platform documentation as accessibility features." This test is in addition to the requirement for software to pass WCAG success criteria 1.4.3 Contrast (Minimum).

For software, test using high contrast mode. Verify that the software accepts the colors from the operating system preference.

It should not matter which operating system high contrast theme you use unless it makes it difficult to determine if it has been accepted. 

For example, a high contrast theme and your software may both use a lot of purple. You should select a different high contrast theme - one that uses less purple. 

The themes options in Windows 10 (dark, light, and custom) did not provide a quick way to see if your choices would be accepted throughout the software. 

To test:

  1. Have the software application in its default theme.
  2. Turn on Windows 10 high contrast, with either high contrast #1, high contrast #2, high contrast black, or high contrast white (whichever one is different from the colors used within the software).
  3. Verify that the preferences are accepted throughout the software.

A note from the Trusted Tester v4 script:

  • “If the software's original color palette is similar to high contrast black, select high contrast white by using the Ease of Access Center.” 

Creating Content Within Software

Users expect default settings, such as link text color, to be accessible. This would be the same for a user that uses one of the software’s themes. Default link text color is validated by those testing the content authoring tool and the template creator, not by each content creator.

For example, Jane has her software settings set to dark theme. Joe has his software settings set to default. If Jane creates linked text in a Microsoft Teams chat, the default color of the link text does not need to be tested and/or verified to meet contrast requirements. However, if Jane chooses a custom color for the linked text, she will need to test in the default theme because the color she sees in dark theme will not necessarily be the color that will appear for Joe in the default theme.

The goal of testing is to ensure that content viewed using the default viewing mode will have sufficient contrast to pass WCAG Success Criteria 1.4.3.

To test:

  • Create content in user’s preferred software theme.
  • If using default colors, testing can stop.
  • If using a custom color:
    • Set software to use the software’s default theme.
    • Verify that custom colors pass Success Criteria 1.4.3.

Web Applications and Web Content

Validate that color contrast conforms to WCAG 2.0 using color codes (examples:  Hex, RGB) for text and background. The color contrast ratio plus the font size is used to determine if it passes or fails. This test is not completed using assistive technologies. A note in the Understanding Document for Success Criteria 1.4.3 Contrast (Minimum) states "For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect to the specified background over which the text is rendered in normal usage." In this case, normal usage will be the viewing mode that is automatically available for all users, not a mode/theme that users can select (a user preference).

To be accessible in the default viewing mode, the text color and background color's color contrast ratio must be sufficient to pass Success Criteria 1.4.3.

Test color contrast using one of the following methods:

  1. Determine the color contrast ratio using a tool to calculate the ratio (like WebAIM's contrast checker) by entering the color code for the foreground and background.
  2. Use an automated testing tool.
  3. Use a testing tool that enables you to sample color using an eye dropper tool and then calculates the ratio.

As noted earlier, web page authors do not need to ensure their pages are compatible with Windows High Contrast mode. It can be difficult to support high contrast mode for web content. 

With all this in mind, Bruce Bailey shares a reminder for web developers: when specifying a foreground color, “a best practice for web authors is always specify background color.”

Should Other Color Modes/Themes Have Good Contrast?

Yes! Other modes and themes should have good contrast for many reasons. One example: a user may have recently acquired a disability that impacts their use of technology, and they may not be aware of other options available to them. 

Users can also let vendors know that they are using these other modes and the challenges they have when using them.

But these other modes, at this time, are not required to pass the State of Minnesota's Digital Accessibility Standard. While we encourage designers and developers to check functionality and contrast in these modes, it is not required for compliance. 

Looking Towards the Future

As developers continue to create products that are usable by everyone, keeping these modes in mind at the design phase will be important. Bruce Bailey shares an example, “Instead of just hard coding text on a button to be red, I think developers are more likely to encode the text semantically as ‘important’ or ‘warning.’"

Subscribe to our Newsletter

Would you like to learn more about the accessibility work being done by Minnesota IT Services and the State of Minnesota? Once a month we will bring you more tips, articles, and ways to learn more about digital accessibility.

Subscribe Today


back to top