English|Português|Español
UserPasswordLogin

HOME
SESSIONS
INFO
Imagen6538E

Usability: Colors, Contrast and Underlining

To read comfortably, a good contrast between background colors and texts should always be established. A combination to avoid reading distractions is necessary. By María José Serres, ARTech Marketing Team

If patterned backgrounds are used, they have to allow for content reading without catching the eye's attention. One should not forget that the background is a medium to help reading and facilitate the content's comprehension.

The more color contrast, the more comfortable the reading. The highest contrast is achieved by using a white background and black letters. Although it has a lot of contrast, the opposite combination (black background and white letters) is not so widely used. Forums have discussed which of the two options is better for reading texts. In my opinion, it is important to keep in mind the type of site to develop and its target audience when deciding on the contrast. If we want to create a site for skaters, rock'n roll fans, bikers, etc., then a black background would be preferred. For corporate sites, intranets, banking sites, etc., I recommend using a white background with black letters. In the same Web application environment, to vary the background's color, it is always recommended to keep light or pastel colors and letters in dark colors, like black or close shades of black.

There are sites where you can try some color combinations for background and text online. One of them is http://www.nbp.org/ic/nbp/process.html?mv_nextpage=customize%2ehtml&mv_todo=set&style_size=large&id=EcfxrsZw

If you'd like to read about research done on this topic, I recommend http://www.usabilitywebsite.com/usabilityresearch_color.htm  

With GeneXus 8.0 you can set color combinations in the topic editor, under "Form" class, and play around without having to change a single line of code.

There are a couple of text colors that have a particular meaning, regardless of what the text says. Therefore, one should use those colors only for that specific meaning and, conversely, to get such particular meaning use those colors only: Red and blue.

Red means attention, error, danger (it also applies to a physical environment, such as the "stop sign"), therefore, it should only be used for error messages. When showing an error message in a color other than red, the user will have a more difficult time to identify this text as such (sometimes attention icons are used, but what is recommended and most widely used is the red color).

Blue, generally seen with an underlined text, is used to show a link.

If within a text there is a blue word, intuitively one tends to think that it is a link (even if it's not underlined), and the user is disappointed if s/he clicks on that word and it doesn't go anywhere.

Oftentimes links within text blocks are shown in the same color as the text itself, with underlining. This may also be thought of as a link, although it's not as effective as using the blue color code. Therefore, I recommend no underlining in texts. If you'd like to highlight something in a text block, it is best to use bold letters.

Source http://www.grokdotcom.com/usability-of-color.htm 

Related
Typography
Text Alignment
Fonts
Usability: Downloading Speed
Usability: Types of Links