Why You Should Avoid Vibrating Color Combinations
In this quick article you’ll learn about how color vibration affects interface legibility in the context of web and interface design. This article was written by Eli Schiff on webdesign.tutsplus.com. He is a design critic, UI design consultant, speaker and author of the upcoming Humanist Interface book. Image courtesy of Rawpixel.com via Bigstockphoto
Bold or Garish?
There is an emerging tendency among interface designers to mimic the garish color schemes often found in print design. While partially due to ideological trends, this impulse also emerges from the newfound typographic range available to the modern web designer, which encourages print-like layouts and large type. It is important to note the distinctions between each medium which cause vibrating color to be somewhat more permissible in print, and less so for web.
Vibrating colors on Frooti’s website
In print, using a bold color scheme often means the difference between being ignored on a magazine rack and making a sale. On the other hand, in the user interface, we have other considerations that take precedence over grabbing the user’s attention by force, in particular, the legibility of text.
What is Vibration?
One of the primary phenomena that emerges out of bold and highly saturated color schemes is a seemingly “vibrating” color, an occurrence wherein the edges of two directly adjacent colors appear to merge, blur and glow, giving the illusion of motion.
The outer two samples have text with vibrating color, while the middle sample has text with equiluminant value.
Josef Albers, the noted color theorist, warned against the use of vibrating colors in his classic, Interactions of Color:
“This initially exciting effect also feels aggressive and often even uncomfortable to our eyes. One finds it rarely used except for a screaming effect in advertising, and as a result it is unpleasant, disliked, and avoided.”
For a pair of colors to have low visibility against each other, it is necessary that they be equiluminant, having a similar brightness value. However, in order to noticeably vibrate, the colors will generally be of high saturation and be complementary to each other, shifted approximately 180º on the color wheel.
Blue (HSB 210, 99, 100) on red (HSB 12, 99, 100)
In the example above, the red and blue hues can be found on opposite sides of the color wheel (though not directly opposite) and both have a brightness of 100.
Spotify EDM
Spotify has become synonymous with bold color schemes, used with great effect to grab attention. Sometimes these combinations can be off-putting, even if they aren’t vibrating in the truest sense; such as the button against the purple background in the example above. Users’ eyes will recognize what it is, but some may struggle to determine the shape’s outer edges.
Legibility
Interface text is significantly hampered when set in equiluminant, vibrating color. I custom selected these vibrating colors:
When color vibration occurs, the element most strongly affected by the glowing distortion effect is the edge between the two colors. This is why vibration is particularly dangerous in the context of UI fonts, small icons and other detailed elements which are not large enough to compensate for their blurry vibrating edges.
Here’s the same set of swatches, this time as seen by someone with full color blindness:
In addition to the often annoying vibrating and blurry colors for those who see in full color, given colors of equal luminance, those with color blindness may end up not seeing anything at all. While there are varying levels of color blindness, it’s best to play it safe when it comes to accessibility.
Here, for example, the trash icon on the Apple Watch is not visible to those with color blindness:
Color vision (left) versus color blindness (right)
Conclusion
Vibrating colors can be used to good effect, but they present real dangers in the usability of user interfaces, and can be heavy-handed if not deliberately considered before use. Keep this in mind while designing!