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:

Positive – Changes, sends, or adds information Neutral – Makes no change or takes users back a screen (e.g. Cancel) 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.

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.

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.

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.

Toolkits