How Button Color Contrast Guides Users to Action

by on 12/23/14 at 10:56 am

Have you ever clicked a wrong button by accident? Users make wrong decisions on modal windows when they’re not guided in the right direction. Many modals prompt users to act without making the different actions clear.

Clear color contrast between different buttons is what guides users to choose the right one. Not seeing a clear action to take causes uncertainty in users and slows down their task. It may even cause them to choose the wrong action that derails their task.

Positive, Neutral and Negative Actions

There are three types of actions that every button falls under:

  1. Positive – Changes, sends, or adds information
  2. Neutral – Makes no change or takes users back a screen (e.g. Cancel)
  3. Negative – Deletes, resets or blocks information

A modal window will often have a combination of these actions. In order for users to tell different actions apart, the color contrast of the buttons should reflect its role.

Positive Actions Need the Highest Contrast

Positive actions are the most common on modals. Users will need to know which actions allow them to complete their task. You should make that easy for them by giving positive actions the highest color contrast of all. Any neutral or negative actions placed next to it should have lower color contrast.

positive-actions-contrast

To get the highest contrast, give your positive action buttons a color fill with a cool color and white text. Cool colors like blue, green and violet are soothing to the user’s eyes and tend to move back in space. The white text is easy to see and stands out over normal black text.

A neutral or negative action placed next to a positive one should not have a color fill. Putting a color fill on it makes the color contrast too similar. Instead, the button should only have a border outline. This way it blends in with the background and doesn’t compete with the positive action for user attention.

When Negative Actions Have Highest Contrast

Negative actions shouldn’t have higher contrast than positive actions. Positive actions are used more often and safer, so it’s important users don’t mistake a negative action for a positive one. But when negative actions are placed with only neutral ones, they should have higher contrast.

negative-actions-contrast

In this case, you should give your negative action buttons a color fill with a warm color. Warm colors like red, orange and yellow stimulate the user’s eyes and tend to come forward in space. When user’s see it, they’ll know they should think twice before they click the button.

Neutral Actions Have the Lowest Contrast

A modal window never has a neutral action by itself. It’s always paired with a positive or negative action. It should have the lowest color contrast so that it doesn’t compete with other actions.

neutral-actions-contrast

A black border outline of the button is enough to tell users that it’s a neutral action. There’s no color fill so it won’t take attention away from positive or negative actions.

Don’t make the button outline and text light gray otherwise users might mistake it for a disabled button. They need to contrast with the background so that it looks visible and active.

Final Thoughts

Positive, neutral and negative actions can co-exist if they’re color contrasted in a clear way. The more clear the contrast, the faster users can complete their tasks. Color plays an important role on the user interface. It’s not just for aesthetics, but also a tool to guide users to action.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

AFFILIATES

Elegant Themes CSSIgniter

Author and editor-in-chief of UX Movement. Finds beauty in clear, efficient design and loves fighting for users.

12 Responses to “How Button Color Contrast Guides Users to Action”

  1. Steve

    Dec 23rd, 2014

    Interesting ideas well presented – as someone who has worked with accessibility for a long time now I would caution against the use of colour (alone) to convey information.

    In your example where you have neutral, negative and positive, the only difference between neutral and negative is colour – while the words themselves will obviously add meaning, try to avoid using colour to convey meaning, it can make things unnecessarily difficult for colourblind users.

    • anthony

      Dec 30th, 2014

      The difference in the examples is not only color, it’s also shape. A color filled button and an outline button are drastic in contrast compared to two color filled buttons of different color. Color blind users won’t see a visual clash because the outline button is the background color and the color filled one is the foreground.

  2. Dhileepan

    Dec 24th, 2014

    Rather than saying Positive and Negative actions, I think it will be better if “Primary action” and “Secondary action”.

    – I click on “Edit” – The modal box has Save changes – Primary and cancel – Secondary.

    – I click on delete – The confirmation box has Delete – Primary and Cancel – Secondary.

    When we use Positive and Negative, Then Delete may look like a negative action as such.

    Since Action buttons are contextual, It will be better to decide the Primary actions(Result of Intended action) and the secondary actions (Escape route or Undo options).

    • anthony

      Jan 6th, 2015

      You missed a key point in the article that you should go back and read. Recognizing which actions are positive, negative and neutral helps you decide which actions are primary and secondary.

      As shown in the examples, positive actions are primary over negative and neutral. Negative actions are primary when positive ones are absent. Neutral actions are secondary in all cases. Your color contrast should indicate all this.

      This is a principle you should follow to facilitate user decision-making on modal windows.

  3. Donald

    Jan 6th, 2015

    Interesting writeup..thanks for posting it.
    What do you base the recommendations on? is there empirical data (A./B tests, usability studies, observational data) that you are basing it off of or just identifying what you think are “best design practices”?

    • anthony

      Jan 7th, 2015

      What do you base your question on? I used my knowledge of universal design principles, design experience and rational thinking skills.

    • Gunter Dubrau

      Feb 16th, 2015

      Before asking for studies we should be clear about on how we see human activities. Would it be easier to be focused on expected and positive behaviour of the system or do we want to mess around with (negative) alternatives? I prefer the first. GUI should force positive acting. That’s why I like this short article (expect of the button order ;-). I would prefer left to right….

  4. Stephanie P

    Feb 27th, 2015

    Have you considered if there are two positive actions near each other? I am struggling with the contrast since both are to complete different tasks.

  5. Marco

    Aug 6th, 2015

    Its always different what we want it to be vs with what it actually is.
    That said, what research or UX evaluations results are you relying on to suggest this conclusion?
    (please share)

  6. rizbaloch

    Apr 15th, 2016

    Well, that makes sense if we have neutral, negative and positive buttons … but what if we have 2 or 3 parallel buttons with positive impression?

    I mean, if there are multiple options and it is a choice of a user to select its desired action … What to do then?

    Actually, I am facing this situation, so looking for a better solution !!!

  7. Dara

    Sep 29th, 2016

    Contrast is tough one to judge alone, UI systems can seem logical to your product team but then appear to confuse new users.

    Best to test it out if budget and capacity allows, good article all the same, agree on starting with principles.

    Thanks

Leave a Comment