Graphs - Contrast b/w colors are eye soothing colors

Question

I have recently had a chance to work on graphs and charts, and I'm facing a problem when there are a lot of bars in a chart or stacked bars in a graph.

Should we consider going with eye soothing colors which don't really affect users? Or should we make it clear by using the colors which have enough contrast between them, instead of going with different shades on the same color?

Which would be a better experience to the user? Should colors match with the style guide colors of the platform, or can they have a different set of colors?

Edited : Below is new color scheme which made

Answer 1

Graphs are always used to display different set of values. Contrast helps users to instantly distinguish and categorize the values; whereas shades of same color will create confusion and would require more brain processing.

Always choose eye soothing colors. I don't know if anybody likes sharp, torturous colors on screen.

Read more on Practical Rules for Using Color in Charts

Answer 2

While DPS's response is a good start, it does not address your specific situation because you have 4 different colors touching each other in a single 'segment' of information within the entire chart.

When you put complimentary colors side-by-side, you get something like an electrical "buzzing" effect that can be very distracting and even irritating to the users' eye. https://en.wikipedia.org/wiki/Complementary_colors

I would recommend a set of colors that are in the (somewhat) same level of saturation, and keep them low on a white background, or high on a black background. https://en.wikipedia.org/wiki/Tints_and_shades

On the other hand, if two side-by-side colors are too close they can get muddled up, so I think you can make a degree of contrast to create differentiation.

To save yourself some time, you might want to try the Adobe Kuhler tool, which is free. The "Triad" palette generator will give you a set of colors that are generally of a similar enough tone.

Final note: don't forget color blindness :)

Answer 3

Give priority to clarity before style.

Edit to answer the question more directly: In a stacked bar where all values are evenly important make them distinguishable from each other. I wouldn't call the colors in your second example eye-soothing as they need more effort to distinguish. It also has many values, is this graph efficient enough (does it tell a story)? The first graph has not too many colors and is pretty safe to use concerning color-blindness. Read on, my previous answer was more general.

---

Should colors match with the style guide colors?

Is it only a eye-catcher that is more promotional than informative?
Giving priority to the style guide and beautification probably justifies a less informative graph.

In your case it looks more like informative graphs.
Give priority to a style that makes the graph more informative and easier to read. This means the choice of color has to help read the story more efficiently. With story I mean the purpose of the graph, the story you try to tell behind it.

An example: If it's a graph with a bar for each product and you want to point out how your new product is selling, it is possible to make all products the same color and the new product a different one so it will stand out. If you use red and green for example this extra reading aid will be less effective for someone with color-blindness. But if red and green represent good and bad results and is very important to communicate, this might be a sacrifice to make. See my example, these are not exactly eye-soothing colors but serve their purpose. For people with color-blindness you can add texture, a label or remove the red color from the bars leaving only the green one filled. The latter being my favourite choice in this example case, I like to reduce the style to a minimum.

There are complete books about this and I suggest to read at least one.

Answer 4

Applications rarely match graphs with the overall color scheme (depending on how many data points you have)

If you need a monochrome solution something like this is also common:

Answer 5

In the best case scenario you use the colors you find in the style guide, you can also use different gradations of the main colors if you need more colors.

Regarding ux, you should definitely use the colors that help the user grasp the informations as soon as possible even after switching view multiple times.

If you use colors that don't have enough contrast the users will have a hard time returning to the graph to gather informations because their eye constantly has to relocate. Contrasts really help the user to scan those graphs.

If the graphs are really simple tho, like in your example, you could also use gradations from grey in this case, for example: 100% grey, 80% grey, 60% grey, 40% grey... at the end it depends on the informations you want to transmit. The more complex the information, the bigger the contrasts should be.