Dark mode: should your business website have it?
What dark mode involves for a business website, when it is worth offering, what it costs to do properly, and how we decide.
The short answer
Dark mode is a second colour scheme for a site, usually following the visitor’s device setting, in which light text sits on dark surfaces. Done properly it is not an inversion but a designed scheme: every colour chosen again, every text and background combination checked for contrast, brand colours adjusted so they meet contrast on dark backgrounds, logos and images given dark-compatible versions, shadows and borders rethought, and every component tested in both schemes on every change afterwards. For a business website it is optional. Visitors expect it in applications they use for hours; on a site they visit for five minutes to find a service or a contact, a light scheme with good contrast serves everyone. Whether it is worth doing depends on three things: whether your audience or product justifies it, whether the site is built on design tokens so the work is contained, and whether you will maintain two schemes for the life of the site.
Deciding
| Factor | Points towards dark mode | Points away |
|---|---|---|
| What the site is | An application, portal or tool used for long sessions | A marketing or information site visited briefly |
| Audience | Developers, designers, gamers, night-shift users | General business audiences |
| Brand | A brand that already lives comfortably on dark surfaces | A brand whose colours fail contrast on dark backgrounds |
| Build | Design tokens in place; colours defined in one place | Colours scattered through components |
| Imagery | Illustrations and photos that adapt or have variants | Many photos and diagrams with light backgrounds baked in |
| Maintenance | A partner who tests both schemes on every change | Occasional updates with no design review |
| Budget | Room for a designed second scheme | Better spent on content, speed or accessibility of the one scheme |
Doing it properly, if you do it
- Define a dark token set: surfaces, text, borders, brand and status colours, each checked for contrast against its pairings.
- Adapt the brand colours so they remain recognisable and pass contrast on dark surfaces.
- Provide dark variants of the logo and any illustration or diagram with a light background.
- Rethink elevation: shadows do little on dark surfaces; borders and surface lightness take over.
- Follow the device preference by default; offer a manual toggle only if the audience wants one, and remember it.
- Test every component and page in both schemes on phone and desktop.
- Add both schemes to the pipeline’s visual checks so changes are tested twice from then on.
The accessibility angle
Dark mode is a preference, not an accessibility requirement, though some visitors with light sensitivity benefit from it and some with astigmatism find light text on dark harder to read. What accessibility does require is sufficient contrast, visible focus states and readable text in whatever scheme is offered. A single light scheme that meets those fully is accessible; a second dark scheme that fails them is not an improvement.
What this means for you
Offer dark mode when the audience or product justifies it, the site is built on tokens so the work is contained, and you will maintain both schemes properly. For a business website, a single light scheme with excellent contrast is the right answer and the better use of the budget. Whichever you choose, do it completely; a half-made dark mode is worse than none.
Frequently asked questions
Do visitors expect dark mode now?
In applications and tools they use for long stretches, increasingly yes, and their devices ask for it. On a business website they visit briefly to find a service, a price or a contact, expectations are lower, and a light scheme with good contrast serves everyone. A client portal or an application you build is a different case from the marketing site.
What does dark mode cost to do properly?
A second set of colour tokens with contrast checked for every combination, images and logos that work on dark backgrounds or have dark variants, illustrations and diagrams reviewed, shadows and borders rethought, and every component tested in both schemes on every change afterwards. On a site built with tokens it is a few days; on one without, it is a restyling project. The maintenance is the part most underestimated.
Can we just invert the colours?
No. Automatic inversion produces washed-out brand colours, images with inverted photos, text that fails contrast and shadows that look wrong. A dark scheme is designed: different surface colours, adjusted brand colours that meet contrast on dark backgrounds, and images chosen or adapted. Anything less looks broken and reflects on the business.