What is the research behind using darker contrast menus for global navigation?

Question

I am working on a web application for paid clients to use to access different types of data. I am working on the information architecture and I believe that having a space for global navigation controls that is separate from the workspace which would have some local navigation based on the data content.

I have been looking at the styles of many online sites and I find that in some cases stylistically the global and secondary navigation are light text on dark background and the focus area is dark text on white area (Like the UX-Stack Exchange).

I have also noticed with IT admin applications the navigation tends to be darker while more publicly used websites like Wikipedia are low contrast (between the navigation and the work area) but distinct. I suspect this is to help make the two ares distinct and so that the user has less eye strain when performing longer tasks. I cannot find any articles or information regarding using color contrast in the navigation to make these areas distinct.

• What sort of best practice and research is there regarding the amount of contrast of a section of navigation vs a workspace?
• Is darker navigation used for certain types of web apps where lighter navigation is typically used for others?

Thank you for your time!

Answer 1

I don't have the research but in my own experience (also opinion) it gives the user a reference and easier recognition of the nav or tertiary content to main content. Even more important I believe on the side of UX; a visual hierarchy and focus to the main by giving a darker, to less dark nav and tertiary controls, to light main areas gives the user a feeling of a logical stepped process subconsciously or by recognition. I have not seen too many sites that use the direct opposite UI of a really light to lighter to dark that works. Dark sites invoke negative emotion and most have terrible designs. In contrast some use this method well (think imgur). Let's get some more insight on this...