How to Make Dark Mode Accessible for All Users

A dark theme isn't automatically easier to read. Done badly, it causes glare, blurry text and missing focus outlines. Done well, it's comfortable for most people and still meets accessibility standards. These guidelines are for anyone designing or building a site or app.

1. Use dark gray, not pure black

Pure white text on pure black can look like it glows or blurs, especially for people with astigmatism. A dark gray background reduces that. Google's Material Design dark theme, for example, uses #121212. Use slightly lighter grays for raised surfaces such as cards and menus.

2. Soften the text

Use off-white or light gray for body text rather than pure white, while keeping contrast high enough to read easily.

3. Meet contrast requirements

• Body text: at least 4.5:1 contrast with its background (WCAG AA).
• Large text: at least 3:1.
• Icons, borders and form controls: at least 3:1.

Check every color pair in the dark theme separately; colors that pass in light mode often fail in dark mode.

4. Adjust your colors

Bright, saturated brand colors can vibrate against dark backgrounds. Use lighter, less saturated versions for text, links and accents in dark mode. See dark mode color palette principles.

5. Keep focus and states visible

• Make keyboard focus outlines clearly visible on dark backgrounds.
• Show hover, active, disabled and error states with more than color alone.
• Check that form fields have visible borders.

6. Handle images and content

• Logos and icons with transparent backgrounds may disappear on dark gray. Provide dark-mode versions.
• Very bright photos can glare; consider dimming them slightly in dark mode.
• Charts need colors that work on both backgrounds.

7. Give users the choice

• Follow the system setting with prefers-color-scheme, and offer a visible toggle that's remembered.
• Respect Windows contrast themes (forced-colors), which override your colors for people who need them.
• Never force dark mode on people who read better in light mode.

8. Test with real tools and people

Use contrast checkers, keyboard-only navigation and a screen reader in both themes. See dark mode and screen readers.

For sites without a dark theme

Many users darken sites themselves. Modern Dark Mode inverts pages to dark gray rather than black and flips images back. A well-built site with clean contrast and real text, not text in images, looks better under any darkening tool.