By Alena Krupko
Statement — in some cases red for destructive buttons should be used very carefully
- Red is brand color
- Red is used to display extremely dangerous messages or actions
- Accessibility-wise: colorblind people don’t see red properly
When a lot of elements are in red, it just creates competition among all the elements, making the user unable to focus on the most important message.
Description
- When red is the color of the brand the better decision will be to use it only for CTA buttons. Find another color for primary buttons and destructive buttons
- Red color in interfaces of such domains as healthcare, science, manufacturing, electrical industry (monitoring industrial equipment) -red is only used for emergencies. Reserve red color for extremely important actions (emergency call, emergency shutdown etc.) and do not create an additional association with destructive actions.
- Most color blind people are able to see things just as clearly as the rest of the population, the difference is their inability to distinguish red, green, or blue light. The most common is red/green color blindness. Use both colors and symbols - Don’t only rely on color to convey a message. Avoid bad combos.
Do: CTA button is red, primary and destructive buttons have other than red color.
Don’t
Do: critical items are in red to concentrate mainly on them.
Don’t: here you can use red for destructive actions, if this action can lead to irreversible consequences. The red color for the notification label, on the contrary, distracts the user from important information.
Do: first screen is how people see without color blindness. Second - with color blindness. It is a good example of how to draw attention not using red color (Alert icon, clear wording)
Conclusion
There are several options of how to arrange destructive buttons in such cases:
- Use secondary, ghosts, or text buttons and secondary colors, use icons (Trash, Alert, Close, etc.)
- Pay attention to the wording - the text on a button must give an absolutely clear idea of what will happen after it is clicked (F.e. ‘Delete profile’, ‘Stop transaction’, etc.)
- If the app allows using red for destructive buttons then make the destructive action a standalone button.
- Use confirmations popups or prompt users to type a confirmation message if actions could lead to unwanted consequences (DO NOT use it on a regular basis)
- Hide or make the option to delete important information as invisible as possible (this is not about frequent actions, like deleting a row in a table)
- Use shades of red (orange, red-brown)
- For colorblind people - keep it minimal and avoid using ‘bad combinations’
- Green & Red
- Green & Brown
- Blue & Purple
- Green & Blue
- Light Green & Yellow
- Blue & Grey
- Green & Grey
- Green & Black