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…