What exactly does the Cancel button do?
It closes the current screen of the user and returns it to its previous state. This button protects against unwanted changes in the system. But when it looks like an action button, this protection feature is hard to recognize.
The Cancel button should symbolize a return to a safe state, not a call to action. In other words, your Cancel button should never be colored.
Neutral color for neutral button
Button color means call to action. The “Cancel” button is not a call to action, because after clicking the user no changes in the system occur. You should not underline it with color, or you will create an incorrect impression among users. Instead, you should tell them that the button will not make any changes and is a disclaimer.
The Cancel button should be neutral in color to indicate a neutral, inactive button. When users see that the Cancel button has no color, they recognize it as a fallback, safe option. This is important, for example, for users who need to exit the confirmation screen.
When each button on the screen has a color, they compete for attention. Competition makes users think longer about each action. If the cancel button is a neutral color, then it allows them to make decisions faster without hesitation. Users who are ready to take action will also not be distracted by the neutral button.
Cancel has many names
Not all cancel buttons are labeled “Cancel”, but they all function the same. For example, the Cancel button may have the words “Not Now,” “No, thanks,” “Maybe later,” or “Skip,” depending on the context. If a button cancels an action, treat it as a Cancel button, since it performs the same function.
The more buttons on the screen, the more cancel is necessary. When all buttons have color, the way out of the situation is not clear. But when the Cancel button has a neutral color, it makes the choice more intuitive.
When using gray on the button, you need to make it dark enough. Otherwise, the button may appear to be disabled.
To make sure your button is legible, check the color contrast with a tool like Color Review. This utility will let you know if your gray accessibility standards for text color.
Make the cancel button neutral
When most users activate the confirmation screen, they are ready to act. But for those who activate it by mistake or change their mind in the process, the “Cancel” button is a guarantee of security.
The colored Cancel button sends them wrong signals. It makes users perceive themselves as a call to action, and not as a return to security. Make the Cancel button neutral to make it easier for users to exit confirmation screens.