Why Cancel Buttons Should Never Have a Color

What does the Cancel button do exactly?

It dismisses the user’s current screen and brings them back to their previous one. This dismissive button is a safeguard to prevent unwanted changes to the system. But when it looks like a call to action button, it’s hard to recognize.

The Cancel button should signify a fallback to safety, not a call to action. In other words, your Cancel button should never have a color.

A Neutral Color for a Neutral Button

A colored button signals a call to action. A Cancel button is not a call to action because no changes to the system occur after users press it. You shouldn’t emphasize it with color, or you’ll give users that impression. Instead, you need to let them know that the button won’t make any changes and is an escape from action.

The Cancel button should have a neutral color to signify the neutral, non-committal button. When users see that the Cancel button has no color, they’ll recognize it as the fallback to safety easier. It’s critical for users who need to escape a confirmation screen to notice this.

When each button on a screen has a color, they’re competing for attention. The competition causes users to ponder each action longer. A neutral colored Cancel button makes it faster for them to decide by not competing. Users who are prepared to take action also won’t get distracted by the neutral button.

“Cancel” Has Many Names

Not all Cancel buttons have a “Cancel” label, but they function the same as one. For example, a Cancel button could have the label, “Not Now,” “No Thanks,” “Maybe Later,” or “Skip” depending on the context. If the button has a dismissive behavior, treat it as a Cancel button because it serves the same function.

The more buttons there are on a screen, the more necessary an exit is. When all buttons have a color, the escape isn’t clear. But when the Cancel button is a neutral color, it makes the button choices more intuitive.

A Dark Enough Gray

When using gray on a button, it’s essential to make the gray dark enough. Otherwise, the button isn’t legible and may look like it’s in a disabled state.

To ensure your button is legible, check the color contrast with a WCAG 2.0 contrast ratio tool such as Color Review. This tool tells you if your gray passes the accessibility standards for text color.

Neutralize Your Cancel Button

When most users activate a confirmation screen, they’re ready to take action. But for those that activate it by mistake or change their mind about taking action, the Cancel button is their safety.

A colored Cancel button sends out the wrong signals. It causes users to perceive it as a call to action instead of a fallback to safety. Neutralize your Cancel button, so users have an easier time exiting your confirmation screens.

Originally published at https://uxmovement.com on March 27, 2019.

Written by

There’s a good and bad way to design user interfaces. Our publication shows you which way gives the best user experience. https://uxmovement.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store