47

I'm working on a ERP / Accounting (lots of tables and data) web app and was wondering what color scheme would be appropriate for this type of application? Users will be sitting in front of their computers for 8+ hours enetering lots of data on daily basis and I would like to make that experience as comfortable as possible to their eyes.

Most of these application I've seen are using some sort of a white/grey/blue scheme with white being dominant but I'm concerned that this color might strain their eyes to much especially considering different brightness of monitors and working in the dark.

Any help would be appreciated.

5
  • 1
    High contrast makes for easier reading, and less eye strain. And working in the dark is just a very stupid thing to do if you want to avoid straining the eyes.
    – bjarkef
    Feb 24, 2014 at 12:16
  • 11
    Make your app so they can choose from different schemes ?
    – Florian F.
    Feb 24, 2014 at 12:28
  • I have recently learned that astigmatism creates a preference for dark on light ui's while people not affected by astigmatism tend can more easily deal with light on dark ui's. It has to do with the amount of light reflected off a light background helping people with astigmatism. So whatever you do, make sure you do not force people into using a single color scheme, and provide alternative. Feb 24, 2014 at 18:57
  • Our friends at graphicdesign.stackexchange.com would give you better answers. I suggest migration.
    – Izhaki
    Feb 25, 2014 at 1:51
  • 1
    I would not pre-define a color scheme because what color is good or bad is so subjective. A better route is to provide functionality that allows user to customize their own color scheme. Feb 25, 2014 at 19:42

4 Answers 4

50

While a good color scheme will help, the key thing to note here is the need for contrast for enhanced readability. To quote this article from eyemagzine

Light grey text on a white background and small text size both lead to an increased orbicularis oculi activity and decreased blinking. These two conditions are related to text quality, and we would expect to find similar indicators of eye fatigue with poor font quality or condensed letter spacing.

For examples of good color combinations with sufficient contrast I recommend reading this article on UX matters which has this to say on what contrast to choose for minimal eye strain.

Ensuring the Readability of Text Through Contrast

For backgrounds behind text, use solid, contrasting colors, and avoid the use of textures and patterns, which can make letterforms difficult to distinguish or even illegible. Choose combinations of text color and background color with care. Value contrast between body text and its background color should be a minimum of about eighty percent.

Contrast with a white background

Black text on a white background provides maximal value contrast and, therefore, optimal readability for body text. The contrast between charcoal gray (#333333) text and a white background is about eighty percent—thus giving minimally good value contrast. -

The following dark colors provide good to excellent contrast and legibility for text on a white background:

enter image description here

The importance of contrast with regards to reducing eye strain is explained further in the article as highlighted below

Contrast and Legibility “To provide the best legibility, ensure that text contrasts adequately with its background in both hue and value.”

To provide the best legibility, ensure that text contrasts adequately with its background in both hue and value. When there is insufficient contrast between the hue or value of text and its background color, the text appears blurred or has a halo effect around it, making it difficult to read and resulting in eye strain.

That said the choice of text and size is also critical. To quote the above referenced eye magazine site article

Designers usually try to use high quality text when readers are expected to read for any period of time, but using a comfortable text size is not always possible. In print, there is a trade-off between type size and the amount of text that can fit on a page. Nine-point type may be chosen because it is cost-effective, whereas eleven-point would be easier to identify visually and would reduce eye strain. Twelve-point text may be needed for good character definition on computer screens, because readers frequently sit further from a screen than from a printed page, but many Web pages specify small font sizes despite the fact that it costs no more to create additional or longer pages. Designers need to argue for larger text sizes to reduce the effects of eye strain.

From an Accessiblity standpoint I also recommend looking at W3C guidelines on recommended level of contrast

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

You should also considering offering a high contrast option which will allow users to work comfortably in low light situations. It would be a good idea to provide multiple options like how kindle handles it as shown below.

enter image description here With regards the benefits of using the high contrast mode in dark rooms,I recommend looking at this snippet from this article

However, using light text on a dark background also has its advantages for attracting less light in a dark room.

That said, while reversing color ensure this taken care of better readability

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.

Lastly here are some articles on color schemes suitable for coding which might help you make your final decision (I know your application does not deal with users coding on it but the use case is similar here..)

Solarized color schemes help you code longer :To quote the article

Solarized doesn’t just claim to be easy to read based on the designer’s personal preferences, though. Ethan Schoonover, the designer responsible for the project, clearly explains the rationale behind the decisions he made on the project site. The most prominently visible is the use of selective contrast:

“On a sunny summer day I love to read a book outside. Not right in the sun; that’s too bright. I’ll hunt for a shady spot under a tree. The shaded paper contrasts with the crisp text nicely. If you were to actually measure the contrast between the two, you’d find it is much lower than black text on a white background (or white on black) on your display device of choice. Black text on white from a computer display is akin to reading a book in direct sunlight and tires the eye. Solarized reduces brightness contrast but, unlike many low contrast colorschemes, retains contrasting hues (based on colorwheel relations) for syntax highlighting readability.” White-on-black themes, popular among developers who want to reduce eye strain, are an improvement over black-on-white themes, but the contrast is still far too great.

Here are some links worth checking out

Color schemes for vim

What makes a good IDE color scheme

2
  • 2
    +1 one of the most informative answers I've seen on this stack. Bravo!
    – Racheet
    Sep 18, 2014 at 10:43
  • 1
    Reminder: The human eye's focusing mechanism works only on contrast; it's essentially insensitive to color. Present an graphic in one color on a background of another color that has the same luminance, and it doesn't matter how different the hues are, the visual system will seek back and forth endlessly trying to find a focus point. Rather unsettling, since you think you SHOULD be able to focus on it...
    – keshlam
    Oct 3, 2014 at 3:36
5

While working on a data intensive project management app recently, I opted to use a light grey background (#f3f3f3), white (#fff) "cards" with a very subtle box shadow, and light-black (#333 of #585858) text on the cards. The area the user needs to read stands out, but is still white. The contrast between the text and the background is easy on the eyes. For links and other colors, I used "pastel" type shades so it's not too dark and not too bright.

I got this idea from looking at webapps like Google+, LinkedIn, Podio, and more. Check out these UI kit screenshots - it seems like this trend is quite common.

enter image description here enter image description here enter image description here enter image description here enter image description here

The question is: is this a trend or actually better for users? In my experience (taking a webapp that had darker elements and an all white background and then making it "flat", adding the grey background and "cards") this seems like a better route. This is based on feedback from users using the app heavily before and after the redesign.

1
  • 2
    Grey text on white background is almost unreadable for me.
    – aventurin
    Jun 4, 2016 at 13:31
2

I've always felt that for long copy, reversed text is really difficult to read but for long hours it's a godsend. Consider how most programmers look at their environment. There is a good reason for this:

PHPStorm Darcula theme

The JetBrains Darcula theme has been exceedingly popular as it is both high contrast and desaturated. You can offer a similar option in midnight blues that is equally pleasing on the eyes. Note that we throw out the top and bottom 20% of the brightness scale as well.

Would I read a novel like this? Probably not. This style of interface is great for digesting blocks of information for hours on end. It's awful for paragraphs.

2
  • 2
    THe main reason that themes like this work is to really bring out one core feature of programming IDE's: Syntax Highlighting. If, in the accounting software, you plan on using syntax highlighting to make the different parts easier to digest, that it would be a great takeaway from the design of IDE's like JetBrains. You could, for example, make table headers one color, column headers another, individual table data a third, make a another to represent different data types (dates, strings, numbers, etc.) and it might make for a really usable product.
    – JHixson
    Feb 26, 2014 at 22:47
  • All good points. When I think of data, I immediately think of syntax hi-lighting. I hadn't even realized what I'd done there.
    – Imperative
    Feb 27, 2014 at 23:44
0

Light grey and other light shades on white or another light color are purely evil for some of us. I simply can't read it. Ask some older folks to check your choices on a variety of monitors before feeling everyone should just love licorice-exlax ice cream just because you think it tastes great.

It would be nice if people would try these combinations on a variety of monitors without tweaking to see that what is acceptable on some, is actually non-existant on others. I was actually blown away when I saw that one of Google Maps' decontrasting moves actually had roads on some monitor setups.

I personally would fail about 3/4 of the images avi posted above as being too much strain to bother.

1
  • Welcome to the site, @Mike. At the moment, this post reads largely as opinion (and perhaps a bit of a rant). Can you edit it to provide supporting evidence? Oct 3, 2014 at 4:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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