5

We have a webapp with a dark blue background (this is a branding decision, and we don't want to revisit it... yet). We want to indicate positive/negative change with the traditional "stock ticker" style of a green arrow up and red arrow down.

Problem: With red on a blue background we get bad visual effects (because of chromatic aberration I think... something I heard in a UX lecture a LOONG time ago).

There are a few obvious solutions - a light border for example. None are really appealing. I'm looking for any other creative approaches. Or maybe just pick a different color instead of the traditional red == bad?

Current implementation:

enter image description here

Interesting to note - the top banner on stack exchange is blue, when there are unread messages it shows a red circle. The circle is styled with a red boxshadow blur. Things that make you go hmmm

EDIT: Igor-G points out this phenomenon is known as "chromostereopsis".

Improve this question
7
  • I think you are talking about colour saturation, both of the colours are too saturated, try reducing saturation of red colour... Not quite sure how Chromatic aberration can be involved in this, when it has to do something with lenses.
    – Igor-G
    Aug 1, 2013 at 13:11
  • 1
    You can post a link to an image, and someone can edit it to show.
    – Mike
    Aug 1, 2013 at 14:22
  • @Igor-G I'm specifically talking about the visual effect our eyes perceive at the border of blue and red colors that are adjacent because they are at opposite ends of the spectrum. Most people's eyes are implemented with lenses ;)
    – Aaron Averill
    Aug 1, 2013 at 14:49
  • @AaronAverill funny, but wrong the human eye corrects/compensates for it unlike the lens of the camera! Also if you open this image in photoshop and inspect the arrow you can see that it has 1 pixel border.
    – Igor-G
    Aug 1, 2013 at 16:02
  • @Igor-G Nope. I suggest some reading on eye cones, sensitivity to red/blue wavelengths and ability to simultaneously focus on red/blue. It's not a bug, it's a feature :) A bit off topic, this is an exercise left to the reader.
    – Aaron Averill
    Aug 1, 2013 at 17:48

6 Answers 6

Reset to default
0

What I do in cases like this is that I use a Colour Blindness Simulator. There are many websites and mobile apps that will help you with that. It's always good to experience with your own eyes what your design looks like for other people.

When testing, make sure that you test for various classes of deficiencies and not just one. Then you should be able to make a palette that works for your organisation branding and style.

Improve this answer
3

It will depend on the general theme and icon style of your application but two obvious solutions come to mind: white (or light) border of 1px or two around the arrows or place them in a white circle. This would work particularly well in a mostly "flat" style interface.

Improve this answer
1
  • In fact my "hack" right now is a light border. It's "ok", but not great. I like the idea of a white circle. For really small indicators it becomes tough.
    – Aaron Averill
    Aug 1, 2013 at 14:56
2

I think this is more an accessibility issue then a visual issue. Colour perception not only relies on the users visual ability, but also the display that they are viewing, plus surrounding light sources. All of which we have no control over. However, checking your colour choices with a tool such as http://www.dasplankton.de/ContrastA/ (make sure you use the "Show colour deficiency simulation") can help with basic accessibility guidance.

Improve this answer
2

Ignoring the statements about red/green color blindness (the arrows still indicate up and down!), you are correct about aberration. You have two primary considerations to solve there.

Hue is the color itself. In an HSB color picker, you're looking at the 'H' slider. The closer you get to true complimentary colors (directly opposite on the color wheel) the closer you get to really bad "vibrating boundaries". You have a slightly purple blue so the compliment would be redish orange. Shift the hue around the wheel (more red or more orange) and the vibration will start to taper off.

Value is it's relative brightness. In an HSB color picker, you're looking at the 'B' slider. The closer your colors are to the same value, the more they will compete with one another and start to vibrate. With red you have to be careful not to end up with pink but lightening it will help in your issue.

The HSB picker available in Mac OS X

Improve this answer
2
  • The eye cannot see "chromatic aberration", but you are correct about the hue vibrating boundaries, they occur along the boundary separating contrasting hues of equal value.
    – Igor-G
    Aug 1, 2013 at 16:51
  • @Igor-G You are correct that it is not technically the same thing. People sometimes refer to this situation as chromatic aberration because the visual result can seem similar. And I beg to differ on the eye's abilities: The affects of true aberration are absolutely visible.
    – plainclothes
    Aug 1, 2013 at 16:55
1

You could use an automatic color-palette generator to find an optimal red/green that matches your blue.

A quick search for "color palette generator" or "color scheme generator" will usually return quite a few free online ones.

Improve this answer
1
  • 2
    A color palette generator deals with aesthetics, not the perception of adjacent red/blue colors. This won't help me.
    – Aaron Averill
    Aug 1, 2013 at 14:54
1

Why don't make the red lighter? Perhaps lighter inside and darker in the border...

Take a look at the first and the second "red down", the third one is your original...

New approach

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.