Edit

Check for contrast issues with dark theme and light theme

  • Article
  • 2 minutes to read

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 window or tab.

  2. Right-click anywhere in the webpage and then select Inspect. Or, press F12. DevTools opens next to the webpage.

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

  4. 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

  5. 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

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

    The Find text box for the DOM tree in the Elements tool

  7. 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