Light text on dark background vs. readability

What’s up with the current design trend of light text on dark backgrounds? Many web designers seem to favour inverted colour schemes, but what happened to readability and usability? I know I am not the only person to find it very uncomfortable to read text on sites with inverted, high contrast designs.

Light-on-dark designs aren’t new. What’s new is that they have been appearing more frequently in the last year or so. Just take a look at the CSS Reboot Spring 2006 participants. Plenty of light-on-dark designs there.

So what, exactly, is my complaint? If I don’t like the design of a site, I don’t have to visit it. Well yes, but there is a lot of interesting content on some sites that use inverted colours. When possible, I read their content in my feed reader. If I can’t do that I just stop visiting. It’s a shame, but my eyes simply can’t take the strain.

It isn’t just about using light-on-dark text in the main content area either. I also find that high contrasts between different areas of the page cause problems. An example is when the main content area uses dark-on-light and there is an inverted sidebar right next to it. It hurts my eyes, and if possible I make my browser window narrow enough to hide the inverted part of the page when I visit sites that have that kind of design.

Note that I am not criticising the aesthetics of inverted designs, just their readability. Several light-on-dark sites look fantastic for a few seconds or even a minute. I just find actually reading articles on them very straining on my eyes, and I hate the way they linger on the retina when I look away from my screen.

Since most of the sites I want to read are quite well-structured and semantically marked up I could just turn CSS off in my browser and gain instant readability. I could also start messing with user stylesheets. I don’t think either should be necessary though.

To me this is an accessibility issue, the same way many people with impaired vision prefer light-on-dark text and may have problems similar to (or worse than) mine when reading dark-on-light text. As far as I know, I am not vision impaired. At least I have never been told so by an optician or an ophthalmologist. I still struggle with high-contrast, light-on-dark designs.

So if you want to use light text on a dark background, please provide an alternate stylesheet that turns the whole design, not just the content area, back to dark on light. You should also consider what Mark Boulton has to say in Five simple steps to better typography:

When reversing colour out, eg white text on black, make sure you increase the leading, tracking and decrease your font-weight. This applies to all widths of Measure. White text on a black background is a higher contrast to the opposite, so the letterforms need to be wider apart, lighter in weight and have more space between the lines.

I haven’t been able to find much recent research or usability testing that compares the readability of light-on-dark vs. dark-on-light designs. If you are aware of anything conclusive, please speak up.

Who else out there is having problems reading light-on-dark text? Who is not having problems and actually find it easier on your eyes? If you have used light-on-dark for a design, did you perform any usability testing? If so, what were the results?

I’d like to know if I need to have my eyes fixed.

Update: My preference for dark-on-light designs is not based purely on what I think looks better. I prefer them because I really cannot read white-on-black or light-grey-on-dark-grey designs unless I’m longing for a headache.

Posted on August 21, 2006 in Accessibility, Usability