Dark mode and high contrast accessibility: logos, icons, buttons and focus that don't disappear

Some of your visitors don't see your website in your colours. People with low vision, migraines or light sensitivity often turn on a dark mode, a high contrast setting, or a Windows contrast theme (once called "High Contrast Mode"), which can replace your colours with their own. Some phone browsers and email apps can also darken pages on their own. When a site is built with colour tricks, these settings can make icons, buttons, checkboxes and focus outlines vanish. This guide covers what to check, whichever website builder or theme you use.

1. Know what these settings do

• Dark mode (prefers-color-scheme: dark): the device tells your site the person prefers dark colours. Your site only changes if your theme supports it, but some browsers and email apps can darken a page anyway.
• Windows contrast themes (forced-colors: active): the browser replaces your text, background, link and button colours with a small set the person chose, and removes things like box shadows.
• Increased contrast (prefers-contrast: more): a request for stronger contrast that your site can choose to honour.

WCAG doesn't require you to offer a dark mode. What matters is that your site stays usable when people use these settings, and that your normal colours already meet contrast rules (WCAG 1.4.3, 1.4.11). See the colour contrast guide.

2. Icons and logos that disappear

A black logo on a transparent PNG looks fine on white, and disappears on a dark background. Icon buttons drawn with a fixed fill colour, such as a dark search or menu icon, can vanish the same way. For SVG icons, use fill="currentColor" so they follow the text colour, and give logos a light outline or a version made for dark backgrounds. Icon-only buttons still need a text name (WCAG 1.1.1, 4.1.2).

<button type="button" aria-label="Search">
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
    <path fill="currentColor" d="..."/>
  </svg>
</button>

3. Focus outlines made from shadows

Many themes remove the browser's focus outline and draw a coloured shadow instead. Box shadows are removed in Windows contrast themes, so keyboard users lose track of where they are (WCAG 2.4.7). Use a real outline. A transparent outline costs nothing in normal view and turns visible when colours are forced.

a:focus-visible, button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}
/* if you must keep a shadow style, add a transparent outline too */
.btn:focus-visible { box-shadow: 0 0 0 3px #93c5fd; outline: 2px solid transparent; }

See focus indicators and skip links.

4. Buttons, checkboxes and toggles made of colour only

A button that is only a coloured box with no border, or a custom checkbox, radio button or switch drawn with background colours, can become invisible when colours are forced. Give buttons and form fields a visible border (it can match the background in normal view), and prefer real <input type="checkbox"> and <input type="radio"> controls, which browsers redraw correctly. Selected states, like a chosen size or tab, should show more than a colour change (WCAG 1.4.1); see colour-only meaning.

5. Text over photos and background images

Headlines placed on a photo, with a dark overlay for contrast, can end up as dark text on a dark photo when someone's settings change the text colour. Put important text on a solid background panel, or test it in both modes. Text that is part of the image itself won't change at all, so keep words out of images (WCAG 1.4.5); see flyers and images of text.

6. If you add your own dark mode

Check every colour pair again in the dark version: links, buttons, error messages, form borders, sale prices and focus outlines. A dark mode that fails contrast is worse than none. Let people's device setting choose the mode, and if you add a switch, give it a visible label and a state (see toggle switches). Don't override what people chose with forced-color-adjust: none on whole sections; save it for small things like colour swatches that must show their real colour, with the colour name in text next to them.

7. Email newsletters too

Many email apps darken messages automatically, and the results differ by app. Transparent logos and images with text in them are the usual problems. Keep key words in real text and test your newsletter in a dark-mode inbox; see accessible email newsletters.

Common mistakes

• A dark logo on a transparent PNG that vanishes on dark backgrounds.
• Icon buttons with a fixed colour that disappear when colours change.
• Focus shown only with a box shadow.
• Borderless buttons and custom checkboxes that become invisible.
• Headline text on a photo that becomes unreadable.
• A home-made dark mode that was never contrast-checked.

A 5-minute check you can do today

1. On a phone, turn on dark mode and open your homepage, menu and contact form. Can you still see your logo, icons and buttons?
2. On Windows 11, open Settings, then Accessibility, then Contrast themes, pick one and load your site in Edge or Chrome. Are buttons, checkboxes and links still visible?
3. In that mode, press Tab through the page. Can you always see where focus is?
4. Check any text on photos in both modes.
5. Send yourself your newsletter and open it in a dark-mode email app.

What a scan can and can't check here

Automated scans find only part of the barriers on the pages they visit. Our scan checks contrast in your normal colours, icon buttons with no name, and missing alt text. It doesn't switch your site into dark mode or a contrast theme, so it can't tell whether icons or focus outlines disappear there, and it can't tell whether your site meets any law. Our Fix-Pack checks up to 10 pages and gives copy-paste fixes for your platform, including focus and contrast fixes.

Building themes for clients? The agency 5-pack gives you five white-label reports ($499, use within 12 months).

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims. Altwise isn't affiliated with any website builder, browser, operating system or email app.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

• Call, email, text and download links accessibility: tap-to-call, icon buttons, PDFs and new tabs
• Website accessibility fix log: keep a dated before-and-after record and re-test
• Multi-step forms accessibility: quote wizards, intake forms and progress steps
• Audio, podcast and sermon accessibility: transcripts and players for small websites

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.