89

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)

EDIT:

Factors

  • 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

Personal

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.

Airline Industry

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.

Web Industry

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?

Current Choice

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.

Improve this question
6
  • 3
    Very interesting question. Especially considering the different lighting conditions.
    – Marjan Venema
    Commented Feb 1, 2011 at 7:54
  • 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.
    – Jason A.
    Commented Dec 17, 2014 at 13:20
  • why dont you say the colour in normal names rather than hashtags an random letters and numbers. I'm so confused
    – user66494
    Commented May 26, 2015 at 2:45
  • 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.
    – Mayo
    Commented May 26, 2015 at 3:13
  • Can you use a e-reader device instead of a tablet? I feel like those will be the best.
    – CleverNode
    Commented Nov 18, 2015 at 14:48

7 Answers 7

Reset to default
47

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

Improve this answer
11
  • 2
    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.
    – Mart
    Commented Feb 1, 2011 at 8:43
  • 1
    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?
    – Wolkenjaeger
    Commented Feb 1, 2011 at 10:05
  • 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.
    – isomorphismes
    Commented Sep 11, 2013 at 14:11
  • 2
    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)
    – the other one
    Commented Dec 17, 2014 at 14:35
  • 1
    ux.stackexchange.com/questions/23965/…
    – the other one
    Commented Nov 1, 2016 at 15:35
16

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.

Improve this answer
3
  • 5
    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
    – Dan D.
    Commented Feb 11, 2011 at 20:27
  • 6
    Would be great to have a source of the study. Sounds interesting.
    – Wolkenjaeger
    Commented Feb 12, 2013 at 9:01
  • 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.
    – End Antisemitic Hate
    Commented Mar 1, 2020 at 6:29
8

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.

Improve this answer
2
  • We can not use any yellowish colors in the cockpit due to a definition collision with color coded warnings/informations.
    – Wolkenjaeger
    Commented Feb 12, 2013 at 9:03
  • 2
    @Wolkenjaeger: Maybe you could add this restriction to your question?
    – unor
    Commented Apr 11, 2014 at 15:43
5

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. enter image description here

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.

Improve this answer
1
  • 1
    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?).
    – Kit Grose
    Commented May 26, 2015 at 3:18
4

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.)

Improve this answer
2

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...

Improve this answer
4
  • 1
    Curious why sans-serif is good for devices whereas serif is good for print? Does this affect readability or is it just aesthetics?
    – Luke
    Commented Jul 20, 2016 at 21:37
  • 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 uxmovement.com/content/…
    – Ana Zdravic
    Commented Jul 21, 2016 at 6:16
  • 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)?
    – Luke
    Commented Jul 21, 2016 at 14:30
  • 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.
    – Sherwood Botsford
    Commented Dec 29, 2016 at 22:43
2

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.

CNet Story about Amazon Blue Shade

How to enable on your Kindle

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.