What is the best color combination for on screen reading?
I work at an airline as a pilot and I am involved in the "paperless" project which aims to have no more paper in the cockpit - all the data should be accessible from tablet devices.
We have a lot to read during flights (checklists, rules and regulations, maps and so on). We will have special screens (size of about an iPad) but with a higher resolution (1280x1024).
What's the best color combination considering night/day conditions? And what's the best font to read on screen?
- Please also include sources to your answers (studies or similar)
- Legibility * in various conditions from bright sunlight to complete darkness
- Retention * as there will be no more books, pilots are forced to learn at their home computers (ev. bad lighting, bad monitors)
- Aesthetics * is not really a factor, but in my opinion needed to meet the users expectations
My personal history shows that I work mostly with classic black on white contrasts (as a developer and as a consumer). We already have a software product which allows the pilots to switch to "night-mode" which inverts the most colors, however almost nobody uses the feature. The reason why I don't switch to the "night" mode is mainly because we can dim our device perfectly so there is almost no glow which distracts us during flight and we have the cockpit lights on during cruise.
Airbus Industries started to ship their electronic software with the default setting set to white on black (with the option to switch). I ask myself if they did it only to be conform with the cockpit displays (CRT/LCD mixed, only white on black)?
Lufthansa Systems has a complete system which is by default black on white. I am not aware of an option to switch it into night mode in general, except the navigation maps.
Personally I think it's important to have an eye on the web industry, as by today almost everyone is involved. We read, write and learn in the web - and it's mostly black on white. This could be the reason why most people think white on black is odd and won't use it if made available as an option, because it's not a common standard. So why should we force the user to white on black?
The current choice would be Tahoma 12pt, #222 on #fff with the option for #fff on #000 according to Michael Zuschlag's answer and references.
Very interesting question. Especially considering the different lighting conditions.
While the design criteria is key starting point, the actual screen hardware will have an impact on optimal reading. For example retina iPad displays (2048×1536 resolution) will render some fonts more legible. Other factors are: contrast ratio; display technology (AMOLED / LCD / IPS / VA); sub-pixel organisation; pixel-gap (screen-door effect); brightness control and brightness uniformity; viewing-angle. If you have standardised hardware then test options around starting base.
why dont you say the colour in normal names rather than hashtags an random letters and numbers. I'm so confused
Welcome to UX.stackexchange. This answer functions better as a comment. And you're right it would be better if the colors white, dark gray and black were spelled out - but ASCII is not that esoteric.
Can you use a e-reader device instead of a tablet? I feel like those will be the best.
Legibility depends on high contrast between foreground and background, so black-and-white is the safest bet. See for example:
Hall RH & Hanna H 2003. The Impact of Web Page Text-Background Color Combinations on Readability, Retention, Aesthetics, and Behavioral Intention, Laboratory for Information Technology Evaluation, Technical Report LITE-2003-04.
For indoor web use you might get away with any reasonably dark-and-light color combination. However, considering the possibly harsh and highly variable viewing environment of the cockpit, (e.g., totally dark night to low sun shining directly on the display), you probably want go with black and white.
I believe whether black-on-white or white-on-black is better depends on the font design. Most fonts for personal computers are designed for dark-on-light presentation. If you’re using “regular” computer fonts, you probably should go with black-on-white. However, depending on the performance of your device when dimmed, you might want to consider white-on-black for night mode to maximize visibility of everything else the pilot needs to see. See answers for White font on black background.
The relation between font and readability is complicated, but you’re probably safe going with a “normal” font like Tahoma or Times New Roman. See:
Bernard M, Mills M, Peterson M, & Storrer K 2001. A Comparison of Popular Online Fonts: Which is Best and When? SURL Usability News 3(2).
Bernard M, Lida B, Riley S, Hackler T, & Janzen K 2002. A Comparison of Popular Online Fonts: Which Size and Type is Best? SURL Usability News 4(1).
For answering all kinds of usability/human factors questions regarding the sort of device you’re developing, I recommend my colleagues’:
Chandra D & Yeh M 2006. A Tool Kit for Evaluating Electronic Flight Bags. US DOT Volpe Center Report DOT-VNTSC-FAA-06-21
If you decide to only have black and white, consider having a true black and white screen rather than a color screen. You will get better resolution and contrast.
Top answer. As you are already suggesting - black on white seems the best solution, whereas we will give the users the solution to switch to white on black (also for night mode). What about the new pattern to use #222 instead of #000? What do you think about this? It's a detail, but still it seems to get more and more popular. Stackexchange for example uses #444 and according to Hall RH & Hanna H 2004 this should be no problem as readability will not be reduced until you reach a certain threshold. On the other side: what's the benefit?
Adding to this: A legibility equation for determining ideal viewing in lecture halls claims to be the only architecture/lighting-design paper to deal with multiple media and viewing angles. The ideas in it may be relevant to the variable cockpit environment.
I would slightly modify this to say to have slightly off black on top of slightly off white. Pure black on white produces too high a level of contrast which leads to eye strain and can make things more difficult if anyone has dyslexia (nothing to stop dyslexics from being pilots in theory I would assume, particularly given the large number of moderate dylsexics out there who never get diagnosed)
"Experimentation 3" in this study(.pdf) addresses contrast and background colors. The whole study is fascinating as well. Keep in mind, that there is a time-lag for the eyes to refocus in switching between light and dark that could actually be the difference between life and death in the case of airline pilots.
"Legibility depends on high contrast" among other things. For not-so-youngs, black-on-white might be preferable because as the screen is more brilliant the eye pupils reduce their diameter, which makes easier to focus and cancels somewhat the presbyopia. What's the pilot's average age?
I would recommend testing this out in a few real environments. You may consider allowing individuals to decide what is best for them. I would prefer kindle style probably.
@theotherone Any reference for this? I personally find eye strain is given by not enough contrast
Adding to the article about black on white possible causing eye strain, the reasoning in “Legibility depends on high contrast between foreground and background, so black-and-white is the safest bet.” is flawed. According to WCAG 2.0 level AAA a 7:1 contrast ratio fulfills high contrast needs for various user groups, resulting in `#595959` on `#ffffff` being sufficient. In the given range of `#000` to `#595959` saying that first one is the best bet is bold when in the linked article itself tells us “Nielson does not offer any references for this statement” (black text on white).
@Volker: The WCAG specifies a _minimal_ contrast for _adequate_ legibility for certain users and conditions. Legibility can be _better_ with more contrast, and, for the cockpit, more contrast may be needed. Physical contrast, and therefore legibility, depends on display performance and ambient light, in addition to RGBs. Create some text in black/white and some with a contrast of 7.0. Now unplug your laptop and take it outside on a clear day. Angle the display to vary the amount of shade or sunlight on it. It’ll be apparent that black/white is more legible (or more often legible) than 7.0.
Black text on a white background yields the best legibility, since the bright glow from the background causes your pupils to contract. It's easier to focus your eye with a smaller pupil (much like the depth of field is increased with a smaller camera lens), and it reduces the effect of refractive errors in the eye.
For situations where you don't want to destroy your night vision, a dark background and red or amber text is most comfortable.
Personally I dislike high contrasts with light text on a dark background, so I use colors like 'wheat' on 'dark slate gray'. For dark text on a light background, I find a warmer color is more relaxing. Many e-book readers and text editors use an off-white yellowish tint to good effect.
note that one study found that green was better than red for reading in with dark adapted or night vision as it needs less photons for green light than red for the eye to register i.e. a green on black would work great but for day light black on white with a bright and sharp screen works better even
It's interesting that you (and others) dislike high contrast with light text on a dark background, because according to the accepted answer, that would reduce legibility: "Legibility depends on high contrast between foreground and background". I don't think we've answered this question sufficiently or accurately.
I've been working in a project called eAdept (www.eadept.se) with an application for screens on mobile phones for users that are visually impaired. We've been trying different combination, both indoors and outdoors to find find out what's best for these persons. We've also been talking to, for example specialists and supervisors to visually imapired to get a good explanation of the interaction between differens colors. The result of all these test and information is a combination of yellow and black. We've been using #F8EF20 for the yellow one and also some darker and lighter versions. Maybe a combination like that can work in a cookpit.
We can not use any yellowish colors in the cockpit due to a definition collision with color coded warnings/informations.
Colors aside, you might also be interested in the typeface test report conducted by the International Institute of Information Design regarding the evaluation of the new ‘Tern’ typeface: www.iiid.net/SOMS/InSafety_IVT_Report_Final.pdf (The requirements for road traffic signs should be nearly identical to those for your context of use.)
Well I'm not an avid book reader, but I am a programmer and I look at text all day.
For me text is a tool. I started programming with notepad black and white and it really wasn't all that great.
Today my workshop looks like this.
This is highly tailored to my preferences. In low light environments I strongly prefer light on dark, and I suspect most others do as well. The iphone's maps as well as tom-toms seem to embrace this in their UX where they automatically switch over to a different color theme at night. I'm not a scientist, I don't know how that works. I just know that I like that they do that.
It could be different for light emitting screens vs light reflecting surfaces, such as a monitor vs an eInk screen. I love eInk and always prefer to read in well lit environment with either eInk or paperback. When staring at a monitor all day however, especially in a low light environment, light on dark all the way.
I find dark on light from a light emitting screen especially harsh on the eyes in the morning before I'm really awake.
Getting back to my code example, code is highly structured and there is a correct way to interpret what you are reading. Even still, color assists greatly in comprehension. When reading a book, how many times have you had to go back to refresh your memory of the context of what was written, or the perspective from which it was written? These are some areas where I think color can greatly assist. Just something to think about.
I agree completely that it would be very beneficial to consider something somewhat similar to syntax highlighting for documents like these. It does wonders at making very similar information more clearly distinguished, allowing users to find their place quickly. It is, however, demonstrably more likely to trigger people's style preferences (how often do developers disagree about syntax colouring themes?).
To make your work readable, consider san-serif fonts for devices. Serif fonts are preferred when working with print-design because the user is expected to read for a long time. When time is an issue, go to Serif fonts like Baskerville. Otherwise, stick with sans-serif for small-sized text and articles.
Also, know that sometimes your typography may be flawless, but your WHITESPACE is poor. Design needs white space. The eye needs to rest, otherwise your user will get tired and leave the page or miss important information.
Also, keep Accessibility in mind. About 20% of the population has some kind of disability, and within that are visually impaired people. There are many complicated diseases that are common and affect ability to see the contrast/value. So keep this in mind when designing because one 'ideal' typography solution for one population may bring you chaos with another demographic...
Curious why sans-serif is good for devices whereas serif is good for print? Does this affect readability or is it just aesthetics?
Yes! You are right. The distinction has to do with readability. Reading sans-serif for a prolonged period causes less eye-strain. Interestingly enough, there's even studies on the distinctions between serif fonts http://uxmovement.com/content/how-sans-serif-typeface-styles-affect-readability/
I guess my question is really: If sans-serif is better for your eyes, and we want to make things easy for our users to read, then why would you even want to use a serif font (other than aesthetics/variation)?
Serifs help your brain at character recognition. You can read serif fonts faster. But serif fonts on low resolution screens require either that the serifs are inconsistent in shape, or that you have to run kerning and leading at integral multiples of the screen resolutions. This is one reason why good screen fonts are individually designed on a per pixel basis. E.g. Someone took the time and tweeked 10 point Tahoma and 12 point Tahoma separately. It's getting less important with higher resolution screens. And you are seeing serif fonts used in web design now.
Another interesting point of research, especially since your question is about screen reading, is Amazon's Blue Shade. With this, as the name implies, Amazon makes the color of the screen "warmer" and reduces the amount of blue on the screen, in an effort to have healthier viewing in low light.
Amazon create the technology because of a study published in the United States National Institute of Health stating that tablets reduce human production of melatonin and reduce ability to sleep.