Colours for project status

Question

Given that a project can be

• not yet started
• active
• active, but paused
• completed

What are good colours to help me represent those states (as augmentation, only, to text) ?

Answer 1

Colors as a status are tricky and very dependent on the context of the web application and their application. This is just food for thought.

Contextual consistency helps avoid confusion (such as using red to indicate something is paused but also indicates a system has broken - one situation would be more dire than the other but would be visually equal to the user).

You are trying to make color associations with a sequential status (trying to indicate one thing happens after another) and something to consider is if any step in this process indicates that this status is "good" or "bad" to the user. If it is then using some universally recognized colors like green or red may be appropriate to add when the sequence is complete. If the sequence doesn't indicate "good" or "bad" then before using those colors you should consider if red is used in other aspects of the application to indicate danger to the user.

Additional ideas/notes on color:

Using a monochromatic scale can help give the user a sense of completeness based on darkness/lightness but when comparing the colors to one another (such as in a grid) it is harder for users to quickly distinguish differences in shade.

Using 2 distinct colors may be useful because in your case you have 2 distinct scenario. A) an item is not in progress B) status of that progress. Using grey which is often used for disabled items would be useful for the "Not yet started" and "Active but paused" statuses while another color such as blue (or green) could be used to indicate "Active" and "Complete"

Many programs use red, green, and yellow in these situations. I personally think this seems to be done out of habit. Green tends to mean "good" or "ok", Yellow traditionally means "danger" but its often used as an in between status, and Red means tends to be attention getting as in "danger" or "look here". Often times red can also be used to shame users such as "look at what isn't done".

ROYGBIV can also be used but it is much better for showing scale rather than a sequence and can often get confused with the traditional red, yellow, green meanings.

There are more neutral colors to use like grey, blue, pinks, and purples but many people avoid and dislike pinks and purples.

Other factors to consider are having enough contrast so that people can read your text (if there is text on the color). Here are some web color checkers:

1. http://webaim.org/resources/contrastchecker/
2. http://jxnblk.com/colorable/demos/text/

Other factors play in as well such as how the color is being presented and is it being repeated in different forms throughout the application. It might even be user to just show a user the sequence and use one color to indicate where in the sequence it is.

Sorry if this is all too fundamental. I can't quite tell what "(ass augmentation, only, to text)" means. If all you are trying to do is change the color of the text I strongly recommend not using blues since they are typically used for hyperlinks. I can't tell if you are going to apply these colors directly to the text such as in a list or apply the color to other text, like a title to use as an indicator. It's just important to note that using color alone as an indicator is discouraged by web accessibility standards since those with color sensitivities such as color blindness may not be able to pick up the indicator based on color alone. http://webaim.org/standards/508/checklist

Answer 2

When coloring for status, rather than to invoke mood, here is some common colors:

Find a great list of color meanings here

• Light Grey, associated with something that is neutral and not doing any actions
• Blue, associated with non-critical, basic information
• Yellow, associated with a warning, or a non-critical message before an action
• Green, associated with success and completion
• Red, associated with an error, or a critical message

Taking that into account, given this project, here is what we could do:

• Not Started Yet: light grey
• Active: bright blue
• Active, but paused: lighter shade of blue to invoke a disabled look to show that it's no longer running any actions
• Complete: light green

Answer 3

This does not directly answer the question, but an interesting approach to status is not only showing text and color. You could indicate all the steps (states) involved using indicators similar to this image

Some pros:

• The user is always aware of all the steps, and which state she is currently in
• Combining different colors with the steps add an extra level of awareness

Some cons:

• Space, you need more space to display it in your application

Answer 4

I use the following colors for project status:

1. Dark Grey - Cancelled
2. Blue - Completed

3. Green

   3a. Dark Green - Future (2 - 3 months) - on track

   3b. Bright Green - Action required / Imminent (next month, next)

4. Yellow - Warning

5. Red - Threat / Danger
6. No Color - Normal

Answer 5

You can spell it out rather than having traffic lights. There are a set of visual representations that conform to global standards (like traffic lights). I would recommend to let the user know the status rather than understanding the color definitions. Meaning, words are "sometimes" more powerful than visual cues.

Answer 6

We had a long debate in my company around this subject. We came to the conclusion that the correct colour depends really on what we are trying to achieve.

NOTE: I take the point that colour alone isn't a great indicator due to colour blindness. In such cases, we combine colours with an icon shape.

If we are trying to use colours as an ordinal classification (e.g., low, medium, high), then we follow the order of the visible spectrum. So there is not much to debate when we are just considering key performance indicators:

• Roughly speaking: Red, Orange, Yellow, Green, Blue, Purple...

I would however, invert the colours depending on whether high is good or bad. I would always use the cool side of the spectrum for good, and the warmer side for bad. For example:

• Profits: The higher the better so higher goes towards cool (blue).
• Temperature for a CPU: The lower the better so higher goes towards warm (red).

There are also cases where you need a mid-point. For example, say that the temperature for a greenhouse must be between 20 and 28 celcius. In that case I would use the spectrum as such:

• Yellow: 19,20 and 27,28
• Green: Greater than 20 and less than 27
• Red: Lower than 19 or higher than 28

Now if we are trying to indicate status, particularly when an action is required, then things might not be as straightforward. Consider these two examples for the same application:

1. Leave request system: A simple workflow system where users either approve or reject a request. In this case we could still use yellow for a pending request, green for approved, red for rejected. Let's also use grey for cancelled.

2. A system that performs linear optimisation: We have a system where the user provides a few inputs to be sent to a cloud server for calculation. Our system allows for these calculations to be done in a step-wise manner. So the cloud would return a partial answer, then the user proceeds to fine-tune the model, then submits it back to the cloud. There could be as just one step, or as many as 2, 3, 10, N number of steps until the optimisation is fully complete. In this case we would like a colour to specify that the solution is being calculated by the cloud service (hurdle is with the system), and another to specify that we are awaiting the user's input. We also need a colour for error, cancellation, and completeness. So this is what we came-up with:

   • Grey: Cancelled by the user.
   • Red: Error.
   • Yellow: Cloud service is performing calculations (user must wait).
   • Blue: Awaiting user input (cloud service returned partial calculation).
   • Green: Calculation has been completed.

At first I thought that green must be used to denote we are awaiting user input, and blue would mean it is complete. My initial rationale was that green comes before blue in the spectrum. But then I concluded that these are not necessarily an ordinal set of indicators. Take red for cancelled as an example. We certainly don't mean to say that cancelled (red) comes before everything else! Green in this case, means 'finished'. We decided to use blue for awaiting user input (partial completion) and green for completion after we looked into how other applications use colours.

Now if we look back into the leave request system, one can say that we were left with an inconsistency between that and the linear optimisation system. In the former, we use yellow to specify that we are awaiting user inputs. In the later, we are using blue. Remember that both systems are part of the same application. I don't have the perfect reasoning for this inconsistency. It is just that for the leave request system, it just 'felt right' to use yellow for pending requests. I am open to changing it after some User Acceptability Tests, but for now this is how we have it.

Hope this helps.