light on dark or dark on light – readability of interfaces

When designers first take to the design process one of the most influential decisions they make is whether to use light text on a dark background, or dark text on a lighter background. Often the decision comes from many angles, including branding, personal preference, identity of the site/application and other more subtly reasoning. But the most important factor should always be what is the audience doing and how does that affect readability.

For this site, and for one of the applications that I have been building I too am having to make this choice, and for these two particular problems I have chosen completely different schemes.

apple_aperture2.jpg

As always I am making the decisions based on how the designs are going to be used. One is this website – it will probably feature different images in a post together with quite a lot of text. The other an application (although its built with web technologies it is basically an application front-end). The application primarily deals with organising video and other content, and doesn’t often feature long bodies of text.

When we came to design this application co-workers showed their preference for dark backgrounds, partly due to some problems with their eyes, and also because this works in the environment of broadcasting quite well. We will be featuring large image and video previews and exposing functionality around this, but the number one element was usually a preview. Using a dark background made sense for the majority of the audience as it increases the prominence of the most important visual item, but there was another important demographic in the audience of the application. This demographic of librarians usually dealt with text, tags and other keywords to describe and annotate the content held within.

financialtimes.jpeg

When dealing with text, a lot of users are accustomed to white background with dark text; books, newspapers (have a look here for more inspiration), magazines have been using this for years and continue to do so and probably will for many years.

So the solution was to give switchable themes for the user. Librarians or others could switch the design to the light background to help them within their role, and others that wanted the standard look and feel could use the other theme. Users are defined by groups and roles and at every level a standard could be applied for them or they may change it themselves.

Coming back to this website, its still in the design phase and initially I thought about going against the flow, but this would have been the wrong decision, and I would be ignoring everything that I have learnt in the past purely to do something slightly more interesting for me.

There are a number of utilities (among them Opera’s users style sheets) available to help those that want to change their browsing experience to change color – these are particularly helpful for those that are having problems with their eyes.

So what should we be doing, well this is a (limited) checklist:

  • Contrast is all important. Poor contrast between background and foreground makes it very hard for the brain/eye to distinguish whats important and what isn’t.
  • Ambient surroundings of the audience is also important. If your readership is spending most of their time in dark surroundings your light background could be like staring at a lightbulb.
  • In almost all situations you should never use 100% white and 100% black, its just to harsh unless your monitor is flawed.
  • Fonts, leading and kerning all directly influence readability. More of this will follow in another article.
  • It’s inadvisable to mix color at the extremes of the color spectrum. Extreme blue on extreme red would make text extremely hard to read. For more information take a look here at this study by the department of Psychology at Austin Sate University.
  • Not everyone has the same vision. Try and cater for your audience as best as possible but you will not solve it for everyone. If design websites, make sure that its as standards compliant as possible so utilities will be able to switch color.

So my design process is in its first phase at the moment, but the readability of the site is also influenced by other factors, so a simple round up should then be taken further with font choices, line spacing, column width and other details.

There are some studies and additional reading here:

[tags]GUI, Readability, UI, Interface Design[/tags]

This entry was posted in UI eye, Usability. Bookmark the permalink.

One Response to light on dark or dark on light – readability of interfaces

  1. admin says:

    Veerle has some very interesting things to say on the subject:

    http://veerle.duoh.com/blog/comments/my_view_on_light_text_on_dark_background_vs_readability/

    She is coming more from a designers point of view and I find all her points valid, but sometimes you don’t want to be too free in the design choices, but again design for the audience is her best advice.