Information visualizations are graphics that leverage our visible system and innate capabilities to collect, accumulate, and course of info in our surroundings, as proven within the animation in Determine 1.0.
Determine 1.0. An animation demonstrating our preattentive processing functionality. Primarily based on a lecture by Dr. Stephen Franconeri. (Giant preview)
Because of this, we’re in a position to rapidly spot tendencies, patterns, and outliers in all the pictures we see. Can you notice the visible patterns in Determine 1.1?
On this instance, there are patterns outlined by the dimensions of the shapes, using fills and borders, and using various kinds of shapes. These traits, or visible encodings, are the constructing blocks of visualizations. Good visualizations present a glanceable view of a big information set we in any other case wouldn’t have the ability to comprehend.
Accessibility Challenges With Information Visualizations
Visualizations sometimes serve a big selection of use instances and may be fairly advanced. Quite a lot of care goes into selecting the best encodings to signify every metric. Designers and engineers will use colours to attract consideration to extra necessary metrics or info and spotlight outliers. Oftentimes, as these design choices are made, concerns for individuals with imaginative and prescient disabilities are missed.
Imaginative and prescient disabilities have an effect on tons of of hundreds of thousands of individuals worldwide. For instance, about 300 million individuals have color-deficient imaginative and prescient, and it’s a situation that impacts 1 in 12 males.1
1 Color Blind Consciousness (2023)

Most individuals with these situations don’t use assistive expertise when viewing the information. Due to this, the visible design of the chart wants to fulfill them the place they’re.
Determine 1.2 is an instance of a donut chart. At first look, it would appear to be the specific shade palette matches the theme of digital wellbeing. It’s calm, it’s cool, and it could even invoke a sense of wellbeing.
Determine 1.3 highlights how this identical chart will seem to somebody with a protanopia situation. You’ll discover that it’s barely much less readable as a result of the Different and YouTube classes showing on the prime of the donut are indistinguishable from each other.
For somebody with achromatopsia, the chart will seem because it does in Determine 1.4
On this case, I’d argue that the chart isn’t actually telling us something. It’s practically not possible to learn, and swapping it out for an information desk could be arguably extra helpful. At this level, you is likely to be questioning easy methods to repair this. The place do you have to begin?
Begin With Net Requirements
Net requirements may help us enhance our design. On this case, Net Content material Accessibility Pointers (WCAG) will present essentially the most complete set of necessities to start out with. Pointers name for 2 concerns. First, all colours should obtain the correct distinction ratio with their neighboring parts. Second, visualizations want to make use of one thing apart from shade to convey that means. This may be achieved by together with a second encoding or including textual content, photographs, icons, or patterns. Whereas this text focuses on attaining WCAG 2.1 requirements, the identical ideas can be utilized to attain WCAG 2.2 requirements.
Net Requirements Challenges
Assembly the net requirements is trickier than it would first appear. Let’s dive into just a few examples exhibiting how tough it’s to make sure information will likely be understood at a look whereas assembly the requirements.
Problem 1: Shade Distinction
In response to the WCAG 2.1 (stage AA) requirements, graphics equivalent to chart parts (strains, bars, areas, nodes, edges, hyperlinks, and so forth) ought to all obtain a minimal 3:1 distinction ratio with their neighboring parts. Neighboring parts could embrace different chart parts, interplay states, and the chart’s background. By the way, when you’re unsure your colours are attaining the proper minimal ratio, you’ll be able to verify your palette right here. Moreover, all textual content parts ought to obtain a minimal 4.5:1 distinction ratio with their background. Determine 1.5 depicts a pattern categorical shade palette that follows the really useful requirements.
That is fairly a daring palette. When making use of a compliant palette to a chart, it would appear to be the instance in Determine 1.6.
Whereas this instance meets the colour distinction necessities, there’s a tradeoff. The chart’s focus is now misplaced. The purple segments on the backside of every stacked bar signify an important metrics illustrated on this chart. They signify errors or a depend of things that want your consideration. Because the chart options daring colours, all of that are equally competing for our consideration, it’s now tougher to see the gadgets that matter most.
Problem 2: Twin Encodings, Or Conveying That means With out Shade
To attenuate reliance on shade to convey that means, WCAG 2.1 (stage A) requirements additionally name for using one thing apart from shade to convey that means. This can be a sample, texture, icon, textual content overlay, or a wholly totally different visible encoding.
It’s straightforward to throw a sample on prime of a categorical fill shade and name it a day, as illustrated in Determine 1.7. However is the chart nonetheless readable? Is it glanceable? On this case, the segments seem to run into each other. In his ebook, The Visible Show of Quantitative Data, Edward Tufte describes the significance of minimizing chartjunk or pointless visible design parts that restrict one’s means to learn the chart. This begs the query, do the WCAG requirements encourage us so as to add pointless chartjunk to the visualization?
Following the requirements verbatim can lead us down the trail of making a very noisy visualization.
Let The Requirements Empower vs Constrain Design
Over the previous a number of years, my working group at Google has discovered that it’s simpler to fulfill the WCAG visible design necessities after they’re thought of in the beginning of the design course of as an alternative of making an attempt to replace present charts to fulfill the usual. The latter strategy results in charts with pointless chart junk, identical to the one beforehand depicted in Determine 1.7, and minimized usability. Contemplating accessibility first will allow you to create a visualization that’s not solely accessible however helpful. We’re calling this our accessibility-first strategy to chart design. Now, let’s see some examples.
Fixing For Shade Distinction
Let’s revisit the colour distinction requirement by way of the instance in Determine 1.8. On this case, an important metric is represented by the purple segments showing on the backside of every bar within the collection. The purple shade represents a depend of things in a failing state. Since each colours on this palette compete for our consideration, it’s tough to give attention to the metric that issues most. The chart is now not glanceable.
Focus On Important Parts Solely
By stretching the requirements a bit, we will stability a11y and glanceability loads higher. Solely the visible parts important for deciphering the visualization want to attain the colour distinction requirement. Within the case of Determine 1.8, we will use borders that obtain the required distinction ratio whereas utilizing lighter fills to the purpose of focus. In Determine 1.9, you’ll discover your consideration now shifts all the way down to the metrics that matter most.
Determine 1.9. ✅ DO: Think about using a mix of outlines and fills to fulfill distinction necessities whereas sustaining a focus. (Giant preview)
Darkish Themes For The Win
Most designers I do know love a great darkish theme just like the one utilized in Determine 2.0. It appears to be like good, and darkish themes typically lead to visually gorgeous charts.
Extra importantly, a darkish theme presents an accessibility benefit. When constructing on prime of a darkish background, we will use a wider array of shade shades that may nonetheless obtain the minimal required distinction ratio.
In response to an audit performed by Google’s Information Accessibility Working Group, the 61 shades of the Google Materials palette from 2018 achieved the minimal 3:1 distinction ratio when positioned on a darkish background. That is depicted in Determine 2.1. Solely 40 shades of Google Materials colours achieved the identical distinction ratio when positioned on a white background. The 50% enhance in accessible shades when transferring from a light-weight background to a darkish background makes an enormous distinction. Gaining access to extra shades permits us to attract focus to gadgets that matter most.
With this in thoughts, let’s revisit the sooner donut chart instance in Determine 2.2. For now, let’s hold the white background, because it’s a core a part of Google’s model.
Determine 2.2. ✅ DO: Use a mix of fills and borders that obtain the minimal distinction ratios to enhance the readability of your chart. (Giant preview)
Whereas this can be a nice first step, there’s nonetheless extra work to do. Let’s take a better look.
Fixing For Twin Encodings And Minimizing Chartjunk
As proven in Determine 2.3, shade is our solely means of connecting segments within the donut to the corresponding classes within the legend. Regardless of our greatest efforts to comply with shade distinction requirements, the chart can nonetheless be tough to learn for individuals with sure imaginative and prescient disabilities. We’d like a twin encoding, or one thing apart from shade, to convey that means.
How would possibly we do that with out including noise or lowering the chart’s readability or glanceability? Let’s begin with the textual content.
Integrating Textual content And Icons
Including textual content to a visualization is an effective way to resolve the twin encoding downside. Let’s use our donut chart for instance. If we transfer the legend labels into the graph, as illustrated in Determine 2.4, we will visually join them to their corresponding segments. Because of this, there isn’t any longer a necessity for a legend, and the labels turn out to be the second encoding.
Let’s have a look at just a few different methods to supply a twin encoding whereas maximizing readability. This may forestall us from operating within the path of making use of pointless chart junk like the instance beforehand highlighted in Determine 1.7.
Relying on the state of affairs, form of the information, or the accessible display screen actual property, we could not have the luxurious of overlaying textual content on prime of a visualization. In instances like in Determine 2.5, it’s nonetheless okay to make use of iconography. For instance, if we’re coping with a really restricted variety of classes, the added iconography can nonetheless act as a twin encoding.
Some charts can have upwards of tons of of classes, which makes it tough so as to add iconography or textual content. In these instances, we should revisit the aim of the chart and resolve if we have to differentiate classes. Maybe shade, together with a twin encoding, can be utilized to spotlight different elements of the information. The instance in Determine 2.6 exhibits a line chart with tons of of classes.
We did just a few issues with shade to convey that means right here:
Vibrant colours are used to depict outliers inside the information set.
A impartial grey shade is utilized to all nominal classes.
On this situation, we will as soon as once more use a really restricted set of shapes for differentiating particular classes.
The Advantages Of Small Multiples And Sparklines
There are nonetheless instances when it’s necessary to distinguish between all classes depicted in a visualization. For instance, the tangled mess of a chart is depicted in Determine 2.7.
On this case, a extra accessible answer would come with breaking the charts into their very own mini charts or sparklines, as depicted in Determine 2.8. This answer is arguably higher for everybody as a result of it makes it simpler to see the person development for every class. It’s extra accessible as a result of we’ve utterly eliminated the reliance on shade and appended textual content to every of the mincharts, which is healthier for the display screen reader expertise.
Reserve Fills For Objects That Want Your Consideration
Earlier, we examined utilizing a mix of fills and descriptions to attain shade distinction necessities. Purple and inexperienced are generally used to convey standing. For somebody who’s purple/inexperienced colorblind, this may be very problematic. In its place, the standing icons in Determine 2.9 reserve fills for the gadgets that want your consideration. We co-designed this answer with some assist from clients who’re colorblind. It’s arguably extra scannable for people who find themselves absolutely sighted, too.
Embracing Related Metaphors
In 2022, we launched a redesigned Fitbit cellular app for the plenty. One in all my favourite visualizations from this launch is a chart exhibiting your coronary heart fee all through the day. As depicted in Determine 3.0, this chart exhibits when your coronary heart fee crosses into totally different zones. Dotted strains have been used to depict every of those zone thresholds. We used the spacing between the dots as our twin encoding, which invokes a sense of a “visible” heartbeat. Threshold strains with intently spaced dots suggest the next coronary heart fee.
Persevering with the theme of utilizing enjoyable, related metaphors, we even primarily based our threshold spacing on the Fibonacci Sequence. This enabled us to signify every threshold with a noticeably totally different visible remedy. For this instance, we knew we have been heading in the right direction as these accessibility concerns examined properly with individuals who have color-deficient imaginative and prescient.
Accessible Interplay States
Shade distinction and encodings additionally have to be thought of when exhibiting interactions like mouse hover, choice, and keyboard focus, just like the examples in Determine 3.1. The identical guidelines apply right here. On this instance, the hover, focus, and clicked state of every bar is delineated by parts that seem above and under the bar. Because of this, these parts solely want to attain a 3:1 distinction ratio with the white background and never the bars themselves. Not solely did this sample check properly in a number of usability research, nevertheless it was additionally designed in order that the states may overlap. For instance, the hover state and chosen state can seem concurrently and nonetheless meet accessibility necessities.
Discovering Your Inspiration
For some more difficult initiatives, we’ve taken inspiration from surprising areas.
For instance, we appeared to nature (Determine 3.2) to assist us take into account strategies for visualizing the consequences of cloud moisture on an LTE community, as sketched in Determine 3.3.
We’ve taken inspiration from halftone printing processes (Determine 3.4) to consider how we would reimagine a heatmap with a twin encoding, as depicted in Determine 3.5.
We’ve additionally taken inspiration from structure and the way individuals transfer by buildings (Determine 3.6) to contemplate strategies for exhibiting the scope and stream of information right into a donut chart as depicted in Determine 3.7.
Determine 3.7. Making use of inspiration from structure and a constructing’s stream. (Giant preview)
On this case, the animated internal ring highlights the scope of the donut chart when it’s empty and signifies that it’s going to fill as much as 100%. Animation is a good method, nevertheless it presents different accessibility challenges and will both outing or have a cease management.
In some instances, we have been even impressed to discover new variations of present visualization sorts, just like the one depicted in Determine 3.8. This case examine highlights a step-by-step information to how we landed on this instance.
Getting Folks On Board With Accessibility
One key lesson is that it’s necessary to get colleagues on board with accessibility as quickly as potential. Your compliant designs could not look fairly as fairly as your non-compliant designs and could also be open to criticism.
So, how are you going to get your colleagues on board? For starters, evangelism is vital. Present examples like those included right here, which may help your colleagues construct empathy for individuals with imaginative and prescient disabilities. Discover moments to share the work along with your firm’s management workforce, spreading consciousness. Workforce conferences, design critiques, AMA periods, group boards, and all-hands are a great begin. Oftentimes, colleagues could not absolutely perceive how accessibility necessities apply to charting or how their visualizations are utilized by individuals with disabilities.
Whereas share-outs are an amazing begin, communication is a technique. We discovered that it’s simpler to construct momentum once you invite others to take part within the design course of. Invite them into brainstorming conferences, design evaluations, codesign periods, and the issue area to assist them respect how tough these challenges are. Enlist their assist, too.
By partaking with colleagues, we have been in a position to pinpoint our champions inside the group or these individuals who have been so passionate concerning the matter they have been keen to spend additional time constructing demos, prototypes, design specs, and analysis repositories. For instance, at Google, we have been in a position to publish our Prime Ideas for Information Accessibility on the Materials Design weblog.
Other than good citizenship and constructing a grassroots begin, there are methods to get the enterprise on board. Pointing to rules like Part 508 in America and the European Accessibility Act are different good methods to encourage your online business to dive deeper into your product’s accessibility. It’s additionally an efficient mechanism for getting funding and guaranteeing accessibility is in your product’s roadmap. When you’ve made the enterprise case and also you’ve recognized the accessibility champions in your workforce, it’s time to start out designing.
Conclusion
Accessibility is greater than compliance. Accessibility concerns can and can profit everybody, so it’s necessary to not shove them right into a particular menu or mode or overlook about them till the tip of the design course of. When you think about accessibility from the beginning, the WCAG requirements additionally out of the blue appear loads much less constraining than once you attempt to retrofit present charts for accessibility.
The examples right here have been constructed over the course of three years, and so they’re primarily based on beneficial classes discovered alongside the way in which. My hope is that you should utilize the examined designs on this article to get a head begin. And by taking an accessibility-first strategy, you’ll find yourself with total higher information visualizations — ones that absolutely take into consideration how all individuals collect, accumulate, and course of info.
Sources
To get began eager about information accessibility, try a few of these sources:
Getting began
Google’s Prime Ideas for Information Accessibility
Shade and distinction
A complete information for exploring and studying concerning the idea, science, and notion of shade and distinction.
Introduction to accessible distinction and shade for information visualization
A collection of Observable notebooks on utilizing distinction and patterns to differentiate marks in accessible information visualizations.
ACM
Shade blind accessibility manifesto
Distinction checking device
WCAG necessities
Pointers for textual content distinction distinction
Pointers for graphic shade distinction
Materials design greatest practices and specs
Accessibility with Materials 3
“Google’s Six Rules for Designing Any Chart,” Manuel Lima
Information Visualization in Materials Design
We’re extremely pleased with our colleagues who contributed to the analysis and examples featured on this article. This contains Andrew Carter, Ben Wong, Chris Calo, Gerard Rocha, Ian Hill, Jenifer Kozenski Devins, Jennifer Reilly, Kai Chang, Lisa Kaggen, Mags Sosa, Nicholas Cottrell, Rebecca Plotnick, Roshini Kumar, Sierra Seeborn, and Tyler Williamson. With out everybody’s contributions, we wouldn’t have been in a position to advance our information of accessible chart visible design.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!