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

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.