User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
It is not, can you tell which section is which in these images?
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:
If your design allows why not use patterns to differentiate the sections.
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.
Or better yet why not redesign your charts so that each label points to the section it corresponds to:
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 😋
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.
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!).
