Term for these color combos, other than "Agh, my eyes!"?
May 30, 2010 6:32 AM   Subscribe

Is there a technical term for these problematic color combinations?

Is there a term for the color combination of red on green, or green on red, or any color combination of text/background that makes the overall effect "wavy"?

It's usually found on poorly-designed web pages, where the designer uses colored text on a colored background, and the colors just don't go well with each other. The text will often appear to float.

Some examples can be found here (scroll to section labeled "Poor Combinations."

Obviously, "readability" and "usability" are related terms, but is there a generally-understood way to refer to this phenomenon, other than "not readable" or "not usable"?
posted by SuperSquirrel to Technology (11 answers total) 2 users marked this as a favorite
posted by marimeko at 6:37 AM on May 30, 2010

Good question.

Marimeko's suggestion sounds good. Chromatic dissonance maybe? I like how it mixes up ideas about light and sound.
posted by krilli at 6:39 AM on May 30, 2010

posted by Sys Rq at 6:57 AM on May 30, 2010 [2 favorites]

(I'm pretty sure the "text will often appear to float" effect comes from the afterimages. That is, red will burn into the retina as a cyan afterimage, and vice-versa, so when they're right next to each other, occasional eye-wiggles will cause a confused border between the two colours.)
posted by Sys Rq at 7:01 AM on May 30, 2010

I would say poor tonal contrast. It's kind of like saying if you transformed whatever you were looking at into grayscale, the grays would be the same.
posted by b33j at 7:04 AM on May 30, 2010

Check out the library books in the image in this (ugly) webpage. Because the red and green books are approximately the same tone, they provide little contrast between each other.
posted by b33j at 7:06 AM on May 30, 2010

Sys Rq has it: complementary. Which sounds backwards; we think of "complementary" as a good and harmonious thing. In technical terms, though, it means "across from each other on the color wheel" and, as a result, likely to clash.
posted by argybarg at 7:27 AM on May 30, 2010

The general term (among people who study the human visual system) is 'isoluminant', meaning 'same brightness'. If two colours are different, but have the same brightness, the boundary between them is invisible to the parts of the visual system that are only sensitive to brightness. However, the parts of the visual system that are colour-sensitive do detect the boundary. The resultant conflict produces the confusing, wavy percept.

As b33j says, the apparent brightness of each colour is roughly equal to its grey-scale value, so if you convert an isoluminant image to grey-scale in Photoshop, you will see it is almost one uniform grey. However, isoluminance depends on the precise details of your monitor and your visual system, so different colour combinations will look bad for different people.

This is a well known and well studied phenomenon in vision research, but there's surprisingly little about it on the web, so I can't easily point you to a good reference.
posted by beniamino at 7:28 AM on May 30, 2010 [6 favorites]

This page, from NASA of all places, discusses simultaneous and successive contrast, which are often the culprits behind the "agh, my eyes!" responses to fugly color schemes. They don't give a specific name to unreadable color combos but they address how to use colors effectively in graphic displays, so you might find it worth reading.
posted by Quietgal at 9:00 AM on May 30, 2010 [1 favorite]

Edward Tufte treats this topic in his book, "Envisioning Information". He refers to "linear fluting" and color contrast related fluting. He gives several great examples, and all of his work is very helpful for information design.
posted by effluvia at 11:20 AM on May 30, 2010

I've always heard such combos referred to as vibrating colors.
posted by mdrew at 4:31 PM on May 30, 2010

« Older How to hide/block all text in firefox   |   Buying Opportunity? Newer »
This thread is closed to new comments.