Multipart progress / status bar colours

Question

I am working on an application that needs to show users their currents status / progress in performing a task on a number of items. There are three states that each item can have:

1. New (blue) - Item has not been seen or processed yet
2. Good (green) - Item has been processed in the past, and has no pending task associated with it
3. Due (red) - Item has been processed in the past, but has a pending task associated with it

For a quick overview of collections of these items, a multi-part progress bar is being used. The image below shows 4 such possibilities for these bars.

My concern is that some of the colours don't work well next to each other - especially for colourblind people.

What can I do to make this easier on the eyes, and more accessible?

Answer 1

You are correct that color alone will be problematic especially with red and green side by side.

A good nested progress bar needs elegant answers to the following questions:

1. How do I qualify the types in the array (new, good, due)?
2. How do I quantify the types in the array?

Color alone is an inadequate solution for either need because you have no idea how many items are within each type (you can only measure roughly what the ratio is compared to the others).

Annotated Segmented Progress Bars

One option is to add some additional visual cues and data to the bars so that the color is a secondary or tertiary indicator rather than a primary. In this case I used a text label to display the type and then a disc with the type item count.

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

If the quantity of a type is only 1 or 2 and the width of the nested progress bar is not big enough to fit the label and count moving some the annotations outside of the bar itself might be an avenue worth considering.

^{download bmml source}

Here are some other real examples of the same idea with slightly different implementation:

source

source

Answer 2

How about something like this?

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

Grey is done

Moving texture indicates pending tasks/currently processed part

White is "missing" stuff, which needs to be processed

Answer 3

Take a look at JIRAs progressbar:

Colors work well and there is clear indicator which color means what. The numbers here are more clear than having them inside the progressbar like in Charles' answer, better suitable for mobile devices. Also, if you have zero items in one category, you can see that immediately as well from the number.