15

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...

Improve this question
1
  • 3
    Which countr(ies) / culture would be the main target audience for this site ?
    – PhillipW
    Commented Nov 18, 2011 at 22:01

2 Answers 2

Reset to default
7

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:

enter image description here

Improve this answer
3
  • 3
    Please provide a summary of what each link does. The reason being a link can go down and then people who see this answer will have no idea what that link was about.
    – Mervin
    Commented Mar 4, 2013 at 16:41
  • 3
    Can you please summarize the findings in these links? All I see is a bunch of places to go in this answer, but not any actual content in the actual answer.
    – Matt Rockwell
    Commented Mar 4, 2013 at 17:19
  • Matt & Mervin, thanks for the comments so I could improve my answer.
    – user9533
    Commented Mar 4, 2013 at 20:34
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.