I was wondering what research I can find on what colors to use for primary 'call-to-action' buttons. I know the size of the button and the contrast it has in relation to its background play a big part. I see blue and orange used a lot, but im wondering where I can find more information on this that will help determine the color of the primary buttons in a site design...
Good question! I'm dealing with this issue myself with submit, cancel, and exit buttons on a page.
Here is The Visual Weight of Primary and Secondary Action Buttons for the visual weight of primary and secondary buttons.
Here is Primary & Secondary Actions with a longer list at the bottom.
Here is Working with Visual Weight in Your Designs that addresses colors specifically, although it only lists 5.
I found a book online: Graphic Design: the new basics. While it gives very good overall design tips, the section on color helped me understand the terms and the basics.
I recently found this section on color at MS Dev Center - Windows UX Interaction Guidelines: Color that talks about Microsofts approach to UX. It has a very brief section on what basic colors mean to a user that I found interesting.
Here is a basic summary of what I found:
- Make the primary action button stand out. Use primary and secondary colors to coinside with the primary secondary buttons or use a stronger saturation color for the primary and the secondary buttons more muted. Soft gray color is a good way to show muted secondary buttons.
- For other options besides color, you can use: contrast, lightness/darkness, size, density, complexity in the button design itself.
- Use links as special opposite actions to avoid confusion.
- Try to avoid secondary buttons when possible.
Last of all here is a basic chart for color meaning:
The choice of color for primary button is also dependent on the color palette your interface is using. Choose the color that is not the dominant color, yet it offers sufficient saturation and contrast to stand out from other elements. Primary button color should be used sparingly- use it for emphasizing or highlighting elements, not as the dominating color.