Chromostereopsis in UX Design: A blog entry for comments

I’ve just written an article on Chromostereopsis in UX Design, which you’ll find elsewhere on this site. I posted it as a regular web page (in my “Writings” section) because I felt its length and depth were too much for a blog post. So I’ve created this blog post to provide a place for comments.

I look forward to hearing what you have to say!

This entry was posted in UX design, human factors and tagged , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Chris HE
    Posted 21 July 2011 at 4:01 pm | Permalink

    Elizabeth: Very nice, succinct and lucid description of this phenomenon. I’m wondering if you have given any thought to whether specific markets or sub-populations do better with more brilliant or saturated colors or even different color patterns? For example, research has shown that newborns respond quite well to black and white patterns, then to primary colors and far less so to pastels. While I do not have the research to back it up, I suspect that as people’s vision fades, they may have preferences for a more saturated color–or perhaps it makes it harder to manage the “popping” effect. What about the influence of different cultures? My time in Latin America developed a whole new appreciation for the use of bright colors in homes to the point where I painted the inside of our townhouse quite “loudly” as my husband would say. I don’t have answers…just questions;-)

  2. Posted 21 July 2011 at 4:35 pm | Permalink

    Thanks, Chris. Thoughtful comments and questions!

    Chromostereopsis is entirely a matter of differences in wavelength, and what happens with aging is more that people need greater brightness contrast (not saturation, AFAIK) because the lens becomes yellower and requires either more illumination (to see what it used to see easily), or more contrast between light and dark. (This makes saturated blue on black even worse, actually, because the brightness contrast is so low to start with.)

    Let me clarify that in this piece I am not talking about preferences or cultural aspects. Chromostereopsis is due to physics and the way the eye works — and it refers to the proximity of colors of widely different wavelengths. Look at that Czech site again. It uses bold, primary colors in a wide range of wavelengths, but wavelength differences do not create local 3D effects or difficulty in reading because of how the blocks are arranged.

    It’s also not about “loud”. A site could use a lot of “loud” colors and not be in the slightest danger of creating chromostereopsis, if they were all within a relatively narrow band of wavelengths (say, red/orange/yellow). It could also use a wide range of wavelengths if it used the principle of separation that I talk about at the end of the article.

    An example of a site that does that well is This site is very loud! However, each color surrounds a self-contained item, and viewers can focus their attention on one item at a time. All of the color blocks that contain text use a neutral color for the text, so chromostereopsis is not a problem for that site.

    I think you might feel differently about the colors on your walls if you were trying to read something painted in one loud color on a wall of a very different loud color. You might even say that it would be “the writing on the wall…” haha!)

    (Hmmm… I see I may have to add to the article! :)

  3. Posted 26 July 2011 at 1:46 pm | Permalink

    Great article Elizabeth. I’m excited to have read this and even more excited to provide a personal example of this concept from my site as this is exactly what I had in mind.

    Obviously I have the red as the dominant colour, black as secondary and the greys as a tertiary setting.
    I tried to make the grey a little lighter, to make my black stand out, but they would be less readable.
    Regardless, it was this very principle that I was following to try to accomplish this concept.

    The concept is made more clear if you stand back about 3-4 feet (I know that’s not too far, but again the greys need to be at the state they are in for readability’s sake) and begins to blur out at about 6-7 feet.

    Although I wasn’t too clear on the science of chromosteriopsis, your article was easy to read and definitely brought clarity and enlightenment. I especially like how you made your article usable by placing sub-title anchors are the top right of your page.

  4. Wendy Stengel
    Posted 24 August 2011 at 9:27 am | Permalink

    You joke about people who define it as trying to make one’s eyes hurt, but I like that definition in some ways. Many times, sites that use chromostereopsis poorly actually trigger migraines for me. (New header? Migraine fodder.)

  5. Posted 24 August 2011 at 3:30 pm | Permalink

    Wendy, my point was that the definition of chromostereopsis as having the purpose of making one’s eyes hurt is wrong. Yes, of course it can have that effect. But that’s not its purpose.

  6. Posted 4 July 2012 at 1:48 pm | Permalink

    Great article. We use the effect deliberately on our Facebook and home pages.

    Good example in my favourite science blog here:

  7. nate cook
    Posted 14 March 2013 at 12:01 pm | Permalink

    You forgot to point out the fact that the czek sites example was ordered perfect with attention to depth from highest to lowest.

  8. Walter M.
    Posted 27 March 2013 at 5:50 pm | Permalink

    This is the best explanation I have read, with a history of the “focus” explanation especially welcome. I have been wondering about this effect since I was five, 64 years ago. A jacket label (red stitching on dark indigo background) fascinated me, and I took it to show to my father, who couldn’t “see” the red floating above the blue. Because, it turned out, he was blind in his right eye. Something I discovered for the first time at that moment. Stained glass designers from the middle ages and production designers of news programs use this frequently (almost universally) to make warm-toned figures (saints or news-presenters) project forward from their blue backgrounds.

Post a Comment

Your email is never published nor shared. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>