Light Text on dark Background vs. Readability

March 21st, 2007, filed under Articles, General, Interaction Design

Have you ever wondered why most text is printed on a light background? How many times have you tried reading a full article on your computerscreen and dozed in or completely stopped reading the article?

I’ve thought about it occasionally. Sure, articles can be boring. But you also might consider the color scheme that’s being used on the article. I believe the same applies to text-editors. I’m using Textmate (by Macromates) on my Mac for programming in all sorts of languages. It has always been using its default color scheme, dark colored text on a white background. However, today I decided to invert the color scheme and was amazed how good it felt (here’s a screenshot). The reason for doing this can be hard to explain. I’ve stumbled upon an article written by Roger Johansson about this issue.

Roger published an interesting discussion on “Light text on dark background vs. readability” a while ago. When reading the comments made to Roger’s article, you’ll notice the different opinions people have and their reasons.

Using dark text on a light background, people say it increases your concentration and draws your attention. The opposite will happen when you reverse the color scheme. Instead of using a high-contrast white on black (that will screw up your vision), you might want to use light grey text on a dark grey background. Also increase the letterspacing and avoid bold text. But having my Textmate color scheme adjusted I do have to admit it’s more pleasureable looking at my code.

Overall, I think the comment Oscar Lima made sums it all up.

Resources:

7 Responses

Hihi, interesting! I never thought about it before… Now you know you should change the light grey textcolor of this blog into white ;)

Posted by

:O I read the article wrong! You should now immediately change your design! :p

Posted by

[...] Light text on dark background readability(link) [...]

Posted by

To me it seems to be a combination of problems. One problem is about readability that is opposed to straining the eyes. Also part of the problem is the use of colors vs luminosity.
Part of solving the problem could be not to use black and white but dark on light or reverse. In the first article your post was based on I preferred the “update”-part. What about a light-green background with dark-green text (or the reverse)?

Posted by

Using different colors, besides black and white (if you can speak of them as being a color), should not be a problem. It’s important which colors you use when combining and of course how you use them.

Effective color choice depends on hue, lightness and saturation. Read and watch examples about this at Lighthouse Interactive. Aries Arditi wrote an article about "Effective Color Contrast".

There is even an algorithm that can distinguish the readability of web page colors that has been posted on A-Prompt Project.

@ Inge: Tadaaa, and I’ve changed the layout…again *^_-*

Posted by

I find white on dark text almost impossible to read on a full size website page – it starts shimmering. Good to know I’m not alone…

Posted by

Nice!

Posted by

Have your say

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>