10

I am having some issues with a project alert colors.

I am having two cases that starts an alert.

One is if the value is over 40 and one is over 45.

Reaching the 40 value is a really bad thing and reaching 45 is even worse.

The problem is that I cannot use orange for over 40 as it is really important and needs action to be taken immediately.

Currently I use light red and hard red but I am afraid that they do not differentiate well enough.

Any suggestions please ?

enter image description here

  • 2
    How does accessibility fit into this? Can you safely assume a user will be able to differentiate between those two shades? Would it be better to include an exclamation icon on the really really bad one? – Calum Nov 28 '19 at 13:26
  • 3
    Can you explain what actions are needed when either of the values is reached (if any)? For instance should the temperature be between 40 and 45? Because neither warnings now show what the user needs to do to fix the problem. – Kevin M. Nov 28 '19 at 15:23
  • 18
    I'm always wary of using colour alone since the difference may mean nothing - or be unnoticeable - to colour-blind people. – MetalMikester Nov 28 '19 at 15:49
  • 2
    I'd second not using only color here. Aside from the color blindness issue (which is big, about 8% of the world population has issues with color vision), you can't account for all possible differences in viewing conditions (for example, those two colors are noticeably different on my sRGB calibrated monitor, but not on my ultra-saturated phone), and there are cultural differences in how colors are perceived. – Austin Hemmelgarn Nov 28 '19 at 22:14
  • 2
    I think the question hinted at by Kevin M is the key question -- if both require immediate action, why are they differentiated in the UI? 47 is already higher in magnitude than 42. What is the purpose in treating the two "bad cases" as unique types of things? – JoshuaD Nov 29 '19 at 22:09
35

When doubting about how to differentiate graphic elements, a good tool is to test all visual contrasts in design.

Shape contrast

Shape contrast

Size contrast

Size contrast

Texture contrast

Texture contrast

Color contrast

If the color contrast is not enough or not allowed, try the mix with color and texture:

color contrast

Weight contrast

Weight contrast

Figure/ground contrast

Figure/ground

Style contrast

style

Spacing contrast

enter image description here

To complete the answer, there's another contrast but I think it doesn't apply in this design.

Position contrast

Position


Finally there's another type of contrast that we often rule out as such:

Timeline contrast

timeline

  • 1
    This seems to be what I was looking for. Any ideas on how this can be achieved on css ? i.stack.imgur.com/FiU4G.png – Cristian Negraia Nov 28 '19 at 14:03
  • 14
    @CristianNegraia Are you sure this is the best one of the bunch? How does the user know if the striped lines mean less danger than solid lines? I would suggest using a lighter red color for the striped one, so that it's clear that it is weaker. Besides that, I think the "Figure/ground contrast" example makes the difference clear as well. – Big_Chair Nov 28 '19 at 14:25
  • @Big_Chair The value will pose as an extra indicator, so after you visually identify the differences the value inside the box will help you further perceive the difference. I am still not sure if that can be made in CSS but it is as good starting point as I do not want to add background inside the box. – Cristian Negraia Nov 29 '19 at 12:01
  • 1
    @CristianNegraia I suggest you look either into a background image, or a border-image: developer.mozilla.org/en-US/docs/Web/CSS/border-image – Ferrybig Nov 29 '19 at 12:13
  • 4
    @CristianNegraia Personally, I think stripes/no stripes is a fine contrast, but I'd say that adding stripes would indicate more danger than the solid ones. It might be "less red" than the solid one, but it's more "visually noisy" and attracts people's attention more. Striping is used on its own as a warning/danger symbol, so effectively you're stacking two danger symbols (stripes and red) on top of each other, making it represent more danger than just the solid red. – R.M. Nov 29 '19 at 16:57
15

It looks like you should just use one shade of red, the box background, and opacity.

Here's an example of a few different states using one color of red. Opacity is only used once, on the 42 example, and it's the background at 50%.

In these, users only need to be able to see the difference between black, red, and red at 50%.

enter image description here

7

If you UI is otherwise bright, you could use a darker shade of red to differentiate it as "very bad" - see the legend with colors at the bottom:

image demonstrating the different colors

  • I would still find it a bit hard to even observe the dark red without the legend in the bottom. But it is a an idea to have the legend somewhere maybe. – Cristian Negraia Nov 29 '19 at 12:02
  • Of course, this example has the advantage that really bad (4/4 - brown) is usually surrounded by pretty bad (3/4 - red) which is in turn often surrounded by sort of bad (2/4 - orange), which makes it a lot easier to discern the meaning of the colors than when they are used for something like notifications. – Jasper Nov 29 '19 at 14:48
7

Australian bushfire warnings use stripes to indicate the highest severity.

Bushfire warning scale

Example:

enter image description here

  • 1
    Unlike many other approaches, it fits the "really bad thing" and "even worse" schema. – maaartinus Dec 2 '19 at 10:46
5

enter image description hereYou could try keeping your colors and during coding, if it's a value over 40, trigger an exclamation mark, perhaps in a triangle or a circle. Inside the box on the right side opposite to the triangle. Or even outside the box next to it. As per the visible light spectrum going from orange to red, showing an increasing severity number is a good design pattern like you have done. But an extra icon triggered at the 40+ mark along with the colors may make this design component clearer to the user...

  • Might be an idea but still not sure if it will break consistency. Upvoted – Cristian Negraia Nov 29 '19 at 12:03
  • @CristianNegraia I wouldn't be afraid of breaking consistency for some "really bad thing or even worse". +++ My proposal (too tiny for a separate answer would be to use the same color and shape for both, to add one red warning sign to the "really bad thing" and to add another one for "even worse". – maaartinus Dec 2 '19 at 10:58
2

I would argue that there is no benefit to styling them differently. Although you have said that 47 is worse than 42, you have also stated that anything over 40 requires immediate action.

It appears that the action the user must take for both 42 and/or 47 is the same (act immediately). Therefore, I see no issue with it being styled the same.

If the argument is that 47 is more important than 42, well... that is already apparent by the number itself, so no need for different styles to show that.

In summary, red can mean "take immediate action" and then the number indicates priority order (highest first).

1

I suggest you to use more lighter "yellow" besides red if you don't have to use any darker.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or alternatively I would reccomend flashing outer-boundaries preferably with the same color with fonts.

mockup

download bmml source

And as a last alternative is the combination of those two of above

mockup

download bmml source

Note: I didn't try to make the same geometrical shape since the editor doesn't offer it on default but please consider it independent from the shape as your question and my answer is more of color perspectived.

  • I cannot modify the white background. ( Not that I can't but the dashboard has already some background colored areas and I wouldn't want to add more ) – Cristian Negraia Nov 29 '19 at 12:03
  • I wouldn't recommend this if you'd have added these informations to the question @CristianNegraia. – Erhan Yaşar Nov 29 '19 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.