Using black backgrounds in web design

Black backgrounds came back into fashion the moment OLED phones became mainstream and "dark mode" became a default toggle in operating systems. The result is that any modern site can drop a black background into a hero section without looking outdated. The harder question is whether that background helps the page do its job — and whether it works for the people who do not see the page the way you do.

What a black background actually communicates

Strip the styling and a colour is just a signal. Black is a strong one. In Western design vocabulary it tends to read as:

• Premium / luxury when paired with restraint, tight type and a single accent colour.
• Technical / serious when paired with monospace type, fine grids and small typography.
• Cinematic / atmospheric when combined with photography, gradients or bokeh.
• Cheap / heavy when paired with bright primary colours, busy patterns, and lots of stock UI.

The difference is almost never the colour itself. It is restraint, hierarchy and the choice of accent. A black background does not become "premium" by adding more stuff; it becomes premium by removing things until only the foreground reads.

Contrast and WCAG

The Web Content Accessibility Guidelines specify minimum contrast ratios between text and its background:

• 4.5:1 for normal body text (WCAG 2.x AA).
• 3:1 for large text (typically 18pt+ or 14pt+ bold).
• 7:1 for body text under the stricter AAA level.

Pure black (#000000) at the back gives you the highest possible contrast ratios with white text, which sounds ideal but is not. Maximum contrast on light-emitting screens causes halation: the bright glyphs appear to bleed outward against the absolute-black background, which makes long-form reading harder. This is why most modern dark themes (system dark modes, e-readers, code editors) use a near-black such as #0a0a0a or #121212 with off-white text rather than pure black with pure white. The pure vs near-black page goes deeper.

Body text on black: what to fix

Putting body copy on a dark background is not the same as inverting your light theme. Several things change:

• Light fonts (200/300 weight) that work on white become spindly on black. Bump body weight to 400 minimum, and consider 450–500 for paragraphs.
• Line height needs to grow slightly. Glow and halation make tight leading feel claustrophobic; aim for 1.6–1.75 for body copy on dark surfaces.
• Italic and small-caps get harder to read; reserve them for short runs.
• Coloured links need higher saturation than they would on white. A blue that reads fine as #0066cc on a white card may be invisible against near-black; lift the lightness.
• Form fields need an explicit background colour, a clear border, and a visible focus ring. On dark surfaces the default browser focus ring sometimes disappears entirely.

What stays light

A site can be on-trend with a dark hero and still keep the parts that need light backgrounds light. Strong candidates for a light surface even inside an otherwise dark design:

1. Long-form article body. Light surfaces are still better for sustained reading; switch the article container to a light card if you can.
2. Documentation, knowledge base, support content. Same reasoning; people read these when they are already frustrated.
3. Forms with many fields (checkout, signup, application). Field/label scanning is easier on light.
4. Data tables, dashboards with dense numbers. The aesthetic benefit of a dark dashboard is real, but it requires careful syntax-level styling for every cell type. If you cannot commit to that, light wins.
5. Photography portfolios. Counter-intuitive, but black behind colour photography often desaturates it. A near-white frame around prints lets the colour breathe.

Performance: dark is not automatically faster

A frequent claim is that dark UIs are faster because OLED pixels can switch off. That is true for true black on OLED, but only at the device level — the bytes the browser downloads are the same. What you actually save with a black background:

• Battery on OLED screens at high brightness — measurable, especially on phones at full brightness in sunlight.
• Image weight — only if the background is a flat or simple-gradient PNG. The moment you add high-density grain or bokeh, the file is bigger than an equivalent white panel. See the export resolution guide for what compresses well.

Dark designs do not save CPU, do not reduce CSS size, and do not change how fast a site loads. Treat the choice as aesthetic and accessibility-led, not performance-led.

Dark mode versus a black-by-default site

Two different design problems often get conflated:

• Dark mode — a site offers both light and dark themes and respects the user's system preference (prefers-color-scheme). The user is in control.
• Black-by-default — the site is dark in every condition, regardless of preference. The designer has decided.

Black-by-default is a stronger creative statement and is fine for sites where the brand is the story (portfolios, agencies, hardware brands, artists). It is less appropriate for utility products, government sites, financial dashboards or anything a person is forced to use to get something done. For those, offering both modes — with the dark mode being the well-designed near-black version — is the better default.

Common mistakes

1. Using #000000 with #ffffff body text. Halation makes paragraphs vibrate.
2. Forgetting the focus ring. Dark surfaces hide default browser focus indicators; make them explicit.
3. Carrying over light-theme accent colours. Dark surfaces need slightly lighter, slightly more saturated accents to read.
4. Using a strong background pattern behind body copy. The pattern guide covers which ones can sit under text, and the grain and banding page explains how a small amount of grain hides flat-black banding without making text harder to read.
5. Treating accessibility audits as optional once contrast looks fine. Test with a screen reader and at 200% browser zoom — issues that hide on a desktop monitor at 100% surface immediately.

A short checklist before shipping

• Body text contrast ratio against the chosen near-black is ≥ 4.5:1.
• Link colour is distinguishable from body text without relying only on hue.
• Focus state is visible on every interactive element.
• Form fields have explicit background, border and focus styles.
• Long-form content blocks (articles, docs) use a slightly lighter container or are on a separate light page.
• Background pattern density is below 15% under any reading text, or the pattern is "none".
• The site has been tested with browser zoom at 150% and 200%.

What to do next

Pick the base colour with pure vs near-black, choose the right pattern via the pattern guide, write the gradients you need from CSS gradients, generate the asset in the generator, and pick the right size from the export resolution guide. If the dark hero will host body text, polish using grain and banding and decide whether you actually need a vignette.

Last reviewed on 28 April 2026.