Speak to us directly on 781-640-8874

Readability Factors and Black Websites

You read black text in newspapers, books, magazines and online. The text is black and the page is white, not gray.
High contrast is good for readability. Grey text on a grey background is not so good for readability.

White text on a black background is hard to read.

White text on a black background is hard to read.

Black is Cool

But you want to be different and cool. Black is cool. More black is cooler.
Great idea, let’s make the website black. Cool.
Black text on a white background is easy to read.

Well, the black font is now invisible on the black website. Woops!
No problem, we can change the font to white. Now it is highly visible and there is lots of contrast.

Black text on a white background.

Black text on a white background.

Problem Not solved.

Black Background and White Text is not Cool

Here is where I disagree with those who love white text on a black background. Readability just took a huge nose dive.
Don’t believe me?
See is believing.

See the images above, but for a more immersive experience visit the link below and read the text all the way down to the bottom of the page. And then click the “this link”  link in the text.  Here is the website to make a quick visit to and them come back.  http://www.ironicsans.com/owmyeyes/
I suggest that your eyes will send out a sigh of relief after switching from the black background to the white background.

One Effective Solution

If you really want a dark website, produce a dark design. But create a main body text box and place the dark text on a white or even light gray background.

Readability: The ease with which most people can read text.

Readability Factors:

Low contrast results in poor readability

Contrast – difference in brightness and color between the font and the background. Black font on white is best

Line Height – the space between lines of text. Too close and it is hard to read.

Letter Spacing – the space between the letters. Too much and too little makes it harder to read.

Text formatting improves readability, right side. from Cameron Moll

Line Length – Number of words on a line. Very common error. Best is 10 to 14 words per line.

Formatting – The position of text relative to surrounding text. Related text near. Unrelated text further away.

To improve the readability of your website consider the benefits of black text on a white background and review your line height, letter spacing, line length and formatting for the best readability possible.

Are you a fan of black websites or do you find them hard to read?

Share

One Comment on “Readability Factors and Black Websites”

  • Piercie May 27th, 2014 12:40 pm

    I’ve never had trouble reading white text on black backgrounds. In fact, as someone who’s on the internet constantly, I find it a lot less straining to the eyes. It’s always a relief coming to a black site (especially when using the internet at night).

    I think the best solution, personally, is to have two themes that the viewer can toggle: dark on light, light on dark. That way they get the best that fits them.