Remove color to add emphasis

Question

Context

I'm working on a new user interface for a project portal system. Part of the system is a dashboard that lets the user know what the status of his project is. This dashboard is also there to let him see any trend breaking changes to the project.

The goal behind the dashboard is that the user should get a clear picture of problems in his project. To that end we made a few decisions.

we decided to use Red and Yellow as color indicators for possible problems in a project. With that we also decided that Green wasn't a good color to show for a specific status, because green means, there's nothing special going on, so why would I look at that? The rest of the dashboard is kind of dull, gray and lacks flair if you ask me.

Question

Are there other ways to achieve the same goal? I would love to have some examples too, to get inspiration.

Answer 1

You should really consider the status indicators differ in shape as well as in colour, considering the visual impaired.

There is colour blindness that turn red into a yellowish glaze. It sounds like the solution you're suggesting could pose a problem for users with that sight reduction.

Edit: Due to request. Here are the icons I developed to use in a similar situation. Note that I've not conducted any studies on its effectiveness:

OK/No alert:

Medium Alert:

High alert:

Answer 2

I agree about taking the visually impaired into consideration, but think keeping a uniform shape will make the list easier to scan.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Colorblind users will still be able to easily discern Warning from Problem, and you can keep a clean design.

Answer 3

There's a simple method to check if your colors do what they're supposed to do: convert the whole image into greyscale. It sounds counter intiutive perhaps, but it works very well. That's because it's not about the colors, it's about the relation between the colors. In other words, it's about contrasts. More in particular, about lightness contrasts. This is also a foolproof way to tackle the problem of color blindness. Whatever is visible in greyscale, will be visible to anyone. I tried to find a few examples for you, but they're actually hard to come by in the world of software User Interface. So here are a few hardware examples, the good, the bad and the ugly.

This is a smart color scheme because it groups the buttons in a meaningful way. All the buttons contrast with their backgrounds, which makes them quite visible. Interestingly, the light buttons have a dark font, the dark buttons have a light font. Sounds obvious, no? For fun, you can check your own remote. Or your car's dashboard for that matter.

This remote is less smart. See how the light buttons have a light font? The colored buttons make little sense in this context. What do they mean? Moreover: 5% of all people won't be able to see the difference between the green and the red button. The only button that stands out is the yellow one. But what for I wouldn't be able to tell.

Here's today's worst. Good luck figuring out what these buttons do.

What you are trying to accomplish is not so very difficult. I'm actually in the process of writing articles on how to do this kind of stuff. Common sense has a lot to do with it. Nevertheless, it is not so easy to explain. For the time being, you might check out NASA's color pages.