Light or dark website background: choosing by content, audience and photos
Choose a light background when people will read a lot of text, often in daylight, and a dark one when the page is mostly images or a short, atmospheric message. Neither is more professional by default. Where you can, offer both and let the visitor's own light or dark setting decide, because that's the one choice that's right for each person.
What each ground does well
- Light grounds
- Dark text on a pale ground is how most people learned to read, on paper, and it stays crisp in bright rooms and outdoors. Long paragraphs, menus with prices, forms and documentation are easiest here. A slightly warm off-white is often kinder than pure white.
- Dark grounds
- Light text on a near-black ground makes photographs, video and colour glow, and it suits the evening, the night-time economy and screens used in dim rooms. It reads as dramatic and focused, and it hides the edges of images, so artwork appears to float.
The common belief that dark sites look more premium is mostly about photography and restraint, not the background colour. A luxury hotel with a dark ground and sparse type looks expensive; a dark ground behind six cluttered sections just looks heavy.
Deciding by content, audience and photos
| Site | Lean | Why |
|---|---|---|
| Photographer, film-maker, gallery | Dark | Images stand out; frames disappear |
| Cocktail bar, club, late venue | Dark | Matches the hours and the room |
| Restaurant | Either | Light for a lunch café with a long menu, dark for an evening tasting menu |
| Clinic, law firm, accountant | Light | Visitors read details, often on a phone in daylight |
| Shop | Light | Product photos on white or pale grounds match the way people compare items |
| Developer tool, software product | Either, ideally both | Many users work in dark interfaces all day |
| Blog or long guide | Light, with a dark option | Comfortable for long reading |
Your photographs are the strongest signal. Look at the five best images you'll use. If they're bright, airy shots on pale backgrounds, a dark site will frame them awkwardly. If they're moody, low-key or full of saturated colour, a white ground will flatten them.
Readability on dark backgrounds
- Avoid pure black and pure white together. Off-white text on a near-black ground reduces glare, especially for people with astigmatism, for whom bright text on black can appear to blur or halo.
- Go slightly larger and lighter in weight. Light text on dark looks heavier than the same weight on light; thin weights, on the other hand, can break up. Test the body weight.
- Keep paragraphs short. Long runs of light-on-dark text are tiring for many readers.
- Contrast still applies. WCAG's contrast minimum is 4.5:1 for body text in either direction, and muted greys on dark grounds fail more often than people expect.
- Colours change. An action colour that works on white often needs a lighter value on black. See dark mode colour palette.
Why following the visitor's setting is often right
Phones and computers let people choose a light or dark appearance, and many switch automatically at sunset. A website can read that choice with the prefers-color-scheme media feature, which, as MDN's prefers-color-scheme reference explains, reflects the operating system or browser setting. Pair it with the color-scheme property so that, per MDN's color-scheme reference, form controls, scrollbars and the page canvas match too.
Following that setting suits sites people return to, and sites where neither ground is essential to the brand. It needs two complete palettes, not one inverted, and photos that work on both. For a brand built on one look, such as a gallery's black or a bakery's cream, a single fixed ground is a fair choice, as long as it's comfortable to read.
Light and dark in Anticode
Every Anticode design system has a light and a dark palette, and each site has a theme setting of Auto, Light or Dark, which you can change in the visual editor. Light and Dark fix the ground. Auto uses the design system's own default: dark for Technical (amber on graphite) and Luxury (champagne on black), light for Editorial, Playful, Brutalist, Organic and Swiss. The action colour has a darker value for light grounds and a lighter one for dark grounds, so it stays legible either way. Dark mode website design looks at designing the dark side in more depth.
Questions people ask
Is a dark background better for a website?
It's better for image-led, atmospheric sites and evening businesses. For long reading, forms and daylight use, a light background is usually easier.
Are dark websites harder to read?
Long passages can be, especially for people with astigmatism. Use off-white text, generous size and short paragraphs, and check contrast.
Should my website follow the system dark mode?
If both palettes are designed properly, yes: it gives each visitor the ground they've already chosen. Brands built on one fixed look can reasonably keep it.
Sources
- prefers-color-scheme, MDN Web Docs, checked
- color-scheme, MDN Web Docs, checked
- Understanding SC 1.4.3: Contrast (Minimum), W3C, checked