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 ?
When doubting about how to differentiate graphic elements, a good tool is to test all visual contrasts in design.
If the color contrast is not enough or not allowed, try the mix with color and texture:
To complete the answer, there's another contrast but I think it doesn't apply in this design.
Finally there's another type of contrast that we often rule out as such:
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%.
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:
Australian bushfire warnings use stripes to indicate the highest severity.
Example:
You 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...
+++ 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".
Commented
Dec 2, 2019 at 10:58
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).
I suggest you to use more lighter "yellow" besides red if you don't have to use any darker.
download bmml source – Wireframes created with Balsamiq Mockups
Or alternatively I would reccomend flashing outer-boundaries preferably with the same color with fonts.
And as a last alternative is the combination of those two of above
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.
