Dark Backgrounds and Long Text

Why it is harder

Light text on a dark background produces a spreading effect around each letter, which makes the shapes slightly less distinct.

That effect is stronger for people with astigmatism, which is common, and stronger again in a bright room where the eye is adapted to more light.

For a heading or a short block it makes no practical difference.

Over several hundred words it accumulates into something people experience as tiring without being able to say why.

Where dark works well

• Headings and short blocks.
• Navigation and footers.
• A single panel for emphasis.
• Images and video, which look better against it.
• Interfaces used in low light.

The third is the useful one for most business sites. A dark section breaks up a page and draws attention precisely because the rest is light, which is an effect that disappears if the whole page is dark.

Where it costs you

The pages where somebody is doing sustained reading.

Advisory pages, guides, and anything explaining a process.

Long service pages where the argument is being made in the text.

Terms, policies, and anything somebody has to read carefully.

And forms, where somebody is moving between reading and typing, which is more tiring again.

Those are the pages that do the commercial work, which is the reason this matters beyond taste.

If you are going to use dark

Since it is sometimes the right choice and can be done well.

Avoid pure white on pure black, which is the harshest possible combination and the one most sites reach for.

Use a light grey text on a dark grey background instead, which reduces the spreading effect noticeably.

Reduce the font weight slightly, since light text on dark appears heavier than the same weight on a light background.

Increase the space between lines a little more than you would otherwise.

And keep the line length shorter, since long lines are harder to track in either direction and worse here.

A worked example

A business rebuilt their site with white text on near-black throughout, which looked considerably more distinctive than the previous version.

Their longest and most valuable page, a guide answering the question customers ask most, saw its average reading time fall by about a third.

Enquiries from that page fell with it.

They changed that page and two others to dark text on a light background, kept the dark treatment for the home page and the navigation, and adjusted nothing else.

Reading time and enquiries both recovered over the following months.

The site still looked distinctive, because the dark treatment was still doing the work where it was visible first.

Contrast is necessary and not sufficient

Worth separating, since the two get confused.

A contrast ratio measures the difference between text and background, and both light-on-dark and dark-on-light can pass comfortably.

Passing that check does not mean the text is comfortable to read at length, which is a separate property.

So a dark page can be fully compliant and still be the wrong choice for a two-thousand word guide.

Check the ratio, and then judge the reading experience separately by reading the page yourself, on a phone, in a bright room.

That second test is the one that catches this.

Print is the other place it breaks

Worth a moment, since it produces an occasional and expensive failure.

A dark page printed on paper either wastes an enormous amount of ink or, more commonly, prints the light text as white on white and produces a blank sheet.

That matters for quotes, terms, instructions, and anything a customer might print to keep or to show somebody.

A print stylesheet that forces dark text on white for those pages is a small piece of work and prevents somebody receiving an empty page.

Test it by printing your own terms page to a file, which takes a minute and is never done.

Let the reader choose where you can

The option that avoids the argument entirely.

Many devices now signal a preference for dark or light, and a site can respect that automatically.

Supporting both is more work and it means the person reading at night gets dark and the person reading outside gets light.

Where that is too much, build the light version properly and let the device do nothing, which is safer than building only a dark one.

Do not build a dark version that ignores the preference and then a light one that nobody can reach.

Check it where it is actually read

Since the design is approved in conditions nothing like the ones it will be used in.

Read a full page on a phone, outside, in daylight, which is where a large share of your visitors are.

Read it on a phone at low brightness, which is the other common condition.

Ask somebody over fifty to read a page and say whether it is comfortable, since the effect is stronger with age and designers are frequently not the audience.

Those three checks take ten minutes and are more informative than any general rule including this one.

Watch the edges of the dark section

A practical problem where dark and light sections meet on the same page.

Elements that work on one background frequently fail on the other: a logo with a dark outline, an icon in a single colour, or a bordered image.

The usual symptom is something that disappears entirely on one section and looks correct on the other, which nobody notices because pages are reviewed one screen at a time.

Check any repeated element against both backgrounds, particularly the logo, the icons, and anything with a transparent background.

The same applies to buttons, where a treatment designed for a light page can lose its definition against a dark panel.

The counter-case

Dark is not wrong.

It is genuinely better in low light, preferred by many people, and expected in some categories.

It also makes photographs and video look better, which matters where the images are the argument.

And a well-executed dark page with generous spacing and softened contrast is considerably easier to read than a badly set light one.

Use it for short blocks and emphasis, use light for sustained reading, and never use pure white on pure black.

What to do

1. Identify the pages people read at length.
2. Use light backgrounds on those.
3. Keep dark for headings and panels.
4. Avoid pure white on pure black.
5. Increase line spacing if you use dark.
6. Read a full page outside on a phone.
7. Ask somebody older whether it is comfortable.

Step one is the decision that matters, since this is a page-by-page question rather than a site-wide one and the pages doing the commercial work should be the readable ones.

Measuring the difference is covered in colour contrast without a design background.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.