Readability Factors and Black Websites

Black Text on a white background.

White text on a black background is hard to read

White text on a black background.

You read black text in newspapers, books, magazines and online.
High contrast is good. Grey text on a grey background is not so good.

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.
Problem solved.

Black Background and White Text is not Cool

Here is where I disagree. Readability just took a huge nose dive.
Don’t believe me?
See is believing.

See the images above, or for a more immersive experience visit the link below and read to the bottom of the page. And then click the link in the text.  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 Solution

If you really want a dark website, produce a dark design.  But create a main body text box and place the text on a white or even light grey 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.

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

Text formatting improves readability, right side. from Cameron Moll

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?