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:
Open the accessibility-testing demo webpage in a new tab of the browser, and then select F12 to open DevTools.
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.
In the Emulate CSS media feature prefers-color-scheme dropdown list, select prefers-color-scheme: light. The webpage is re-rendered using
Select the Issues tool, and then expand the Accessibility section. Depending on various factors, you might get
Insufficient color contrastwarnings. Notice in AFFECTED RESOURCES there are 6 elements with insufficient color contrast.
On our demo page, the Donation status section of the page is unreadable in light mode, and needs to change.
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.
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)">
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
I(Windows, Linux) or
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.