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 point. This “red !” UI works OK elsewhere in the app but on this button the colors look really odd and clashing.

enter image description here

Any suggestions for a visual treatment I can apply to the button and/or icon (each split out below) to make the result less contrasty and clashing?

enter image description here enter image description here


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.

Source : Link , Question Author : Justin Grant , Answer Author : DA01

Leave a Comment