Approximately 4.5% of the world’s population is colorblind.
million individuals worldwide having only one kind of visible impairment. The numbers get considerably larger should you have been to take all situations into consideration. But, it’s a hardly ever mentioned subject.
As a knowledge skilled, you don’t need anybody misinterpreting your visuals. Certain, being further clear is extra work, however you’ll make an honest chunk of the inhabitants happier.
At the moment you’ll get 5 actionable ideas for making your current visualizations accessible.
Concrete Pointers for Implementing Accessibility In Your Knowledge Visualization
However first, let’s go over some common pointers you must comply with when Accessibility is a prime precedence.
All the pieces listed beneath is a curated and considerably shortened guidelines of the A11Y project. Should you’re questioning, “A11Y” is an abbreviation for “accessibility” (11 letters between “A” and “Y”).
Anyhow, right here’s what you must take note of:
- Don’t depend on coloration to elucidate the info – An honest chunk of the inhabitants is coloration blind or suffers from another visible impairment. Patterns are a option to go.
- If utilizing coloration, go along with darker, high-contrast tones – Gentle and low-contrast colours make it practically not possible to tell apart between teams on a chart visually.
- Don’t cover vital knowledge behind interactions – Hover occasions can be found solely on the desktop. Nearly all of your customers are on smartphones.
- Use labels and legends – With out them, the reader doesn’t know what the info represents.
- Translate knowledge into clear insights – Simplify the info as a lot as potential, after which some. You don’t need something to be open for interpretation.
- Present context and clarify the visualization – If possible, annotate knowledge factors of curiosity, and add subtitle/caption.
- Have customers with display screen readers in thoughts – Individuals with visible impairments use display screen readers to navigate net pages. Use alt textual content to explain your embedded charts.
With these in thoughts, I got here up with 5 actionable tweaks you may make to your visualizations proper now.
Let’s dive into #1.
1. Use a Excessive-Distinction or Colorblind-Pleasant Colour Palette
The simplest option to perceive why coloration alternative issues is by doing the incorrect factor first.
Think about the next dataset:
x = np.array(["New York", "San Francisco", "Los Angeles", "Chicago", "Miami"])
y1 = np.array([50, 63, 40, 68, 35])
y2 = np.array([77, 85, 62, 89, 58])
y3 = np.array([50, 35, 79, 43, 67])
y4 = np.array([59, 62, 33, 77, 72])It’s an ideal candidate for a stacked bar chart. In different phrases, to point out workplace places on the X-axis and stack worker counts on the Y-axis.
Now think about you’re actually into the colour inexperienced.
You may need to coloration particular person bar parts in numerous shades of inexperienced. It’s a horrible apply (aside from some monochromatic coloration palettes), as you’ll be able to see from the next:
plt.bar(x, y1, label="HR", coloration="#32a852")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#3ebd61")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#2bc254")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#44c767")
plt.title("[DON'T] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()Many individuals surprise what their chart would appear like if it was printed in a black-and-white guide.
This one would look solely marginally worse, however solely as a result of it appears horrendous from the get-go. Distinguishing between bar parts is difficult even for individuals with out visible impairments.
You can use this website to check the contrast between two colors.
Let’s repair it by utilizing a high-contrast coloration palette.
Customized Excessive-Distinction Colour Palette
I’ll proceed with the idea you want the colour inexperienced.
Query: how are you going to create a high-contrast coloration palette from one coloration?
Reply: begin with a darkish shade and end with a coloration related sufficient to your major coloration. On this case, yellow-gold is an ideal candidate.
You get the most effective of each worlds this manner. You’re nonetheless utilizing colours you want and the colours don’t should get lighter (which would scale back the distinction) as you undergo bar segments.
In apply, this boils right down to taking part in round with the coloration parameter for all segments:
plt.bar(x, y1, label="HR", coloration="#14342B")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400")
plt.title("[DO] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
A lot simpler on the eyes.
Predefined Colorblind Colour Palette
However think about the next situations:
- You don’t have the time to mess around with totally different coloration combos
- You do have the time, however there are a couple of dozen classes in your dataset (learn: dozen colours to seek out)
There’s a better resolution to make your chart coloration scheme simpler on the eyes whereas accounting for individuals with visible impairments.
One such resolution is to make use of a colorblind-friendly coloration palette.
The primary line of the snippet reveals you ways:
plt.fashion.use("tableau-colorblind10")
plt.bar(x, y1, label="HR")
plt.bar(x, y2, backside=y1, label="Engineering")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales")
plt.title("[DO] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
This palette comprises 10 colorblind-friendly colours, so it’s a great match for charts with 10 teams or much less.
Should you want extra, perhaps you’ll be higher off rethinking your visualization technique.
2. Cease Utilizing Colours – Use Patterns As an alternative
One other nice option to take away any sort of misinterpretation out of your charts is to make use of patterns as a substitute of colours (or as an addition to colours).
Matplotlib has 10 hatch patterns you’ll be able to select from.
You’ll be able to additional customise the hatches by growing their density or by combining a number of patterns. However that’s a subject for one more time.
To implement patterns, add the hatch parameter to plt.bar(). The instance beneath removes coloration altogether by setting fill=False:
plt.bar(x, y1, label="HR", fill=False, hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", fill=False, hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", fill=False, hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", fill=False, hatch="//")
plt.title("[DO] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Now there’s no option to misread knowledge on this chart.
Can You Combine Patterns with Colour?
If you need the most effective of each worlds, coloration + sample is the place it’s at.
You’ll need to take away the fill=False parameter and alter it with coloration. Or, simply copy the next code snippet:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.title("[DO] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Darkish patterns are clearly seen on bar segments, however that may not all the time be the case.
The edgecolor parameter controls the sample coloration. Let’s see what occurs after setting it to white:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*", edgecolor="#FFFFFF")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx", edgecolor="#FFFFFF")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700", hatch="..", edgecolor="#FFFFFF")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="///", edgecolor="#FFFFFF")
plt.title("[MAYBE] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
The sample is seen for HR and Engineering departments, however the two on the highest are a distinct story.
You may need no hassle seeing the strains on the topmost chart section, however put your self within the sneakers of an individual with visible impairments. They need to all the time be your body of reference.
Bear in mind: Gentle-colored patterns work properly on darkish backgrounds. Darkish-colored patterns work properly on gentle backgrounds. Regulate accordingly.
3. Don’t Overwhelm Person with the Data
This precept goes in two instructions:
- Don’t put an excessive amount of info on a single chart
- Don’t put too many charts subsequent to one another, e.g., in your functions/dashboards
Doing each concurrently is considerably of an final sin in knowledge visualization.
Let’s begin by including a pair extra departments into the combination.
The info is getting tough to handle with Python lists, so I’ve opted for a Pandas DataFrame as a substitute:
import pandas as pd
df = pd.DataFrame({
"HR": [50, 63, 40, 68, 35],
"Engineering": [77, 85, 62, 89, 58],
"Advertising and marketing": [50, 35, 79, 43, 67],
"Gross sales": [59, 62, 33, 77, 72],
"Buyer Service": [31, 34, 61, 70, 39],
"Distribution": [35, 21, 66, 90, 31],
"Logistics": [50, 54, 13, 71, 32],
"Manufacturing": [22, 51, 54, 28, 40],
"Upkeep": [50, 32, 61, 69, 50],
"High quality Management": [20, 21, 88, 89, 39]
}, index=["New York", "San Francisco", "Los Angeles", "Chicago", "Miami"])
df
Now, utilizing the colorblind-friendly palette, let’s plot the worker depend per location and division as a stacked bar chart. To make issues further crammed, I’ve additionally thrown textual content counts into the combination:
plt.fashion.use("tableau-colorblind10")
ax = df.plot(form="bar", stacked=True)
for container in ax.containers:
ax.bar_label(container, label_type="middle", fontsize=10, coloration="#000000", fontweight="daring")
plt.title("[DON'T] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(title="Division", bbox_to_anchor=(1.05, 1), loc='higher left', ncol=1)
plt.present()
Now that’s simply ugly.
Repair #1 – Current Much less Data
One option to clear up this unpresentable mess is by exhibiting much less info to the person.
For instance, solely present worker depend in a single metropolis (throughout departments). You’ll be able to then add a dropdown menu to the aspect of the chart so the person can management the workplace location.
The next snippet plots staff per division in Chicago as a horizontal bar chart:
chicago_data = df.loc["Chicago"].sort_values()
bars = plt.barh(chicago_data.index, chicago_data.values, coloration="#60935D", edgecolor="#000000")
for bar in bars:
plt.textual content(bar.get_width() + 2, bar.get_y() + bar.get_height() / 2, f"{int(bar.get_width())}", va="middle", ha="left", fontsize=14, coloration="#000000")
plt.title("[DO] Worker Rely by Division in Chicago", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Rely")
plt.ylabel("Division")
plt.present()
Repair #2 – Reorganize the Knowledge
If exhibiting much less info isn’t an possibility, perhaps you’ll be able to transpose your knowledge.
For instance, we’re coping with 5 workplace places and 10 departments. Exhibiting 10 columns as a substitute of 10 bar segments is simpler on the eyes.
This fashion, you’ll find yourself exhibiting workplace places as bar segments as a substitute of departments:
df_transposed = df.T
df_sorted = df_transposed.loc[df_transposed.sum(axis=1).sort_values().index]
ax = df_sorted.plot(form="barh", width=0.8, edgecolor="#000000", stacked=True)
for container in ax.containers:
ax.bar_label(container, label_type="middle", fontsize=10, coloration="#FFFFFF", fontweight="daring")
plt.title("[DO] Worker Rely Per Location And Division", loc="left", fontdict={"weight": "daring"}, y=1.06)
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.present()
It’s only a matter of reframing the issue.
The chart on Picture 10 is miles forward of the chart on Picture 8. It’s a truth. Nobody can argue with it.
4. Present In-Depth Explanations of Knowledge On Your Charts
You’ll be able to leverage subtitle and/or caption sections of your chart so as to add further info.
This turns out to be useful while you need to present extra context concerning the knowledge, cite sources, or summarize the principle level(s) of your visualization. The final one is most relevant for individuals with visible impairments.
The issue with matplotlib is that it doesn’t have a devoted operate for chart subtitles and captions. You should utilize suptitle(), however you’ll should mess around with x and y-axis coordinates.
Right here’s an instance:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart reveals how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most staff.", x=0.125, y=0.98, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Rely Per Location And Division", fontsize=20, fontweight="daring", y=1.15, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
Should you favor a caption over a subtitle, you solely have the change y-axis coordinate in plt.suptitle():
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart reveals how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most staff.", x=0.125, y=0, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Rely Per Location And Division", fontsize=20, fontweight="daring", y=1.06, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.present()
All in all, a subtitle or a caption could be the deciding think about accurately getting your message to an individual with visible impairments.
Simply don’t make it 10 paragraphs lengthy. In any other case, it’s the third level of this text yet again.
5. Add Alt Textual content When Embedding Plots
Many individuals with visible impairments use display screen readers.
The issue with display screen readers and charts is that they merely can’t coexist. They may be capable to decide up textual components from the graph, however they’ll’t interpret the visible content material. So, everytime you’re sharing your visualizations (e.g., embedding them into an internet site), you should add alt textual content.
It is a paragraph the display screen reader will learn to your person.
To reveal, let’s use the plt.savefig() operate to avoid wasting the chart as a picture:
plt.bar(x, y1, label="HR", coloration="#14342B", hatch="*")
plt.bar(x, y2, backside=y1, label="Engineering", coloration="#60935D", hatch="xx")
plt.bar(x, y3, backside=y1 + y2, label="Advertising and marketing", coloration="#BAB700", hatch="..")
plt.bar(x, y4, backside=y1 + y2 + y3, label="Gross sales", coloration="#F5E400", hatch="//")
plt.suptitle("Chart reveals how the workers are distributed per division and per workplace location.nChicago workplace has essentially the most staff.", x=0.125, y=0, ha="left", fontsize=14, fontstyle="italic")
plt.title("Worker Rely Per Location And Division", fontsize=20, fontweight='daring', y=1.06, loc="left")
plt.xlabel("Workplace Location")
plt.ylabel("Rely")
plt.legend(loc="higher proper", ncol=4)
plt.ylim(prime=320)
plt.savefig("determine.jpg", dpi=300, bbox_inches="tight")In a brand new HTML doc, add an <img> tag that factors to the picture. That is the place you must present alt textual content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1.0">
<title>Doc</title>
</head>
<physique>
<img
fashion="width: 800px;"
src="determine.jpg"
alt="Stacked bar chart. It reveals how the workers are distributed per division and per workplace location. Chicago workplace has essentially the most staff."
>
</physique>
</html>
You’ll be able to’t see alt textual content while you open the HTML file, however that’s since you’re not utilizing a display screen reader.
If the display screen reader is detected, the alt textual content might be robotically learn to the person.
The very best you are able to do is use a screen reader plugin or level to the picture that doesn’t exist in HTML:
<img
fashion="width: 800px;"
src="doesnotexist.jpg"
alt="Stacked bar chart. It reveals how the workers are distributed per division and per workplace location. Chicago workplace has essentially the most staff."
>
Now the picture can’t be discovered, so alt textual content is displayed as a substitute.
Summing Up Knowledge Visualization Accessibility
And there you might have it — 5 issues you must all the time take into account when designing knowledge visualizations.
The following tips are useful on the whole however are of significant significance when accessibility is crucial. And it all the time ought to be. It requires a tiny bit of additional work out of your finish, however makes your findings accessible to thousands and thousands of extra individuals worldwide.
