Will muted Colors for charts pop enough and blend well in the UI that has contrast colors?

Question

"Muted colors are less intense due to a lower hue saturation. The less saturated colors are more pleasing on the eye and make it easier for the audience to consume the visualizations. It reflects a calm minimalism, meant to encourage its viewers to step out of a chaotic world to notice the beauty in simple things. Contrast draws attention, so having too much contrast will cause clutter. Instead, consider using muted colors as a general rule. Use high contrast colors only for important data."

This is my philosophy about using colors for charts. We are in the process of coming up with a couple of color palettes for the charts (line charts, donut charts, good/poor/fair color coding etc). One with bright/contrast color palette and other one is less saturated colors.

The UI styleguide uses a lot of high-contrast colors, lots of orange highlights, dark-grey headers for tables & panes, dark blue & dark grey buttons, etc.

So given that background, my counterpart feels muted colors for charts won't pop enough. He feels that it really should be the other way around, i.e. muted colors for the GUI elements, more prominent colors for the data elements. Because it’s the data elements (content) that’s more important, not the GUI stuff.

Does it really matter? I mocked up the UI with the Charts using the muted colors, just to see what it will look like. I didn't feel that the charts lack the visual prominence.

I know it would be difflicult to comment without seeing the mock. But then I need some guidelines or general rule.

Answer 1

The general guideline I use is:

If everything is important then nothing is important.

If all the elements on your screen are fighting to gain the user's attention (with colours, bold fonts, prominent positioning, flashing lights, or animations) then it becomes harder to see what is important.

Having said that, if all of your UI has a particular colour scheme and you are stuck with this (company colours / branding), it may be enough that the chart looks markedly different from this to pop out. For example, if everything in the UI has a certain bright blue colour, then users will likely filter out things that match this colour scheme.

If your UI looks like the below, and the chart is on a white background it will already be quite distinct. Everything is blue so something blue looks less important. If your UI was greyscale, then something that was bright blue would of course pop out.

Answer 2

Whether your chart is "Stylish" or "Pops" enough should only be a part of the decision making process for chart colours. Other things that should be taken into account include being able to distinguish series for colour-blind users, being able to distinguish series for users with low vision (poor contrast sensing), being able to understand data for users with cognitive difficulties ('Do all green lines relate to the same series regardless of shade?')...

Other things that will affect your colour choices for charts could include the number of series represented, the consistency of the data, the range of the data...

In short, there are lots of things that may dictate your chart colours to the extent that you will only have a small amount of room to manoeuvre when conforming to a style.

I don't think there is a 'general rule' here - each chart (or set of charts) will need to be analysed in context with it's purpose and the capabilities of the potential end-users.

If in doubt find some way of testing. Like this for example: https://accessibility.oit.ncsu.edu/tools/color-contrast/index.php