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.
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?
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.
- 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.