Case Study

Creating accessible figures and graphs for multi-format publishing

The purpose of this project was to create guidelines for Academic Authors and Editors to consider as they conceive figures/graphs for their content. The intent is to assist in making their content more readable by those with visual impairments and dyslexia. In some cases this will become a legal requirement—The European Accessibility Act (EAA) will take effect on June 28, 2025 and applies to any organization that conducts business in the EU, not just those based in the EU.

Introduction

It is widely accepted that accessibility should be considered when using color in digital content. The intention behind the content should be understood clearly by all readers—whether they are visually impaired or viewing content on a black-and-white e-reader.

While design styling and color palettes are important to accessibility, in most cases they cannot be applied alone as a simple ‘fix’—the accessibility of the combination of elements, the way they are layered, and the use of labels and symbols must be taken into consideration to “tell the whole story” of the figure. I

In a large scale multi-format publishing environment, having figures and graphs submitted with accessibility already considered will ensure that both readers are more likely to understand the authors intention, and also that time and money is saved if redrawing is required.

Research and Analysis

A wide-ranging Academic publisher typically has content of varied complexity—medical titles have detailed anatomical drawings or quantitative results from studies; HE textbooks may have infographics or biology diagrams; history monographs have maps, etc. In each case there is a hierarchy of information, and ensuring that the reader can visually separate the elements of the figure is essential to their comprehension.

Web Content Accessibility Guidelines (WCAG) 2.1 have provided success criteria for making digital content more accessible. Ensuring that your digital content is perceivable is one of the basic tenets of digital accessibility per WCAG. Alternative text (or “alt text”) is text that is added “behind” images and other non-text web content so that it can be perceived and understood by people who may not be able to see or otherwise grasp the meaning of it. While alt-text is vital, and is a major component of Figure Accessibility, this case study is focused on the content being distinguishable: the combination of color, color contrast, font choice, and text size following guidelines so that the reader does not need to rely solely on alt-text to understand the details of the figure.

Concept Development and Design

Knowing that there would be opportunities to adjust/adapt these guidelines as more information becomes available, less complex examples were used assuming real change could be implemented right away.

The first iteration of the guidelines focused on the following principles:

  1. General guidelines on the use of color

  2. Color Contrast and Contrast Ratios

  3. General guidelines on Text accessibility and Accessible fonts

The intention was to apply these principles to:

  • Line Graphs

  • Grouped Bar Graphs

  • Scatter Plots

  • Pie Charts

  • Diagrams

Since this project was focused on the visual accessibility of the figures/graphs, it was important to identify types of readers that the guidelines could improve for—in this case Color Blindness and Dyslexia. We investigated the way different color palettes and contrasts might be perceived by readers with different types of color blindness, and we looked at fonts, font variations, and how overall typographic choices influence accessibility for dyslexic readers.

1. General guidelines on use of color

It was important to highlight that there are different types of color blindness: Red-green color vision deficiency (Deuteranomaly, Protanomaly, Protanopia, Deuteranopia); Blue-yellow color vision deficiency (Tritanomaly, Tritanopia), and Complete color vision deficiency (Achromatopsia). Because color can be viewed in many different ways, meaning should not be communicated only through color or used as. cue (ex. If a manuscript refers to the ‘red line’ or ‘red area’ in a figure, a reader with protanopia would not be able to perceive which line/area is being referred to).

Above: Example of a typical color palette

Right: Examples demonstrating how the typical palette may be perceived by readers with various forms of color blindness. Source: Coblis—Color Blindness Simulator

2. Color Contrast

The guidelines demonstrate the difference between high contrast and low contrast colors. Levels of contrast vary, and to achieve high contrast, it is important to exaggerate the lightness differences between foreground, background, and adjacent colors. The image below depicts effective and ineffective color contrast. (Source: Lighthouse International)

In WCAG, contrast is a measure of the difference in perceived “luminance” or brightness between two colors. This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white on white) to 21:1 (e.g., black on a white). There are different requirements for non-text and text contrast which is described in WCAG 2.1 SC 1.4.3. As of 2024, the EAA has indicated their requirements mirror that of WCAG 2.1 Level AA (see p. 50).

Non-text contrast: The visual presentation of Graphical (non-text) Objects need to have a contrast ratio of at least 3:1 against adjacent color(s). If a graphic is needed to understand the content then it should be perceivable by people with low vision or other impairments without the need for contrast-enhancing assistive technology.

Text-contrast: The presentation of text needs to have a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Large text is defined as 14 point and bold or larger, or 18 point regular or larger. To give a frame of reference, on a white background:

Pure red (#FF0000) has a ratio of 4:1:
SAMPLE TEXT at 14 pt

Pure green (#00FF00) has a very low ratio of 1.4:1
SAMPLE TEXT at 14 pT

Pure blue (#000FF0) has a contrast ratio of 8.6:1
SAMPLE TEXT at 14 pt

Understanding the WCAG Contrast Ratio using a simple pie chart.

To introduce how the principles and design elements fit together, the 2 examples below show a pie chart with accessibility issues compared to an accessible version.

In Example 1, only the blue on white passes the WCAG requirements for color contrast. The other colors do not pass both with text or non-text objects. See below for one way this could be fixed.

In Example 2, variations in layout are added (a dark rule around light non-text background colors) as well as alternating black and white text as needed.  It is okay to treat labels in different ways to ensure they meet contrast requirements. To create a uniform look, the gray border is applied to all slices, even though it isn’t required on Slices C and D.

3. Text Accessibility in Figures and graphs

Font type and presentation has a significant impact on readability of people with dyslexia or low-vision. Studies have shown that sans serif, roman and monospaced font types increased the reading performance of dyslexic readers. A combination of principles regarding typography, readability, legibility, and color will have a significant effect on text accessibility. To improve text accessibility the following should be considered:

  • Use a font size within figures set to 12-14pt or equivalent

  • Limit the use of font variations such as italic, bold, ALL CAPS or other styles that may make the content difficult to read

  • Do not use underlines for items that are not links

  • The use of color should adhere to general color accessibility principles. Ideally, place text on single color backgrounds. Avoid background patterns or pictures and distracting surrounds.

  • Use alt-text: Screen readers cannot read embedded text on images and embedded text can also become pixelated when magnified by users with low vision.

Understanding Text Accessibility using a simple pie chart.

To introduce how the principles and design elements fit together, a pie chart with accessibility issues is compared to an accessible version.

In the example below, there are several accessibility issues including: the use of a serif font that is very small and uses an italic font variation. The text it also placed on top of colors where WCAG contrast guidelines are not met.

In the example below, these issues are improved by: using a san-serif font, (in this case FS Me Regular, a typeface designed by Mencap specifically to improve legibility for people with learning disabilities), setting the type in a larger size, not using any additional styling outside of the font type/size, and placing the type on a background that meets WCAG color contrast guidelines, and/or is placed in a white box.

Having described how to improve accessibility across different elements that make up figures/graphs, the guidelines are now applied to line graphs, scatter plots, grouped bar graphs, pie charts, and diagrams. For the purposes of this case study, we will look line graphs and diagrams.


Line Graphs

What do we need to consider for line graphs?

A simple line graph is shown below. The images to the right demonstrate how this graph may be perceived by readers with various forms of color blindness.

In most cases the reader may be able to match the color in the legend to the color of the plot line, even if not perceiving the color as intended. But, there are instances where the color isn’t easily discernible, e.g. deuteranopia. Therefore, in order to be accessible, the plot lines on a line graph need to either:

  • Option 1: have a label next to the plot line (with or without leader line, as necessary)

  • Option 2: use different stroke styles (e.g. solid, dashed, dotted)

  • Option 3: use different symbols for data points

Option 1: Labels next to the plot lines

The example below places a label next to each plot line, which ensures the color isn’t necessary to identify which line is which—the color is supplementary. A legend isn’t required.

Where graphs are more complex and placing a label nearby is difficult, a leader line could be used for clarity, as the example below shows.

The following examples show how these techniques can be applied so that the line graph can be understood by a reader with any form of color blindness.

Option 1: Different stroke styles for plot lines

The Example below uses different strokes/line styles, which ensures the plot line can be matched to the legend without relying on color. Color is a supplementary aid.

The following examples show how these techniques can be applied so that the line graph can be understood by a reader with any form of color blindness.

Where a graph is complex, containing multiple plot lines overlaid, it may become more confusing to use stroke styles for each plot line, and data points and adjacent labels not practical. Therefore you may need to consider other ways to show multiple plots so that they are not overlaid, if detail is required.

In the example below, the graph relies solely on the use of color in a legend, and there is not sufficient color contrast of plot lines to background—a reader with Deuteranomoly or Deuteranopia would have difficulty understanding the data.

Two options for improving the line graph include:

  • using different stroke styles—although may be confusing at small sizes

  • reducing the number of plots on one graph, and split into a group of graphs if detail is required

Option 3: Different symbols for data points on plot lines

The Example below shows plot lines that each have a different symbol to identify data points, which also aids recognition of which line is which without relying on color. Color is a supplementary aid. Note that where graphs are very complex, adding data points may make the graph overcrowded.

The following examples show how these techniques can be applied so that the line graph can be understood by a reader with any form of color blindness.

Diagrams

What do we need to consider for diagrams and figurative diagrams?

Typically an author will either supply print ready artwork for a book or rough drafts used as a guide for an illustrator to redraw. In both cases, it is important that accessibility guidelines are followed.

  • Meaning should not be communicated only through color—if items need to be grouped, consider other ways of achieving this, such as layout or using headings

  • Text labels and leader lines refer to areas of the diagram as necessary, and labelling should clear so that it contrasts sufficiently with any background. Avoid placing labels across parts/edges of the diagram

The following examples show diagrams with accessibility issues and how they were improved.

In the example below, colors don’t contrast sufficiently and labelling is unclear. It is difficult to tell what part of the diagram the labels are referring to and the legibility of the text is impaired because it overlaps with the illustration

The following example is improved by adding outlines to define shapes and moving labels so they are not overlapping the image.

In the example below, there are two issues—colors don’t contrast sufficiently with each other or with the background.

This can be fixed by either increasing the color contrast, or adding outlines to define the shapes.

In the following example there are multiple instances where the color contrast is not sufficient—the text, adjacent colors, and the illustrations.

This can be fixed by either increasing the color contrast of the text background and adjacent colors, or adding outlines to define the shapes.

Conclusion and Reflection

This project was received well by stakeholders and in resulted in both requests for trainings and increases in expedient accessibility queries. Making existing complex content accessible can be difficult, especially if the figure has many layered elements or a lot of data. This is why considering accessibility as you conceive your figures is important. It may be necessary to simplify your figures to make them accessible. This may make figures less appealing visually, but will increase comprehension for readers with visual impairments. A pie chart with more than 6 slices is unlikely to find a color palette that is diverse enough to for each slice to contrast sufficiently. A more complex pie chart may have slices that are too small to contain text, and/or the text will be too small if there is a lot of it. Also, relying on alt text to read numerical data via a screenreader can be a long and confusing experience. In this case, a table may be considered instead. Tables placed into digital content using HTML can be automatically read logically, without the need for fusing the principles of text, color, and alt text.

If the publishing strategy is to utilize an illustrator to recreate accessible drawings from rough drafts, it can be useful to ensure they are trained in accessibility and understand expectations, standards, and laws. As an extension of this case study, Accessibility Trials were held with redrawing suppliers. 10 inaccessible figures were supplied for the suppliers to redraw. They were instructed to send accessible figures back along with a summary of the changes to show they understand why changes were needed. This provided an opportunity to engage in an iterative conversation, where the redrawn figure was either approved, or feedback was given for a 2nd round.

if there is an expectation of a large number of ongoing projects with many figures, a good strategy is to have the knowledge, time in the workflow, and ability to converse with your production partners/stakeholders structured as soon as possible.

An additional case study of the Accessibility Trials will be posted in the future.

—Updated October 1, 2024