10

I am working on an application that models physical hardware to the user. As such, showing things colored red seems to be a very natural way to communicate an error state, and showing them green indicates a successful state.

However, the client has mandated that the main color scheme for "accent" colors for the application be the triadic combination of Magenta, Yellow, and Cyan, like this (note that Color Scheme Designer seems to not work with Firefox right now but this link works fine in Chrome). As a side note, they have good reason for mandating those colors.

Because of this, I am concerned about a possible clashing effect if red and green are still used, since they will appear similar to the magenta and cyan respectively.

To try to maintain some design elegance (by limiting the number of accent colors used in the app), one approach could be to make the "success" and "error" colors be one of these three primary accent colors. I have tried this, but in my opinion these colors do not convey "success" and "error" as powerfully. So I wonder what research or experience has shown regarding still using red and green, even if those colors may have a slight clashing effect compared to your main accent colors. Does the benefit of the natural/expected meaning of red and green outweigh the possibility of some clashing with the main color scheme?

Update: (1) I will not be relying solely on colors to indicate state - iconography and such will also be used to indicate state. My question is strictly regarding the impact of the color choices. (2) These accent colors will be used fairly sparingly. However, it is possible that one of the accent colors would appear very close to one of the "success" or "error" colors.

Improve this question
3
  • 1
    Can only hope you do not rely solely on color to signal meaning, otherwise 4-6 per cent of the male population will not feel happy with your choice.
    – Deer Hunter
    Apr 3, 2013 at 19:04
  • @DeerHunter nor would anyone using an eInk tablet. ;)
    – DA01
    Apr 4, 2013 at 3:38
  • +1 for using icons as main indicator of state and not colors
    – elemjay19
    Apr 22, 2013 at 19:58

6 Answers 6

Reset to default
7

Red and Green are standard colors for errors and success and exist there irrespective of what color-scheme a site/application has. But in case you are barred not to use them, you can still live without them but your designer would need to put extra bit of effort to extract "meaningful" colors for SUCCESS and ERRORS from the given color pallet. Something like that might help you.

enter image description here

DOWNLOAD THE PSD file over here: http://www.filedropper.com/color-scheme

Improve this answer
4
  • Nice examples. It looks like you've used the "dark" variation (bottom left of the 5) of the cyan and magenta hues from the color scheme for the letters in your messages? What about for the background of the messages - is that one of the 5 variations as well?
    – Jason Frank
    Apr 4, 2013 at 3:03
  • Yup everything is taken from the given color-pallet above EXCEPT that I have applied some transparency to one of the colors to achieve background colors. I am attaching its PSD for your reference.
    – Salman Ehsan
    Apr 4, 2013 at 3:26
  • Are you sure the Cancel button in the second example needs to have that pinkish border? It is the save action after all...
    – André
    Apr 4, 2013 at 7:35
  • Border around the CANCEL button was to highlight use of color whenever possible. If you take critically, "I AGREE" button doesn't make any sense in this context either :). I have focused on the colors issue which is asked in the question.
    – Salman Ehsan
    Apr 4, 2013 at 11:17
2

Being constrained with the chosen color scheme I believe the best solution for you is indeed to choose the closest colors. I would suggest using the main cyan as positive and main magenta as negative.

Be sure to include also textual information about the meaning of these elements, like below, for the buttons:

enter image description here Please, forgive me not matching perfectly your theme, the wireframing app on iPad I'm using does not allow choosing custom colors. In fact, regarding buttons at least, negative one should be lighter, and positive more intense.

I think that adding new colors (green and red) in your UI would be quite destructive for it, as they will not match the main color theme. However, if you are still not sure about the magenta and cyan usage, you can try to use green and red in a little bit more subtle way, for example:

  • use it only as a glow or outline
  • show it only on hover
  • present the yes/no buttons on some neutral background, like black or white (semi-transparent for pop-overs, maybe?) - in this case you cold add more meaning to the magenta/cyan on one Han, and on the other maybe using red/green old not be that destructive.
Improve this answer
1
  • This would need some testing to validate, but I have a hunch that cyan and magenta don't have any inherent meaning one way or the other. In other words, I bet you could flip those two colors and not affect the usability as they don't immediately scream "positive/negative" as much as red and green do.
    – DA01
    Apr 3, 2013 at 23:38
1

That mandated color scheme will definitely dilute the meaningfulness of the semantically significant (red and green) colors. And of course sticking with red and green will look aesthetically challenged in the context of that color scheme.

I don't think using colors somewhat close to red and somewhat close to green will retain any meaningful semantics, so I wouldn't rely those colors to convey meaning as red and green do.

I see 2 choices,

  1. stay with red and green and understand it's significance will be diluted in the context of the color scheme, and live with the aesthetic issues (how bad the aesthetic issues will be I couldn't say) or
  2. use colors with a respect to aesthetics and not rely on color to convey meaning

My guess is that option 2 is preferable but you'd need a prototype to get a feel for which way is better.

Improve this answer
0

There's accent colors, and then there's feedback status colors. While you are right to be concerned about clashing colors, the accent colors likely should be used sparingly to begin with--especially the ones you have to work with.

So I don't know if there's necessarily going to be an issue--at least I don't know that without seeing the overall visual design.

As such, whether or not red and green will work is going to depend heavily on actual implementation.

As for whether or not other colors than red and green will work for the status colors, it really depends on the type of status you are trying to communicate. Alas for 'ok' and 'error' red and green are really the go-to colors for that. Using two entirely different colors may not actually result in any improved usability so I'd almost suggest not depending on colors at that point.

Using that as a segue...remember that colors, alone, aren't sufficient enough for indicating different statuses from an accessibility POV. You'll also want to use some iconography for that as well (primarily to handle those that are colorblind and/or maybe viewing your site on a Kindle, for example).

Improve this answer
3
  • I added some new comments to my original post to clarify the points about not relying only on color and about sparing use of the accent colors.
    – Jason Frank
    Apr 4, 2013 at 3:06
  • This is an interesting take - about separating the notion of accent colors and feedback status colors even if they might clash somewhat. That's kind of where I was at initially. Do you have some reference or user testing results that would indicate that this is "not necessarily going to be an issue"?
    – Jason Frank
    Apr 4, 2013 at 3:12
  • I do not. Sorry. The thing is, it'd be hard to to a study on it since it is going to be so heavily dependent on the particular visual design for each particular site. But clashing may not even be an issue...perhaps the status colors clashing is a good thing (draws attention to them).
    – DA01
    Apr 4, 2013 at 3:36
0

It seems to me that red could fit right between magenta and yellow, green between cyaan and yellow. With a bit of smart scheming, it might look just fine. Here's an example, where I fitted red and green inbetween the scheme posted on the Color Scheme Designer.
enter image description here enter image description here

Improve this answer
0

Your colour scheme has a principal hue of 92 degees on the color wheel and is otherwise straight triadic. This suggests an interesting solution: rotate by 60 degrees to get the complementary triad at 152 degrees [1] at which point you have a decent selection of greens and oranges to work with. Used sparingly and in foreground objects rather than backgrounds these could work well and you can even claim to whoever designed the original scheme that you derived your oranges/greens from that!

EDIT: Actually, just switch the scheme type from "triadic" to "analogic" to see the same effect.

[1] http://colorschemedesigner.com/#2o32mw0w0w0w0

Improve this answer
1
  • I'm not sure that orange works very well for an error-indicating color though.
    – Jason Frank
    Aug 1, 2013 at 17:05

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.