Dark Mode Compatibility With Screen Readers: What to Know

Screen readers such as NVDA, JAWS, VoiceOver and ChromeOS's ChromeVox read a page's text and structure, not its colors. So switching a site or your system to dark mode doesn't change what a screen reader announces. The issues show up for people who use a screen reader together with some sight, or with a magnifier.

What dark mode doesn't affect

• The text, headings, links and buttons a screen reader announces.
• Image descriptions (alt text) and form labels.
• Keyboard navigation through the page.

A site's own dark theme changes colors in its stylesheet, which screen readers ignore. A dark mode extension that only changes styles behaves the same way. Modern Dark Mode, for example, adds a single style rule to the page and nothing a screen reader would announce.

Where problems can appear

• Extensions that add page elements. Some dark mode tools insert buttons or panels into pages, which a screen reader may read out. Check by browsing with your screen reader after installing.
• Double inversion. If you use a magnifier's color inversion (in Windows Magnifier or ZoomText, for example) and a dark mode extension, the two cancel out and pages turn light again. Use one or the other.
• Focus outlines. The outline that shows where keyboard focus is can become harder to see after colors change. Test that you can still follow it.
• Contrast for partial sight. Darkened pages can lose contrast in some places, such as gray text on dark gray. Adjust the contrast slider, or use a high contrast theme instead.

Good combinations

• Screen reader only: dark mode makes no difference to what you hear. Use whatever is comfortable for anyone else using the screen.
• Screen reader plus some vision: try your system's dark theme with Chrome set to follow it, then add an extension only for bright sites.
• Magnifier users: choose either the magnifier's inversion or a dark mode, not both, and check text smoothing at high zoom.
• Very low contrast sensitivity: Windows contrast themes may work better than dark mode. See high contrast mode explained.

For developers

Build dark themes with CSS and prefers-color-scheme, keep real text rather than text in images, and check contrast in both themes. Test keyboard focus visibility in dark mode, and make sure any theme toggle is a proper button with a label. See accessibility testing tools.