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

  • 1
    Hard to say without seeing the mocks, but it sounds like exactly the wrong things will pop out. For line charts: curves and curve labels first, axis stepping and labels second. The grid is a visual aid to connect axis stepping with events in the curve and should be in the backgorund accordingly. Different curves in the same chart should have significant contrast.Even though a smooth color scheme can look more pleasing as a whole, it is often less functinal (exceptions exist). Surrounding UI should set accents in a separate color scheme. – peterchen Jan 13 '16 at 12:55

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.

enter image description here enter image description here

  • The example part is slightly confusing. You are saying it is okay to have different color scheme for the charts so that it can pop out amidst the bright colors of the UI. However, in the example you are saying, if everything in the UI has a bright blue color, the users will likely filter out the color that matches this color scheme. So are you saying it is better to use the colors that is used in the UI. This isn't clear to me. Can you clarify if you don't mind? TIA. – essdeepee Jan 13 '16 at 12:51
  • 1
    @essdeepee added some pictures which hopefully show what I mean. – Franchesca Jan 13 '16 at 13:21

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.