Accessible Dark Mode: A Plain-English Guide to Doing It Right

Dark mode has gone from a niche developer preference to something visitors actively expect. People browse at night, in bed, on phones with their eyes already tired, and a bright white page can feel like a flashlight to the face. So adding a dark theme feels like an obvious win, and most website builders, themes, and page editors now offer one with a single switch.

Here’s the part nobody mentions: a dark theme is a second design. Everything you carefully checked for accessibility in your light theme — the contrast of your text, the visibility of your links, the outline that appears when someone tabs to a button — has to be checked all over again in the dark version. And because dark mode is usually bolted on at the end, it’s where accessibility quietly falls apart. A site that passes every check in light mode can fail badly the moment someone flips the switch.

The good news is that you don’t need to be a developer to get this right. You need to know what to look at, and you need to actually look at your site in dark mode instead of assuming the theme handled it. This guide walks through both.

Why dark mode is an accessibility issue, not just a style choice

It’s tempting to file dark mode under “aesthetics” — a mood, a preference, a trend. But for a lot of people it’s a genuine accessibility tool.

People with light sensitivity (photophobia), which is common with migraines, certain eye conditions, and concussion recovery, can find a bright page physically painful. Some people with low vision read more comfortably with light text on a dark background. People reading in low-light environments get less eye strain. And many people simply concentrate better without a glaring white field behind every paragraph.

At the same time, dark mode can hurt accessibility if it’s done carelessly. Some people with astigmatism find light text on a dark background harder to read, not easier, because bright text can appear to bleed or halo against the dark. People with certain reading or attention differences may struggle with low-contrast grey-on-grey text that looks “sleek” but is hard to parse.

The takeaway isn’t “dark mode is good” or “dark mode is bad.” It’s that dark mode is a real accessibility feature with real accessibility requirements — and the single most important one is that you offer the choice and make both themes readable. Never force one on everyone.

The contrast trap: dark does not mean low-contrast

The most common dark-mode mistake is also the easiest to make: designers reach for dark grey text on a slightly-less-dark grey background because pure white text on pure black can feel harsh. The result looks moody and modern — and fails the contrast rules that exist to keep text readable.

The WCAG rules don’t change in dark mode. Body text still needs a contrast ratio of at least 4.5:1 against its background, and large text (roughly 24px, or 19px bold) needs at least 3:1. A dark theme has to hit those numbers exactly the same way a light theme does. “It’s dark mode, it’s supposed to be dim” is not an exception the rules recognise.

Two specific dark-mode contrast problems show up again and again:

  • Muted secondary text. Captions, timestamps, form hints, footer links, and “read more” labels are often a soft grey that looked fine on white but disappears into a dark background. Secondary text needs to pass contrast too. There is no “this text is less important so it can be unreadable” clause.
  • Pure black backgrounds with pure white text. This technically passes contrast with flying colours, but the extreme difference can cause that bleeding, haloing effect for some readers. A very dark grey (not pure black) with a soft off-white (not pure white) is usually more comfortable while still passing easily. You’re aiming for high contrast, not maximum contrast.

You can check any text-and-background pair with a free colour contrast checker by pasting in the two colours. If your theme uses semi-transparent text (text set at, say, 70% opacity over a dark background), check the actual resulting colour, because transparency quietly lowers contrast in a way the raw colour value won’t show you.

Colour does a lot of quiet work on a webpage. Links are often a particular blue. Error messages are red. A selected tab might be highlighted in your brand colour. When you switch to dark mode, all of those colours sit against a new background, and some of them stop working.

The classic failure is the link colour. A medium blue that reads clearly on a white page can be far too dark and low-contrast on a near-black one, turning your links into text that’s technically a different colour but practically invisible. Dark themes usually need lighter, more saturated versions of link and accent colours so they still stand out against the dark.

This connects to a rule that trips up a lot of sites: you can’t rely on colour alone to convey meaning. If your links are only distinguishable from regular text by being a slightly different shade — and that difference shrinks in dark mode — then people who can’t easily tell those colours apart lose the ability to find links at all. Underlining links, or otherwise marking them with something other than colour, fixes this in both themes at once.

Buttons and form fields deserve the same scrutiny. A button that was a solid colour in light mode might become a thin outline in dark mode that’s hard to see. Input fields that were defined by a light grey border can vanish against a dark background, so people can’t tell where they’re supposed to type. Look at every interactive element in dark mode and ask: can I clearly see that this is a thing I can click or type into?

Don’t lose the focus outline

When someone navigates your site with a keyboard instead of a mouse — which includes many people with motor disabilities, as well as plenty of people who just prefer it — a visible outline appears around whatever they’ve tabbed to. That outline is how they know where they are on the page. Losing track of it means losing their place entirely.

Focus outlines are usually a dark colour, often a default browser blue or black, because they were designed to show up against light backgrounds. In dark mode, a dark outline against a dark background can become nearly invisible. Suddenly your keyboard users can’t tell which link or button is selected, even though the outline is technically still there.

This is one of the most overlooked dark-mode failures because most people never test it. The fix is to make sure the focus indicator is clearly visible against the dark background too — which often means a different, lighter outline colour in dark mode. To check it yourself, switch your site to dark mode, then press the Tab key repeatedly and watch the screen. You should always be able to see, at a glance, exactly which element is currently focused. If the highlight disappears on any element, that’s a bug to fix.

Images, logos, and the things that don’t adapt

Themes handle text and backgrounds. They usually don’t handle your content. A few things tend to break visually when the background flips:

  • Logos and graphics with transparent backgrounds. A dark-coloured logo saved as a transparent PNG looks crisp on a white page and disappears on a dark one. The same goes for dark icons, signatures, and diagrams. These often need a light-background version, a light-coloured variant, or a small solid panel behind them in dark mode.
  • Screenshots and images of text. If you’ve embedded a screenshot with a white background, it’ll glow like a bright rectangle in the middle of your dark page. That’s jarring, and if the screenshot contains important information as an image of text, it has its own separate accessibility problem regardless of theme.
  • Charts and infographics. Colour-coded graphics designed for a light background can lose contrast or legibility on dark. If a chart’s meaning depends on colours that no longer stand out, the information becomes harder to read for everyone and impossible for some.

None of these are reasons to avoid dark mode. They’re just reminders that switching the theme doesn’t switch your content, so you have to look at your real pages — not just the theme demo — in both modes.

Let people choose, and remember their choice

The most respectful way to handle dark mode is to follow the visitor’s lead. Modern devices and browsers let people set a system-wide preference for light or dark, and a well-built site can detect that preference and match it automatically. Someone who has set their entire phone to dark mode because bright screens hurt their eyes shouldn’t have to hunt for a toggle on every site they visit.

If you also offer a manual toggle on the page — and many sites do — make sure it’s accessible in its own right:

  • It must be reachable and operable with a keyboard, not just a mouse, so people can Tab to it and activate it with Enter or Space.
  • It needs a clear, descriptive label that a screen reader announces, like “Switch to dark theme,” rather than an unlabelled icon that reads as nothing or as “button.”
  • Its current state should be clear: people should be able to tell which mode is currently on.
  • Ideally, it remembers the choice so visitors aren’t re-setting it on every page.

Crucially, never force dark mode on people who didn’t ask for it, and never make light mode impossible to get back to. For everyone who finds dark mode soothing, there’s someone who finds it harder to read. The accessibility win is the choice, not the default.

A quick dark-mode check you can run today

You don’t need special software for any of this. Switch your site into dark mode and go through this list on your real pages:

  • Body text passes 4.5:1 contrast against the dark background; large text passes 3:1.
  • Secondary text — captions, hints, footer links, timestamps — is readable, not a faint grey.
  • The background isn’t pure black with pure white text if that combination looks like it’s bleeding; soften both slightly.
  • Links are clearly distinguishable, and not by colour alone.
  • Buttons and input fields are clearly visible, with borders or fills you can actually see.
  • Press Tab through the page: the focus outline is visible on every element.
  • Logos, icons, screenshots, and charts still look right and aren’t lost or glaring.
  • There’s a way to detect or set the user’s preference, and a way back to light mode.
  • The dark-mode toggle, if you have one, is keyboard-operable and properly labelled.

Run through that and you’ll have caught the vast majority of dark-mode accessibility problems — the ones that real visitors actually hit.

The bottom line

Dark mode is genuinely good for accessibility, right up until the moment it isn’t. The difference comes down to whether you treated the dark theme as a real design that needs the same contrast, the same visible links and focus outlines, and the same readable text as the light one — or whether you flipped a switch and assumed it was handled. It almost never is, entirely, on its own.

The fixes here aren’t technical wizardry. They’re the same accessibility fundamentals you’d apply to any page, checked a second time against a dark background. Spend twenty minutes looking at your own site in dark mode, tab through it, and read the faint grey bits, and you’ll find the problems quickly — long before a frustrated visitor does.

We’re building a simple accessibility checker for non-developers — no DevTools, no jargon. Join our waitlist to get early access.