Creating an accessible pie chart
A stream of consciousness walkthrough
Let's pretend that you've created a pie chart that you want to put into a presentation. You think you've settled on a color palette that is using brand colors.
"It looks pretty good!" you think. And you're right – it does!
But how does it look from an accessibility standpoint?
Accessible contrast
Permalink to "Accessible contrast"Let's start by looking at the contrast between each of the colors.
According to WCAG, we need at least a 3:1 contrast ratio from one color to the next. For good measure, we should probably make sure that colors similar to each other aren't used - so they can be differentiated from each other.
We'll start from 12 o'clock.
From Pale Gray to Dark Gray we're good at 3.44:1. Between the Light Blue and the Dark Blue we're at 8.93:1. That's good, too. And from Vibrant Blue to Light Gray, we're at 3.28:1. Great!
Now, from Dark Gray to Light Blue we're at 2.72:1 - and from Dark Blue to Vibrant Blue, we're at 2.02:1.
Well, darn, there are two sets of colors that don't meet the 3:1 contrast threshold.
But, they're close aren't they? Doesn't that count?
No, unfortunately. Unlike horseshoes, there is no credit for 'pretty close'. It either passes the threshold or it doesn't.
Maybe we should re-think the colors...
A new color palette
Permalink to "A new color palette"After playing around for a little while, you come up with a new palette that meets the required thresholds by moving a couple of colors around and choosing two new colors. Now from Medium Blue to Light Gray we're at 3.14:1. From Light Gray to Dark Mint we're at 4.05:1. Dark Mint to Light Blue is 3.17:1. Light Blue to Dark Blue is 8.69:1 and Dark Blue to Medium Blue is 3.53:1. Great!
So we're done, right?
No, we're kinda just getting started. Now it's time to look at the pie chart through other people's eyes.
Contrast and color deficiency
Permalink to "Contrast and color deficiency"Often times when people think of color blindness, they think that people see in either all color or only shades of gray. The degree of the specific color deficiency and the presence of multiple forms of color blindness all affect how a person perceives color. The 4 major groups of color blindness are:
- Deuteranopia (insensitive to green light)
- Tritanopia (insensitive to blue light)
- Protanopia (insensitive red light),
- Achromatopsia (no color perception)
See this article about the types of color blindness to learn more specifics.
Let's take a look at what those individuals would see if looking at our pie chart.
Here's how someone with Protanopia or Protanomaly would see the chart.
Protanopia / Protanomaly
Permalink to "Protanopia / Protanomaly"
OK. That looks almost exactly the same... Why are we doing this?
Deuteranopia / Deuteranomaly
Permalink to "Deuteranopia / Deuteranomaly"
Oh! Now I can see the differences starting to show up. In the Deuteranopia example the light blue looks purple now... The light gray looks... pink? And green is now gray? Weird!
Well, at least they can still be obviously differentiated. Lookin' good so far!
Now for Achromatopsia / Achromanomaly...
Achromatopsia / Achromatomaly
Permalink to "Achromatopsia / Achromatomaly"
Other than the obviousness that the Achromatopsia example is all shades of gray, I'm starting to understand why this might be helpful.
Again, the colors (and shades of gray) can still be differentiated. Yes!
Here comes the last one... Tritanopia / Tritanomaly.
Tritanopia / Tritanomaly
Permalink to "Tritanopia / Tritanomaly"
Uh-oh. (sigh)
Tritanomaly looks good, but in the Tritanopia example that big section at the bottom and the portion at the 1 o'clock position look almost the same.
Back to the drawing board...
ANOTHER new color palette
Permalink to "ANOTHER new color palette"Do I really have to try a whole new set of colors?
Maybe. Maybe we can just change out one or two and it'll work?
(Gosh, I hope so... this is starting to be a pain in the neck.)
Contrast
Permalink to "Contrast"
OK, first step, do they meet contrast requirements? Answer, yes.
Light Gray to Dark Mint is 3.44:1. Dark Mint to Lemon Yellow is 3.02:1. Lemon Yellow to Dark Blue is 12.52:1. Dark Blue to Medium Blue is 3.58:1 and Medium Blue to Light Gray is 3.14:1.
Step one? Success!
Now let's look at the other vision deficiencies versions.
"Trial B" color deficiency versions
Permalink to ""Trial B" color deficiency versions"Protanopia / Protanomaly
Permalink to "Protanopia / Protanomaly"
Deuteranopia / Deuteranomaly
Permalink to "Deuteranopia / Deuteranomaly"
Tritanopia / Tritanomaly
Permalink to "Tritanopia / Tritanomaly"
Achromatopsia / Achromatomaly
Permalink to "Achromatopsia / Achromatomaly"
Alright!
Seems like a pretty decent color palette...
They all have some semblance of differentiation from a color perspective.
After the feeling of accomplishment has worn off, you realize that there is still a small (but nagging) concern... Dark Mint and the Medium Blue colors – those kinda look similar in both the Achromatopsia and Tritanopia versions.
You really wanted to be done with this. Do we have do this all again?!
That is definitely one way to handle it, but, in this case, we should be able to solve this pretty easily.
Really?!
Yep.
We can add a pattern to one color or the other.
Adding a pattern
Permalink to "Adding a pattern"Let's try a vertical line pattern over one of those background colors - we'll pick the one closest to the top... the Dark Mint one.
How does that look?
Now I can definitely tell the difference between those two backgrounds!
Perfect! You've made an accessible pie chart!
WE'RE DONE!!! (Aren't we?)
Almost.
I thought we were done
Permalink to "I thought we were done"Unfortunately, there are still two more items to consider: 1) the legend, and 2) the entire chart (and it's internal colors) to the background that the entire pie chart is sitting on.
Again, both of those must meet the same ≥3:1 contrast ratio threshold. And that Light Gray versus the background probably doesn't pass that threshold (again).
The legend text is even more restrictive - it has to meet a ≥4.5:1 ratio against the background.
Chart to background
Permalink to "Chart to background"First, let's deal with the Light gray to the background.
We know this is going to be presented on a white background. I need to look at the contrast of all the colors of the pie to white. After using a contrast checker (e.g. WebAIM), you discover that the Light gray slice of pie has a contrast ratio of only 1.43:1 with the white background.
But you ALSO discover that the Lemon Yellow has the same issue, only it's contrast ratio is 1.29:1.
What?!
What are we going to do?! There is no way that this should be this hard. Wouldn't it be just as easy to not have a pie chart?
I promise, we are almost there...
There are multiple ways to fix this, but by far the easiest is this: Let's give the entire pie chart a 1px solid charcoal border.
It can't be that simple. Nothing has been that simple so far.
In this case, it is. That 1px charcoal border acts as a separator to the slices of pie that need don't meet the 3:1 contrast ratio.
What about the other pieces of the pie? Don't they now get all messed up?
No - and that's the beauty of this method. The colors that do pass on the white still pass against white. The charcoal border gives the appropriate contrast to the pieces that don't pass and doesn't effect the accessibility of the ones that already pass.
Booyah!
The legend
Permalink to "The legend"Alright, one final step. Our legend color markers are colored circles on a white background.
Based on what we just did with the pie chart and background colors, we now know which colors do and don't pass the contrast threshold on white - and they follow the same ≥3:1 contrast ratio rule.
And, wait... (realization) our pie chart is a circle... and each one of those legend color keys is a circle as well.
Will that same strategy we just used for the pie chart work with these?
You bet your bippy it will! Same principal... same solution.
Finishing touch
Permalink to "Finishing touch"The last step is adding back in the numbers...
Now are we done?
Yes we are!
But... here's the key: when implementing, you need to ALWAYS apply them in this order, and this ONLY works with these 5 colors. If you only have 4 colors, you'll need to look at this process again with only the 4 colors. Same with 6, and 7, etc. You'd have to do the same process with all the chosen colors (albeit you would have a good staring point)!
Making an accessible pie chart – who knew it'd be that involved?!
We did! And we wanted to share it with you, so you'd know how to do it too!