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.
Answer
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:
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.
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
What makes a good IDE color scheme
No comments:
Post a Comment