Colours for project status

  • 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) ?

    Colors should never be used to convey information,color blindness is extremely common in males in particular and is not always clear

    I am aware of that and am using color only as a secondary indicator

    That's an... interesting abbreviation in your question..

    In three years, you are the only one who noticed :-)

  • Chromarush

    Chromarush Correct answer

    6 years ago

    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).

    grid with paused status and red and alert the building is burning in red

    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.

    sequence vs color

    Additional ideas/notes on color:

    grey scale colors

    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.

    grey and color

    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"

    redgreen

    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

    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.

    neutral colors

    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.

    enter image description here

    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

    +1 for the use of Comic Sans on a genuine, fully worked example XD

    This answer could be improved by providing a clear recommendation or two at the top.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM