Skip to main content

What color to choose as "danger" if the main color of my app is red [Resolved]

I'm having this question wrapped around my head for quite some time. The thing is that my main application has a red color theme. And for just cancel buttons I used to use just gray colors but now that I need a "danger" color... What should I use? Purple? Orange? Using the red again is awkward, maybe a darker red?

PD: I cannot use blue because it's our competitors color.

enter image description here


Question Credit: Agus
Question Reference
Asked September 10, 2019
Posted Under: UI UX
22 views
10 Answers

I think you need to play around. If your screens are red and you are about to use a warning or Danger. I have the following suggestions:

1- You can still use red but in different degree in order to differentiate between the app color and your danger action.

2- You can use pure white popup and, apply red icons, exclamation mark or signs within this popup.

3- Another suggestion is to use black color, and use white signs over the black popup. This may be a change.

If you can provide us with a screen of your red system, I can give you a straight forward solution.

enter image description here


credit: Mel
Answered September 10, 2019

Rather than focusing just on the colour of the button, it's better to focus on the experience as a whole for that particular task. You don't necessarily need a separate danger colour for a delete button. You can use your standard red button, but support it with other danger messaging. Like this:

enter image description here

If your user is about to do something dangerous, it's better to use an alert and messaging to highlight the danger, rather than just rely on button colour.

It's also worth saying that there's nothing inherently dangerous or scary about a red app. I designed for Coca-Cola for a while, and their main brand colour is red. They're a very good example of how to apply red branding to websites and apps, if you're looking for one. They mainly use black, grey and white as their accent colours.


credit: Michael
Answered September 10, 2019

One absolutely key thing to note here:

Do not rely solely on colour to convey meaning.

Colours are handy for conveying a visual message, but you need to consider accessibility when making these kinds of UX decisions. If your user has any form of colour blindness or other visual impairment, you need some other kind of indicator (icons or wording) to convey the meaning. The fact that the button is titled Delete is great, but if you're concerned that it's 'system-critical' information, then that needs to be conveyed in way beyond simply using colour as an indicator.

This article covers the use of colour with regards to accessibility, and has a paragraph specifically on this:

"...ensure accessibility by making sure you don’t rely on color to relay crucial system information. So, for things like error states, success states, or system warnings, be sure to incorporate messaging or iconography that clearly calls out what’s going on."

Also, considering that red is your app's key colour: ensure that you're using a contrast of at least 4.5:1 to adhere to WCAG 2 level AA at a minimum. This is a really handy tool for checking that: https://webaim.org/resources/contrastchecker/


credit: indextwo
Answered September 10, 2019

If you are already using the colour red, then use yellow and black. It is a natrual warning sign of nature, and will definately draw attention. It is used also on many danger signs for construction sites.

enter image description here


credit: James Douglas
Answered September 10, 2019

The first color scheme that comes to mind to indicate danger is a combination of yellow and black, particularly if the black is in diagonal stripes. I would suspect the association with danger comes from bees in nature.

Simply typing yellow black sign into Google will result in a lot of signs that indicate danger of some sort. Sings about poison, about danger of falling off, the tape used around crime scenes, etc.

I have personally seen message boxes with a thick, yellow and black diagonally striped border, and they always make me think there is something potentially dangerous, likely a possibly dangerous decision to be made. Seeing a button with a rounded triangle with the same pattern would tell me that I should be very cautious if I press that button.

To me, plain red is not actually as strong, and would need white and black to fully get across the same level of danger.


credit: trlkly
Answered September 10, 2019

In western countries, there is nothing culturally more dangerous than black on red:

enter image description here


credit: Danielillo
Answered September 10, 2019

GETTING ATTENTION

COLOR LACKS MEANING

Color alone does not convey meaning, and as such by itself it should not be relied on for any expression of "danger" or "warning." Further, visual impairments such as Deuteranomaly (6% of males affected) make certain color contrasts invisible, not to mention cultural differences as several have mentioned.

CONTRAST, SYMBOLS, and TEXT

Colors such as red, yellow, orange were chosen not because the color has a specific meaning, but because the color provides a certain color contrast, luminance contrast, and "eye catch," and thus stands out against the background.

It is more important to have adequate luminance contrast, and to use attention/attraction oriented symbols that are clear in their intent.

Luminance contrast does not rely on color contrast which may be misperceived due to impairments or cultural differences, and helps the symbol to stand out. Using a higher luminance contrast than surrounding stimuli (text, buttons, etc.) is what will help gain attention and user focus.

Color contrast can help increase awareness in terms of cognitive recognition of a warning, but it must be a secondary design consideration. For instance, if the market is North America, green is possibly a bad choice for a warning — But green in combination with it's opponent color red (including purples) creates very strong edge detection in normal human visual perception.

Understandable symbols acan be very useful for conveying meaning in a way that (ideally) does not require translation. Though again cultural differences may have a strong influence.

In Las Vegas, the MGM Grand Hotel was originally designed where the front entrance was through a giant emerald colored lion's mouth. Shortly after opening thought, they tore it down and rebuilt the entrance to remove the lion's mouth because they discovered that a lion's mouth had a particularly negative symbolism in some asian cultures.

Within the realm of computers though, there are common icons that have attained an international acceptance of certain meanings — the well understood is typically the better choice, especially for conveying a warning.

Text is king, language differences notwithstanding. Clear and simple text is the best way to convey a specific meaning. A single word with a pop-up tool-tip of additional information is my personal preference for usability.

Animation and motion will affect attention if that is the goal. A single blinking red LED on a wall of 1000 red LEDs will surely grab your attention for instance.

TL;DR

In short, it is more important to have good/high luminance contrast & descriptive text and symbols than any specific color combination.

Here's an example of using luminance contrast, a modification of your example delete button vs the save button:

SAVE DELETE MODIFIED


credit: Myndex
Answered September 10, 2019

Something to consider about creating User Interfaces is that colour should never convey meaning. However, you can highlight destructive buttons by making them different from other buttons or the rest of your interface. Instead of thinking about colours you could use, try thinking about how to make the button look different.

Change the design

  • Borders - If your current design has buttons with no border, try adding a very distinct (thick?) black or white border. This makes the button "pop" from the rest of the interface.
  • Size - Try playing around with the height or width of the button. Size can help differentiate destructive buttons from normal buttons. But it doesn't always have to be about the size of the button, maybe you could change the font size of the label?
  • Font Style - Talking about fonts, how about adding an underline, italic, or bold to the label to make it stand out?
  • Style - Maybe add a shadow or only have borders and no fill colour. Play with the design and make it look different.

Colours

Everyone's creative side varies, so if you do want to keep your current style but change the colours I would recommend looking at a colour wheel for colours that are opposite your reds. This will help make the button stand out. You can also emphasize the button by going for destructive colours like yellows, reds (obviously darker or lighter), black or white (if it suits your design.)

Design is a very challenging part of the development process, so playing around will definitely help. Get people's opinions - get them to choose a design. Make some mockup designs. I hope this helped.


credit: Aaron
Answered September 10, 2019
Your Answer
D:\Adnan\Candoerz\CandoProject\vQA