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.


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

3 Answers 3


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: enter image description here

Medium Alert: enter image description here

High alert:

  • Do you have any samples that could give me a good indication as to what shapes might work best? Mar 28, 2012 at 11:55
  • 1
    I was wrestling this problem myself a few weeks back. I decided to go with an approach that isn't represented in the answers. It's a circle divided into three sections. The sections will lit up/lit down depending on the grade of alert. The problem still is that colour blind users will at encounter of the icons not be able to determine the grade of alert, it's a recognition process for them. Meaning that the icons will provide more feedback once they know what the grade of "lit up" sections mean. See edit. Mar 28, 2012 at 12:05
  • I'd make the empty/colored bits vary more in intensity as well as color, especially due to R/G/Y confusion in common forms of colorblindness
    – Ben Brocka
    Mar 28, 2012 at 14:10
  • @BenBrocka I see your point. The colours are taken straight from the company guidelines, don't think I could have too much to say about that since its present in a number of already existing products we provide. One approach could be to have the empty cells only be composed of its borders. I feel that making the fill of the empty cells more bright could cause it to blend in too much with a white background. And I don't wan to see the empty cells left out altogether because that would, as far as I'm concerned, somewhat take away the uniformity of them. Mar 28, 2012 at 14:26
  • There's always exceptions and annoying hindrances to design decisions :) I was just stating generally. For most users those indicators should be just fine.
    – Ben Brocka
    Mar 28, 2012 at 14:45

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.


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.

enter image description here 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.

enter image description hereThis 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.

enter image description here 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.

  • 1
    The last example it looks like the buttons control the color of a light. I would guess that whatever the color on the button looks like to a colorblind person is related to what color the lamp will look like to that person with that setting, so it balances out. On the TV remote example, I think "featureless round color buttons" are a standard thing in Europe for teletext - while the standard is unfortunate (the US equivalent has shapes and ABC as well), it's not the remote manufacturer's fault.
    – Random832
    Apr 3, 2012 at 19:00

Your Answer

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

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