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.

    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.

    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.

    Sepia -> bg: `#f2f0d5`, fg: `#5c4a36` - Dark -> bg: `#363636`, fg: `#ededed` - Light -> bg: `#f5f5f5`, fg: `#262626`

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

License under CC-BY-SA with attribution

Content dated before 7/24/2021 11:53 AM