Appropriate Button Color for Dark Background

What is a good color to use for a button that will be put on an HTML page that uses this dark background color: #404040 ?

I looked at various shades using Adobe’s Kuler of the above mentioned background color (#7F7F7F, #FFFFFF, #E5E5E5) and I’m thinking about making a PhotoShop button using #7F7F7F.

Any advice would be greatly appreciated. Thanks in advance.

Answer

In terms of usability, the issue’s more about prominence than color alone, so it depends how you’re designing the button besides color (things like size, depth, patterns, font colors/shade, whatever makes it “pop” out.). It will also depend on the type/purpose of the button.

Call to action buttons should be as prominent as possible without hurting the user’s eyes and making other content difficult to focus on.

Navigation buttons can, and arguably should, be subtle, so long as the navigation as a whole is apparent.

For any sort of navigation, you only need it prominent enough the user knows it’s a link. I like to add very prominent hover states to navigation buttons. What should be more prominent than an item that you know the user is focussing their attention on at that moment?

In summary, if your designing for your navigation buttons right now, I would keep them a similar color to your background (of the navigation itself), and have prominent hover states.

Attribution
Source : Link , Question Author : Anthony , Answer Author : Eric

Leave a Comment