User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am using twitter bootstrap and I don't like the default dark gray background color for the navbar.
So I was thinking of chosing a different color. But being a programmer and not a designer first this is turning out to be harder problem than I imagined.
Are there any guidelines/principles/best practices in choosing background color for the navbars and how that color is related to/complements other colors on the page.
Any website to take inspirations from?
I feel your pain on this one. I like to refer to Adobe's Kuler for some good ideas on color palettes/complementary colors.
Also, PatternTap has a huge gallery of navigation elements, although if you're just looking for new colors it might be a bit much to sift through.
I think the principle to follow here above all else is simple: make sure there's enough contrast to be readable. Contrast-A is a good web-based tool that can tell you if the contrast between the text and background colors is high enough to be readable. If you want something that will examine a production site, checkmycolours.com can do that, although it seems to provide goofy results.
The colour you decide on depends on whether you're coming from a UI designers point of view, a UX point of view, or an accessibility point of view, and finding the right level of all.
For example, if you were looking at 100% accessibility you'd go with black text on a yellow background and have the option to change. If you were coming from a 100% UI p.o.v. you'd probably design it to fit in with the restof the system but you might end up with something less legible. 100% UX would be well-designed enough to not make the user feel like they're looking at something which is easy to read and noticeable and probably in the correct order too.
Combine all 3 in the right ratio and you should have something which is easy to read, easy to use, looks nice and is legible to those who can't see so well.
Tip - don't RELY on colours to depict information. The colour should supplement the information, so that those who do not see colours as easily cannot get confused. So using different colours for different sections of the site, for example, without backing that colour up with text or symbols, is a nono!
good infographic design books take you through the pertinent facts about color choice. some websites and tools like kuler provide instant gratification for a complimentary color based off your existing pallete. if your pallete is tonal or other scheme, best to continue in same vein.
