Check for contrast issues with dark theme and light theme

When testing color accessibility, there could be different display color themes that you need to test for contrast issues.

Most operating systems come with a dark mode and a light mode. Your webpage can react to this operating system setting, by using a CSS media query. You can test these themes and test your CSS media query without having to change your operating system setting, by using the prefers-color-scheme CSS options in the Rendering tool.

As an example, the accessibility-testing demo page includes a light theme and a dark theme. The demo page inherits the dark or light theme setting from the operating system. If we use DevTools to simulate the operating system being set to a light scheme and then refresh the demo webpage, the Issues tool shows six color-contrast problems instead of two. (You might see different numbers.)

To emulate a user's selection of preferred color theme:

  1. Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.

  2. Select Esc to open the Drawer at the bottom of DevTools. Select the + icon at the top of the Drawer to see the list of tools, and then select Rendering. The Rendering tool appears.

  3. In the Emulate CSS media feature prefers-color-scheme dropdown list, select prefers-color-scheme: light. The webpage is re-rendered using light-theme.css.

    Using the Rendering tool to simulate a light mode and triggering the other theme of the document

  4. Select the Issues tool, and then expand the Accessibility section. Depending on various factors, you might get Insufficient color contrast warnings. Notice in AFFECTED RESOURCES there are 6 elements with insufficient color contrast.

    New contrast issues detected because of the change to light theme

    On our demo page, the Donation status section of the page is unreadable in light mode, and needs to change.

    The Donation Status section has contrast issues in light mode

  5. In DevTools, select the Elements tool, and then select Ctrl+F on Windows/Linux or Command+F on macOS. The Find textbox appears, to search within the HTML DOM tree.

  6. Enter scheme. The following CSS media queries are found, and the corresponding CSS files can now be updated.

    <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
    <link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">
    

See also

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools