0

I have to find colors for a pie chart that look nice and are accessible at the same time. I found that pastel colors look nicer than bright bold colors.

But for different kinds of color blindness, some pastel colors may look too similar. We added white separators between pie chart slices to solve that problem.

Please advise me, if the pie chart in the pastel palette with divided slices is color-blind accessible or not?

Pie chart regular colors and red blind simulation

3
  • 2
    I would strongly recommend that you do some research into color-blindness and how it affects perception of colors. There is a simulated example of some effects of some types of color vision deficiency at enchroma.com/pages/types-of-color-blindness. Feb 28 at 17:07
  • A simulator where you can use your own images can be found at color-blindness.com/coblis-color-blindness-simulator Feb 28 at 17:09
  • @JeffZeitlin thank you for your response Jeff. I already made this research and checked simulations. I found that at some color blindness types colors look similar as on the attached screenshot. When colors aren't divided it's an accessibility problem. But when colors are divided and some of them just look similar, is that still an accessibility problem and it's better to find a different color palette or it's okay? I read also WCAG specification and this aspect wasn't mentioned there. w3.org/WAI/WCAG21/Understanding/non-text-contrast
    – uDima
    Feb 28 at 17:15
5

Please advise me, if the pie chart in the pastel palette with divided slices is color-blind accessible or not?

It is not, can you tell which section is which in these images?

complete colour blindness example

achromatopsia version of pie chart

deuteranopsia (red green) colour blindness example

deuteranopsia version of pie chart

What can you do to make these charts accessible?

As long as the colours contrast with the background at a 3:1 ratio then that is far as you can realistically go selecting a "colour blind friendly palette" as in reality, such a thing does not really exist (someone with protanopia may find one palette easy to use but a person with tritanopia may find that same palette impossible to use.)

It is possible for 2-3 colours but with 7 it is just too difficult.

So instead of colours think of other ways you can differentiate the sections:

Option 1 - patterns

If your design allows why not use patterns to differentiate the sections.

patterns to differentiate sections on a pie chart

The problem with this is, well.... it is ugly so you may want to have a toggle to switch this mode on. Also don't put text within the pie sections if using this option as it is difficult to read.

Option 2 - clear labelling

Or better yet why not redesign your charts so that each label points to the section it corresponds to:

pie chart with labels pointing to sections

That way it doesn't matter what colours you choose (as long as the contrast ratio between them and the background is at least 3:1 as stated earlier and you maintain your white space between each section)

Make sure the text is larger and the colour contrast is higher than in the example image I showed though 😋

Option 3 - interactive highlighting

One final thing you could do if you are really struggling to change the design and the colour scheme is to make each label hoverable (and focusable) and then highlight the corresponding section on the chart (and vice versa, highlight the relevant part of the key if a section of the chart is focused or highlighted).

Although this wouldn't pass WCAG it is still "accessible" in that a colour blind user could still differentiate the sections, even if it is more difficult.

Animation showing how clicking a key item highlights a pie chart section

Conclusion

Option 2 is by far and a way the best way to label a chart as it could be monotone and still work.

Option 1 is not bad if you can make the patterns different enough but is quite ugly (you could always have a toggle button that switched between colour blind friendly mode and normal as long as it is prominently displayed near the chart).

Option 3 is your fall-back as a "nearly good enough" solution that is better than nothing.

Finally there is an option to display the data in a data table separate to the chart itself. This would pass WCAG and may be a simple option if your chart is not screen reader friendly by default (but yet again I would advise taking the time to make the chart screen reader friendly, just giving you options if you get stuck!).

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.