{"id":301,"date":"2024-02-14T14:00:00","date_gmt":"2024-02-14T15:00:00","guid":{"rendered":"https:\/\/fdswebdesign.com\/?p=301"},"modified":"2024-10-15T23:27:11","modified_gmt":"2024-10-15T23:27:11","slug":"how-accessibility-standards-can-empower-better-chart-visual-design","status":"publish","type":"post","link":"https:\/\/fdswebdesign.com\/index.php\/2024\/02\/14\/how-accessibility-standards-can-empower-better-chart-visual-design\/","title":{"rendered":"How Accessibility Standards Can Empower Better Chart Visual Design"},"content":{"rendered":"<p>              <title>How Accessibility Standards Can Empower Better Chart Visual Design<\/title><\/p>\n<article>\n<header>\n<h1>How Accessibility Standards Can Empower Better Chart Visual Design<\/h1>\n<address>Kent Eisenhuth<\/address>\n<p>                  2024-02-14T15:00:00+00:00<br \/>\n                  2024-10-15T23:05:45+00:00<br \/>\n                <\/header>\n<p>Data visualizations are graphics that leverage our <a href=\"https:\/\/en.wikipedia.org\/wiki\/Visual_system\">visual system<\/a> and innate capabilities to gather, accumulate, and process information in our environment, as shown in the animation in Figure 1.0.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-berries-preattentive-processing.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"433\" alt=\"When we see berries on a bush, we can quickly group them based on color and size because of our preattentive processing capability.\" class=\"lazyload\" data-src=\"https:\/\/fdswebdesign.com\/wp-content\/uploads\/2024\/02\/1-0-berries-preattentive-processing-800px.gif\"><\/a><figcaption>Figure 1.0. An animation demonstrating our preattentive processing capability. Based on a lecture by Dr. Stephen Franconeri. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-berries-preattentive-processing.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>As a result, we\u2019re able to quickly spot trends, patterns, and outliers in all the images we see. Can you spot the visual patterns in Figure 1.1?<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-1-gestalt-patterns.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"396\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Size, borders, fills, and shape types all contribute to how we order data visually.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-1-gestalt-patterns.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.1. Pattern groups defined by size, borders, fills, and shape types. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-1-gestalt-patterns.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In this example, there are patterns defined by the size of the shapes, the use of fills and borders, and the use of different types of shapes. These characteristics, or visual encodings, are the building blocks of visualizations. Good visualizations provide a glanceable view of a large data set we otherwise wouldn\u2019t be able to comprehend.<\/p>\n<h2 id=\"accessibility-challenges-with-data-visualizations\">Accessibility Challenges With Data Visualizations<\/h2>\n<p>Visualizations typically serve a wide array of use cases and can be quite complex. A lot of care goes into choosing the right encodings to represent each metric. Designers and engineers will use colors to draw attention to more important metrics or information and highlight outliers. Oftentimes, as these design decisions are made, considerations for people with vision disabilities are missed.<\/p>\n<\/p>\n<p class=\"c-pre-sidenote--left\">Vision disabilities affect hundreds of millions of people worldwide. For example, about 300 million people have color-deficient vision, and it\u2019s a condition that affects 1 in 12 men.<sup>1<\/sup><\/p>\n<p class=\"c-sidenote c-sidenote--right\"><sup>1<\/sup> <a href=\"https:\/\/www.colourblindawareness.org\/\">Colour Blind Awareness (2023)<\/a><\/p>\n<p> \ufffc<\/p>\n<p>Most people with these conditions don\u2019t use assistive technology when viewing the data. Because of this, the visual design of the chart needs to meet them where they are.<\/p>\n<p>Figure 1.2 is an example of a donut chart. At first glance, it might seem like the categorical color palette matches the theme of digital wellbeing. It\u2019s calm, it\u2019s cool, and it may even invoke a feeling of wellbeing.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-2-donut-v1.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Using a low contrast color palette can result in data that\u2019s hard for someone with protanopia to read.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-2-donut-v1.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.2. DON\u2019T: use low-contrast colors on your chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-2-donut-v1.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Figure 1.3 highlights how this same chart will appear to someone with a protanopia condition. You\u2019ll notice that it is slightly less readable because the Other and YouTube categories appearing at the top of the donut are indistinguishable from one another.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-3-donut-protonopia.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Someone with protanopia won\u2019t be able to distinguish between different data if the chart\u2019s color palette is inaccessible\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-3-donut-protonopia.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.3. How someone with protanopia might see an inaccessible color palette. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-3-donut-protonopia.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For someone with achromatopsia, the chart will appear as it does in Figure 1.4<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-4-donut-grayscale.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Someone with achromatopsia won\u2019t be able to distinguish between different chart data if the color palette isn&#039;t accessible\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-4-donut-grayscale.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.4. How someone with achromatopsia might see an inaccessible color palette. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-4-donut-grayscale.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In this case, I\u2019d argue that the chart isn\u2019t really telling us anything. It\u2019s nearly impossible to read, and swapping it out for a data table would be arguably more useful. At this point, you might be wondering how to fix this. Where should you start?<\/p>\n<h2 id=\"start-with-web-standards\">Start With Web Standards<\/h2>\n<p>Web standards can help us improve our design. In this case, Web Content Accessibility Guidelines (WCAG) will provide the most comprehensive set of requirements to start with. Guidelines call for two considerations. First, all colors must achieve the <strong>proper contrast ratio<\/strong> with their neighboring elements. Second, visualizations need to use something other than color to convey meaning. This can be accomplished by including a <strong>second encoding or adding text, images, icons, or patterns<\/strong>. While this article focuses on achieving WCAG 2.1 standards, the same concepts can be used to achieve WCAG 2.2 standards.<\/p>\n<div data-audience=\"non-subscriber\" data-remove=\"true\" class=\"feature-panel-container\">\n<aside class=\"feature-panel\">\n<div class=\"feature-panel-left-col\">\n<div class=\"feature-panel-description\">\n<p>Meet <strong><a data-instant href=\"https:\/\/www.smashingconf.com\/online-workshops\/\">Smashing Workshops<\/a><\/strong> on <strong>front-end, design &amp; UX<\/strong>, with practical takeaways, live sessions, <strong>video recordings<\/strong> and a friendly Q&amp;A. With Brad Frost, St\u00e9ph Walter and <a href=\"https:\/\/smashingconf.com\/online-workshops\/workshops\">so many others<\/a>.<\/p>\n<p><a data-instant href=\"smashing-workshops\" class=\"btn btn--green btn--large\">Jump to the workshops&nbsp;\u21ac<\/a><\/div>\n<\/div>\n<div class=\"feature-panel-right-col\"><a data-instant href=\"smashing-workshops\" class=\"feature-panel-image-link\"><\/p>\n<div class=\"feature-panel-image\">\n<img decoding=\"async\" loading=\"lazy\" class=\"feature-panel-image-img lazyload\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Feature Panel\" width=\"257\" height=\"355\" data-src=\"\/images\/smashing-cat\/cat-scubadiving-panel.svg\"><\/p>\n<\/div>\n<p><\/a>\n<\/div>\n<\/aside>\n<\/div>\n<h2 id=\"web-standards-challenges\">Web Standards Challenges<\/h2>\n<p>Meeting the web standards is trickier than it might first seem. Let\u2019s dive into a few examples showing how difficult it is to ensure data will be understood at a glance while meeting the standards.<\/p>\n<h3 id=\"challenge-1-color-contrast\">Challenge 1: Color Contrast<\/h3>\n<p>According to the <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#non-text-contrast\">WCAG 2.1 (level AA) standards<\/a>, graphics such as chart elements (lines, bars, areas, nodes, edges, links, and so on) should all achieve a minimum <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#non-text-contrast\">3:1 contrast ratio<\/a> with their neighboring elements. Neighboring elements may include other chart elements, interaction states, and the chart\u2019s background. Incidentally, if you\u2019re not sure your colors are achieving the correct minimum ratio, <a href=\"http:\/\/contrast-ratio.com\">you can check your palette here<\/a>. Additionally, all text elements should achieve a minimum <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#contrast-minimum\">4.5:1<\/a> contrast ratio with their background. Figure 1.5 depicts a sample categorical color palette that follows the recommended standards.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-5-wcag-swatches.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"202\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"WCAG recommended contrast ratios include shades of blue, orange, purple, green, and grey\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-5-wcag-swatches.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.5. Sample color palette that meets WCAG recommended contrast ratios. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-5-wcag-swatches.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>This is quite a bold palette. When applying a compliant palette to a chart, it might look like the example in Figure 1.6.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-6-stacked-bar-series-high-contrast.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"388\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Too many high-contrast colors, such as red and blue in this Logs events chart, can make data harder to read\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-6-stacked-bar-series-high-contrast.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.6. A chart with WCAG-recommended contrast ratios. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-6-stacked-bar-series-high-contrast.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>While this example meets the color contrast requirements, there\u2019s a tradeoff. The chart\u2019s focal point is now lost. The red segments at the bottom of each stacked bar represent the most important metrics illustrated in this chart. They represent errors or a count of items that need your attention. Since the chart features bold colors, all of which are equally competing for our attention, it\u2019s now more difficult to see the items that matter most.<\/p>\n<h3 id=\"challenge-2-dual-encodings-or-conveying-meaning-without-color\">Challenge 2: Dual Encodings, Or Conveying Meaning Without Color<\/h3>\n<p>To minimize reliance on color to convey meaning, <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#use-of-color\">WCAG 2.1 (level A) standards<\/a> also call for the use of something other than color to convey meaning. This may be a pattern, texture, icon, text overlay, or an entirely different visual encoding.<\/p>\n<p>It\u2019s easy to throw a pattern on top of a categorical fill color and call it a day, as illustrated in Figure 1.7. But is the chart still readable? Is it glanceable? In this case, the segments appear to run into one another. In his book, <em>The Visual Display of Quantitative Information<\/em>, Edward Tufte describes the importance of minimizing <a href=\"https:\/\/en.wikipedia.org\/wiki\/Chartjunk\">chartjunk<\/a> or unnecessary visual design elements that limit one\u2019s ability to read the chart. This begs the question, do the WCAG standards encourage us to add unnecessary <a href=\"https:\/\/en.wikipedia.org\/wiki\/Chartjunk\">chartjunk<\/a> to the visualization?<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-7-donut-textures.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Digital wellbeing example showing how textures and too many other visual design elements make it harder to read charts\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-7-donut-textures.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.7. The added textures and chartjunk minimize the readability of this pie chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-7-donut-textures.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Following the standards verbatim can lead us down the path of creating a really noisy visualization.<\/p>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"let-the-standards-empower-vs-constrain-design\">Let The Standards Empower vs Constrain Design<\/h2>\n<p>Over the past several years, my working group at Google has learned that it\u2019s easier to meet the WCAG visual design requirements when they\u2019re considered at the beginning of the design process instead of trying to update existing charts to meet the standard. The latter approach leads to charts with unnecessary chart junk, just like the one previously depicted in Figure 1.7, and minimized usability. Considering accessibility first will enable you to create a visualization that\u2019s not only accessible but useful. We\u2019re calling this our accessibility-first approach to chart design. Now, let\u2019s see some examples.<\/p>\n<h3 id=\"solving-for-color-contrast\">Solving For Color Contrast<\/h3>\n<p>Let\u2019s revisit the color contrast requirement via the example in Figure 1.8. In this case, the most important metric is represented by the red segments appearing at the bottom of each bar in the series. The red color represents a count of items in a failing state. Since both colors in this palette compete for our attention, it\u2019s difficult to focus on the metric that matters most. The chart is no longer glanceable.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-8-stacked-bar-series-high-contrast.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"388\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Too many high-contrast colors, such as red and blue in this Logs events chart, can make data harder to read\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-8-stacked-bar-series-high-contrast.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 1.8. CAUTION: High contrasting color palettes can reduce glanceability and focus. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-8-stacked-bar-series-high-contrast.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"focus-on-essential-elements-only\">Focus On Essential Elements Only<\/h4>\n<p>By stretching the standards a bit, we can balance a11y and glanceability a lot better. Only the visual elements essential for interpreting the visualization need to achieve the color contrast requirement. In the case of Figure 1.8, we can use borders that achieve the required contrast ratio while using lighter fills to the point of focus. In Figure 1.9, you\u2019ll notice your attention now shifts down to the metrics that matter most.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-9-animated-bar-demonstration.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"406\" alt=\"Accessible borders with lighter fill in this logs events chart make the data a lot easier to distinguish from each other\" class=\"lazyload\" data-src=\"https:\/\/fdswebdesign.com\/wp-content\/uploads\/2024\/02\/1-9-animated-bar-demonstration-800px.gif\"><\/a><figcaption>Figure 1.9. \u2705 DO: Consider using a combination of outlines and fills to meet contrast requirements while maintaining a focal point. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/1-9-animated-bar-demonstration.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<h4 id=\"dark-themes-for-the-win\">Dark Themes For The Win<\/h4>\n<p>Most designers I know love a good dark theme like the one used in Figure 2.0. It looks nice, and dark themes often result in visually stunning charts.<\/p>\n<p>More importantly, a dark theme offers an accessibility advantage. When building on top of a dark background, we can use a wider array of color shades that will still achieve the minimum required contrast ratio.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-0-dark-theme-sample.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"512\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"This chart denoting the number of people hospitalized and in the ICU easily meets contrast requirements because it uses a dark theme.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-0-dark-theme-sample.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.0. \u2705 DO: Consider a dark theme which will enable you to use a wider range of shades that meet contrast requirements. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-0-dark-theme-sample.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>According to an audit conducted by Google\u2019s Data Accessibility Working Group, the 61 shades of the Google Material palette from 2018 achieved the minimum 3:1 contrast ratio when placed on a dark background. This is depicted in Figure 2.1. Only 40 shades of Google Material colors achieved the same contrast ratio when placed on a white background. The 50% increase in available shades when moving from a light background to a dark background makes a huge difference. Having access to more shades enables us to draw focus to items that matter most.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-1-light-dark-theme-study.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"366\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Accessible contrast ratios are available both in light and dark themes using the Google Material color palette. More accessible contrast ratios are available when using a dark theme.\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-1-light-dark-theme-study.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.1. A comparison of accessible contrast ratios across a light theme and a dark theme using the Google Material color palette. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-1-light-dark-theme-study.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>With this in mind, let\u2019s revisit the earlier donut chart example in Figure 2.2. For now, let\u2019s keep the white background, as it\u2019s a core part of Google\u2019s brand.<\/p>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/minimum-contrast-ratios.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"558\" alt=\"Using a combination of fills and borders in the digital wellbeing chart helps achieve the minimum contrast ratios in a more readable way\" class=\"lazyload\" data-src=\"https:\/\/fdswebdesign.com\/wp-content\/uploads\/2024\/02\/minimum-contrast-ratios-800px.gif\"><\/a><figcaption>Figure 2.2. \u2705 DO: Use a combination of fills and borders that achieve the minimum contrast ratios to improve the readability of your chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/minimum-contrast-ratios.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>While this is a great first step, there\u2019s still more work to do. Let\u2019s take a closer look.<\/p>\n<h3 id=\"solving-for-dual-encodings-and-minimizing-chartjunk\">Solving For Dual Encodings And Minimizing Chartjunk<\/h3>\n<p>As shown in Figure 2.3, color is our only way of connecting segments in the donut to the corresponding categories in the legend. Despite our best efforts to follow color contrast standards, the chart can still be difficult to read for people with certain vision disabilities. We need a dual encoding, or something other than color, to convey meaning.<\/p>\n<p>How might we do this without adding noise or reducing the chart\u2019s readability or glanceability? Let\u2019s start with the text.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-3-color-as-only-encoding.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A version of the digital wellbeing chart that is not accessible because it relies on color to identify time spent online\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-3-color-as-only-encoding.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.3. DONT: let color be your only encoding for identifying categories and metrics. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-3-color-as-only-encoding.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"integrating-text-and-icons\">Integrating Text And Icons<\/h4>\n<p>Adding text to a visualization is a great way to solve the dual encoding problem. Let\u2019s use our donut chart as an example. If we move the legend labels into the graph, as illustrated in Figure 2.4, we can visually connect them to their corresponding segments. As a result, there is no longer a need for a legend, and the labels become the second encoding.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-4-text-as-encoding.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"557\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A version of the digital wellbeing chart that improves accessibility by using labels to denote time spent on specific online platforms\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-4-text-as-encoding.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.4. \u2705 DO: consider using labels as a second encoding. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-4-text-as-encoding.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Let\u2019s look at a few other ways to provide a dual encoding while maximizing readability. This will prevent us from running in the direction of applying unnecessary chart junk like the example previously highlighted in Figure 1.7.<\/p>\n<p>Depending on the situation, shape of the data, or the available screen real estate, we may not have the luxury of overlaying text on top of a visualization. In cases like in Figure 2.5, it\u2019s still okay to use iconography. For example, if we\u2019re dealing with a very limited number of categories, the added iconography can still act as a dual encoding.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-5-stacked-area-with-icons.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"551\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Compute Engine CPU usage chart that uses shapes to represent categories like countries\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-5-stacked-area-with-icons.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.5. \u2705 DO: Use shapes to represent categories in a stacked area chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-5-stacked-area-with-icons.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Some charts can have upwards of hundreds of categories, which makes it difficult to add iconography or text. In these cases, we must revisit the purpose of the chart and decide if we need to differentiate categories. Perhaps color, along with a dual encoding, can be used to highlight other aspects of the data. The example in Figure 2.6 shows a line chart with hundreds of categories.<\/p>\n<p>We did a few things with color to convey meaning here:<\/p>\n<ol>\n<li>Bright colors are used to depict outliers within the data set.<\/li>\n<li>A neutral gray color is applied to all nominal categories.<\/li>\n<\/ol>\n<p>In this scenario, we can once again use a very limited set of shapes for differentiating specific categories.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-6-neutral-color-usage.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"788\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Bright colors help make outlier data in this Compute Engine CPU usage chart stand out\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-6-neutral-color-usage.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.6. \u2705 DO: Rely on bright colors to represent outliers instead of individual categories in a line chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-6-neutral-color-usage.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"the-benefits-of-small-multiples-and-sparklines\">The Benefits Of Small Multiples And Sparklines<\/h4>\n<p>There are still times when it\u2019s important to differentiate between all categories depicted in a visualization. For example, the tangled mess of a chart is depicted in Figure 2.7.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-7-too-many-categories.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"615\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Compute Engine CPU usage chart that is hard to read because it uses too many colors and shapes\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-7-too-many-categories.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.7. DON\u2019T: Overuse of colors and shapes in a categorical line chart. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-7-too-many-categories.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In this case, a more accessible solution would include breaking the charts into their own mini charts or sparklines, as depicted in Figure 2.8. This solution is arguably better for everyone because it makes it easier to see the individual trend for each category. It\u2019s more accessible because we\u2019ve completely removed the reliance on color and appended text to each of the mincharts, which is better for the screen reader experience.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-8-sparklines.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"720\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Sparklines help make it easier to see what Compute Engine CPA usage data is different\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-8-sparklines.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.8. \u2705 DO: consider using sparklines as a more readable alternative. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-8-sparklines.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"reserve-fills-for-items-that-need-your-attention\">Reserve Fills For Items That Need Your Attention<\/h4>\n<p>Earlier, we examined using a combination of fills and outlines to achieve color contrast requirements. Red and green are commonly used to convey status. For someone who is red\/green colorblind, this can be very problematic. As an alternative, the status icons in Figure 2.9 reserve fills for the items that need your attention. We co-designed this solution with some help from customers who are colorblind. It\u2019s arguably more scannable for people who are fully sighted, too.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-9-table.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"423\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Icon fills can bring attention to errors on the page as long as they aren&#039;t overused\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-9-table.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 2.9. \u2705 DO: use icon fills sparingly to highlight items that need your attention. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/2-9-table.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"embracing-relevant-metaphors\">Embracing Relevant Metaphors<\/h4>\n<p>In 2022, we launched a redesigned Fitbit mobile app for the masses. One of my favorite visualizations from this launch is a chart showing your heart rate throughout the day. As depicted in Figure 3.0, this chart shows when your heart rate crosses into different zones. Dotted lines were used to depict each of these zone thresholds. We used the spacing between the dots as our dual encoding, which invokes a feeling of a \u201cvisual\u201d heartbeat. Threshold lines with closely spaced dots imply a higher heart rate.<\/p>\n<p>Continuing the theme of using fun, relevant metaphors, we even based our threshold spacing on the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Fibonacci_sequence\">Fibonacci Sequence<\/a>. This enabled us to represent each threshold with a noticeably different visual treatment. For this example, we knew we were on the right track as these accessibility considerations tested well with people who have color-deficient vision.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-0-heart-rhythm-chart.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"617\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Dotted lines playfully highlight that the focus of this chart is on heart rate measurements \" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-0-heart-rhythm-chart.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.0. \u2705 DO: Use relatable metaphors. In this case, dotted lines can represent a visual heart rhythm. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-0-heart-rhythm-chart.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"accessible-interaction-states\">Accessible Interaction States<\/h4>\n<p>Color contrast and encodings also need to be considered when showing interactions like mouse hover, selection, and keyboard focus, like the examples in Figure 3.1. The same rules apply here. In this example, the hover, focus, and clicked state of each bar is delineated by elements that appear above and below the bar. As a result, these elements only need to achieve a 3:1 contrast ratio with the white background and not the bars themselves. Not only did this pattern test well in multiple usability studies, but it was also designed so that the states could overlap. For example, the hover state and selected state can appear simultaneously and still meet accessibility requirements.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-1-interaction-states.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Interaction patterns like hover and focus states can be shown above and below UI elements to make it easier to meet color contrast standards\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-1-interaction-states.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.1. \u2705 DO: Consider how the requirements apply to interaction states. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-1-interaction-states.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<h4 id=\"finding-your-inspiration\">Finding Your Inspiration<\/h4>\n<p>For some more challenging projects, we\u2019ve taken inspiration from unexpected areas.<\/p>\n<p>For example, we looked to nature (Figure 3.2) to help us consider methods for visualizing the effects of cloud moisture on an LTE network, as sketched in Figure 3.3.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/starlings-sky.jpg\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"543\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Starlings in the sky call to mind the effects of cloud moisture on an LTE network\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/starlings-sky.jpg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.2. Taking inspiration from nature and the flight patterns of starlings. (Photo credit: Tanya Hart) (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/starlings-sky.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-3-weather-vis-sketch.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"468\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"This representation of rain patterns was inspired by starlings swirling in the sky\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-3-weather-vis-sketch.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.3. Applying inspiration from nature to a visualization of precipitation in a geographic region. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-3-weather-vis-sketch.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We\u2019ve taken inspiration from halftone printing processes (Figure 3.4) to think about how we might reimagine a heatmap with a dual encoding, as depicted in Figure 3.5.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-4-halftone-sample-new.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"666\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Halftone printing processes use patterns of dots to create images\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-4-halftone-sample-new.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.4. Taking inspiration from halftone printing processes. (Image source: <a href=\"https:\/\/commons.wikimedia.org\/wiki\/File:Halftone_screen.jpg\">Magica<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-4-halftone-sample-new.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-5-dual-encoding-heatmap-new.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"457\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Halftone printing processes can be used to inspire encodings in a heatmap\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-5-dual-encoding-heatmap-new.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.5. Applying inspiration from half-tone printing processes. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-5-dual-encoding-heatmap-new.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>We\u2019ve also <a href=\"https:\/\/www.smashingmagazine.com\/2014\/12\/frank-lloyd-wright-approach-digital-design\/\">taken inspiration from architecture<\/a> and how people move through buildings (Figure 3.6) to consider methods for showing the scope and flow of data into a donut chart as depicted in Figure 3.7.<\/p>\n<figure class=\"\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-6-architectural-inspiration-sample.jpeg\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"600\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"An intricate, radial atrium and skylight that inspired data visualizations\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-6-architectural-inspiration-sample.jpeg\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.6. Taking inspiration from architecture and a building\u2019s flow. (Image credit: <a href=\"https:\/\/en.wikipedia.org\/wiki\/File:Solomon-R-Guggenheim-Museum-Skylight.jpg\">Evan-Amos<\/a>) (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-6-architectural-inspiration-sample.jpeg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-7-animated-donut.gif\"><img loading=\"lazy\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" width=\"800\" height=\"715\" alt=\"The animated ring of this loading indicator looks a lot like the skylight shown earlier\" class=\"lazyload\" data-src=\"https:\/\/fdswebdesign.com\/wp-content\/uploads\/2024\/02\/3-7-animated-donut-800px.gif\"><\/a><figcaption>Figure 3.7. Applying inspiration from architecture and a building\u2019s flow. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-7-animated-donut.gif\">Large preview<\/a>)<\/figcaption><\/figure>\n<p>In this case, the animated inner ring highlights the scope of the donut chart when it\u2019s empty and indicates that it will fill up to 100%. Animation is a great technique, but it presents other accessibility challenges and should either time out or have a stop control.<\/p>\n<p>In some cases, we were even inspired to explore new versions of existing visualization types, like the one depicted in Figure 3.8. <a href=\"https:\/\/www.smashingmagazine.com\/2022\/07\/accessibility-first-approach-chart-visual-design\/\">This case study<\/a> highlights a step-by-step guide to how we landed on this example.<\/p>\n<figure class=\"\n  \n    break-out article__image\n  \n  \n  \"><\/p>\n<p>    <a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-8-heatlane.png\"><\/p>\n<p>    <img decoding=\"async\" loading=\"lazy\" width=\"800\" height=\"298\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"A scorecard showing how heat lanes, which are part heat maps and part histograms, can meet WCAG standards\" class=\"lazyload\" data-src=\"https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_80\/w_400\/https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-8-heatlane.png\"><\/p>\n<p>    <\/a><figcaption class=\"op-vertical-bottom\">\n      Figure 3.8. A heatlane visualization that meets WCAG standards. (<a href=\"https:\/\/files.smashing.media\/articles\/accessibility-standards-empower-better-chart-visual-design\/3-8-heatlane.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<div class=\"partners__lead-place\"><\/div>\n<h2 id=\"getting-people-on-board-with-accessibility\">Getting People On Board With Accessibility<\/h2>\n<p>One key lesson is that it\u2019s important to get colleagues on board with accessibility as soon as possible. Your compliant designs may not look quite as pretty as your non-compliant designs and may be open to criticism.<\/p>\n<p>So, how can you get your colleagues on board? For starters, evangelism is key. Provide examples like the ones included here, which can help your colleagues build empathy for people with vision disabilities. Find moments to share the work with your company\u2019s leadership team, spreading awareness. Team meetings, design critiques, AMA sessions, organization forums, and all-hands are a good start. Oftentimes, colleagues may not fully understand how accessibility requirements apply to charting or how their visualizations are used by people with disabilities.<\/p>\n<p>While share-outs are a great start, communication is one way.  We found that it\u2019s easier to build momentum when you invite others to participate in the design process. Invite them into brainstorming meetings, design reviews, codesign sessions, and the problem space to help them appreciate how difficult these challenges are. Enlist their help, too.<\/p>\n<p>By engaging with colleagues, we were able to pinpoint our champions within the group or those people who were so passionate about the topic they were willing to spend extra time building demos, prototypes, design specs, and research repositories. For example, at Google, we were able to publish our <a href=\"https:\/\/material.io\/blog\/blog\/blog\/data-visualization-accessibility\">Top Tips for Data Accessibility<\/a> on the Material Design blog.<\/p>\n<p>Aside from good citizenship and building a grassroots start, there are ways to get the business on board. Pointing to regulations like <a href=\"https:\/\/www.section508.gov\/\">Section 508<\/a> in America and the <a href=\"https:\/\/ec.europa.eu\/social\/main.jsp?catId=1202#:~:text=The%20European%20accessibility%20act%20is,EU%20leading%20to%20costs%20reduction\">European Accessibility Act<\/a> are other good ways to encourage your business to dive deeper into your product\u2019s accessibility. It\u2019s also an effective mechanism for getting funding and ensuring accessibility is on your product\u2019s roadmap. Once you\u2019ve made the business case and you\u2019ve identified the accessibility champions on your team, it\u2019s time to start designing.<\/p>\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Accessibility is more than compliance. Accessibility considerations can and will benefit everyone, so it\u2019s important not to shove them into a special menu or mode or forget about them until the end of the design process. When you consider accessibility from the start, the WCAG standards also suddenly seem a lot less constraining than when you try to retrofit existing charts for accessibility.<\/p>\n<p>The examples here were built over the course of 3 years, and they\u2019re based on valuable lessons learned along the way. My hope is that you can use the tested designs in this article to get a head start. And by taking an accessibility-first approach, you\u2019ll end up with overall better data visualizations &mdash; ones that fully take into account how <em>all<\/em> people gather, accumulate, and process information.<\/p>\n<h3 id=\"resources\">Resources<\/h3>\n<p>To get started thinking about data accessibility, check out some of these resources:<\/p>\n<p><strong>Getting started<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/material.io\/blog\/data-visualization-accessibility\">Google\u2019s Top Tips for Data Accessibility<\/a><\/li>\n<li><a href=\"https:\/\/colorandcontrast.com\/\">Color and contrast<\/a><br \/>\nA comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.<\/li>\n<li><a href=\"https:\/\/observablehq.com\/@frankelavsky\/chartability-contrast-series\">Introduction to accessible contrast and color for data visualization<\/a><br \/>\nA series of Observable notebooks on using contrast and patterns to distinguish marks in accessible data visualizations.<\/li>\n<\/ul>\n<p><strong>ACM<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/cacm.acm.org\/magazines\/2022\/8\/262908-color-blind-accessibility-manifesto\/fulltext\">Color blind accessibility manifesto<\/a><\/li>\n<\/ul>\n<p><strong>Contrast checking tool<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/contrast-ratio.com\/\">Contrast-Ratio.com<\/a><\/li>\n<\/ul>\n<p><strong>WCAG requirements<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#contrast-minimum\">Guidelines for text contrast contrast<\/a><\/li>\n<li><a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/#non-text-contrast\">Guidelines for graphic color contrast<\/a><\/li>\n<\/ul>\n<p><strong>Material design best practices and specs<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/m3.material.io\/foundations\/accessible-design\/overview\">Accessibility with Material 3<\/a><\/li>\n<li>\u201c<a href=\"https:\/\/medium.com\/google-design\/redefining-data-visualization-at-google-9bdcf2e447c6\">Google\u2019s Six Principles for Designing Any Chart<\/a>,\u201d Manuel Lima<\/li>\n<li><a href=\"https:\/\/material.io\/design\/communication\/data-visualization.html\">Data Visualization in Material Design<\/a><\/li>\n<\/ul>\n<p><em>We\u2019re incredibly proud of our colleagues who contributed to the research and examples featured in this article. This includes 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. Without everyone\u2019s contributions, we wouldn\u2019t have been able to advance our knowledge of accessible chart visual design.<\/em><\/p>\n<div class=\"signature\">\n  <img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" alt=\"Smashing Editorial\" width=\"35\" height=\"46\" loading=\"lazy\" class=\"lazyload\" data-src=\"https:\/\/www.smashingmagazine.com\/images\/logo\/logo--red.png\"><br \/>\n  <span>(yk)<\/span>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>How Accessibility Standards Can Empower Better Chart Visual Design How Accessibility Standards Can Empower Better Chart Visual Design Kent Eisenhuth 2024-02-14T15:00:00+00:00 2024-10-15T23:05:45+00:00 Data visualizations are graphics that leverage our visual system and innate capabilities to gather, accumulate, and process information in our environment, as shown in the animation in Figure 1.0. Figure 1.0. An animation&#8230;<\/p>\n","protected":false},"author":1,"featured_media":303,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[],"class_list":["post-301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-accessibility"],"_links":{"self":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/comments?post=301"}],"version-history":[{"count":3,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":308,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/posts\/301\/revisions\/308"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media\/303"}],"wp:attachment":[{"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/media?parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/categories?post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdswebdesign.com\/index.php\/wp-json\/wp\/v2\/tags?post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}