Light text on dark background vs. readability
You know we work very hard on this blog – bringing info on various computer topics right into your home. Simply Seniors Computer Tutors work with seniors and their unique computer needs. One such unique computer need is the ability to find the right ‘screen interface’ for our seniors with visually difficulties. Because Computer has spent many years working these issues we have discovered Black Backgrounds and white text are very reader friendly. The high contrasting colors make it easier to focus on the letters on the screen.
Recently, I asked our Facebook friends what they preferred and here is what they said:
Hi guys - I need your advice! As readers do you prefer a screen like this, white with small black text OR a site in black with white text? I work with seniors who tend to have vision problems. A white background is brighter and harder on the eyes so black is suggested.... now my question is what is your call? You can answer with BLACK or WHITE depending on which background you like. THX for your help.Friday at 6:05pm · · Like · Comment
Margaret Devereux Kile Stacey - I just went to your site - love it! I do think the black background is much easiser on the eyes. I vote for Black background! Hugs to all!
Yesterday at 7:38am · Like
Catherine Beierling Biegler black w/ white
Yesterday at 9:03am · Like
Denise Marie Sinnott-Klenotich I know when Britty did eye therapy, they said the white is BRIGHT and since she was gaining her eyesite back...the dr. didnt want her to STRAIN her eyes, so we did a lot of things w/ black /white and then slowly did white/ black and just adjusted the "brightness" now she is good w/ white/black ;).and well you KNOW that is why I used CAPS for ever :) but I think I am really doing well NOW :) ahhaah...hope thta helps
Yesterday at 10:58am · Like
It looks like most of those polled like black on white.
Does it matter what your users prefer? I would certainly hope so. Does the choice of color matter? I think we all know so: Try reading dark-red text on a dark-brown background, or bright-red on dayglo-green. Some color choices are nearly impossible to read, and others just plain hurt.
Surprisingly, however, there is some indication that using white on black (or other light-text on dark-background combinations) is actually preferred by those with impaired vision.
The following article was written in 2006 – you can read it at the web site posted below. The Author shares his dislike for the Black background white test look and discusses his personal eye strain issues while reading text on this type of website. From some of the words it appears the writer was from over seas.
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 2006participants. 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 tovisit 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?
Google thinks that it is important that we consider using the black background. Have you ever seen this site:
It’s google only high contrast style. Here is what Google has to say about WHY they made www.blackle.com
How is Blackle saving energy?
Blackle saves energy because the screen is predominantly black. "Image displayed is primarily a function of the user's color settings and desktop graphics, as well as the color and size of open application windows; a given monitor requires more power to display a white (or light) screen than a black (or dark) screen."Roberson et al, 2002
In January 2007 a blog post titled Black Google Would Save 750 Megawatt-hours a Year proposed the theory that a black version of the Google search engine would save a fair bit of energy due to the popularity of the search engine. Since then there has been skepticism about the significance of the energy savings that can be achieved and the cost in terms of readability of black web pages.
We believe that there is value in the concept because even if the energy savings are small, they all add up. Secondly we feel that seeing Blackle every time we load our web browser reminds us that we need to keep taking small steps to save energy.
How can you help?
We encourage you to set Blackle as your home page. This way every time you load your Internet browser you will save a little bit of energy. Remember every bit counts! You will also be reminded about the need to save energy each time you see the Blackle page load.
Help us spread the word about Blackle by telling your friends and family to set it as their home page. If you have a blog then give us a mention. Or put the following text in your email signature: "Blackle.com - Saving energy one search at a time".
There are a lot of great web sites about saving energy and being more environmentally friendly. They are full of great tips covering the little things that we can all do to make a difference today. Try Blackling "energy saving tips" or visit one of the many great blogs dedicated to environmental awareness.
Thanks Google! I have also discovered that a larger font size may help while reading white on back. We have increased the font size of today’s blog. Give Simply Seniors Computer Tutor your feed back. We’d like to know if the increased font size has helped your ability to read our blog.
Remember Simply Seniors Computer Tutor is here to help with your unique technological needs. You can call 321-431-3866 for more information!
Since I started this blog I have been asked if I can reverse facebook, making it black with white text. I have found a web site that shows it can be done and i have installed the necessary software but it did not work – so I will keep working with it and pass any findings along to you.
Thanks again for reading and please pass this along to your friends! Click on our little FACEBOK link and become our Friend! We are looking to meet 100 new friends each month this year 2011! Check out www.ComputerTutorHelp.Us
321-431-3866 Simply Seniors Computer Tutor