: How to make red icon on gray background less jarring? My app has a button to record or play videos. When there are problems with this feature, we notify the user by overlaying an exclamation

@Shelley591

When colors (hue) are different, but their lightness/darkness (value) the same, you get this 'visual dissonance' that you see in your example. Right now the red is a slightly darker value than the gray. You need to increase the difference in value between the two hues.

You could:


lighten the gray
darken the red
do both


Or, probably more practical, create some way to 'pad' the transition. I'd suggest giving the exclamation mark a light glow or dark shadow, or perhaps a white outline.

Or perhaps easiest, just do away with the color. White exclamation point on that dark gray would stand out just fine.

Vote Up Vote Down

@Rambettina927

The problem is the value contrast of your red and grey: they are way too close even though the hue is different. Look at the "B" value in the HSB sliders.

If you shift the grey lighter or darker, it will help. If you make the camera icon an outline, problem solved. The red could also go a touch lighter or darker (opposite of the grey) to boost the contrast.

Vote Up Vote Down

@Nimeshi706

I'd look at different treatments with a triangle. The triangle/exclamation is a common "ALERT" icon and allows for easier recognition from the user. Don't reinvent the wheel.. just make the wheel look nice :)

Vote Up Vote Down