Why cancel buttons should be colorless
What exactly does the Cancel button do? It returns the user to the previous screen. For users, Cancel is a means of protection against unwanted changes in the system. To make users feel safe, the “Cancel” button should mean a retreat to reliability, not a call to action.
This is why the “Cancel” buttons should be colorless.
Neutral color for a neutral button
The color on the buttons indicates a call to action. Cancel is not a call to action, because there are no changes in the system after you click it. This is why you should not highlight it with color. Otherwise, you give users a false impression.
Users on the subconscious should feel that “Cancellation” is their quiet Bay in the sea of system changes.
Cancel is not an action
A neutral color indicates a neutral button that does not call for any action. When users notice that the “Cancel” button doesn’t have a color, they are more likely to recognize it as a fallback option. This is important for people who mistakenly activate the confirmation screen and want to return everything as it was.
When each button on the screen has a color, they “compete” for the user’s attention. This makes users think about each action for longer. The neutral color undo button allows them to make a decision faster. Those who want to perform an action will not be distracted by the “Cancel” button.
From the “abolition” of many names
Not all cancel buttons are called “Cancel”, but the principle of their operation is identical. Returning to the previous screen can be called “Not now”, “No thanks”, “Maybe later”, or “skip” depending on the context.
If your button – whatever it’s called-implies canceling from any action, you should consider it a “Cancel” button. It performs the same function.
Read also: Mobile UX: where to place call buttons to boost conversion
The user understands how to avoid choosing an action
The more buttons on the screen, the more important it is to make a clear departure from the choice. Look at the example above. In the screenshot on the left, you have to read all the options to understand. On the right, you don’t even need to read.
Dark enough grey
When using gray on the button, it is important to make this color dark enough. Otherwise, the button may look disabled. Contrast can be easily checked using tools like Contrast Checker.
Light (illegible) gray and dark gray (clearly visible)
Make your button neutral
In most cases, when users activate the confirmation screen, they are ready to take action. But if it happened accidentally, or the user just changed his mind, the “Cancel” button should be his salvation.
The colored Cancel button sends the wrong signal. It confuses users, forcing them to consider it another call to action. Make your button neutral so that the user has more control and freedom when using your app.