Accessibility in Academic Research: Using Color

So my fiancé is a PhD student. That fact is only relevant in that it’s my main source of information about processes at various academic institutions. While he is a student and works for only one university, he is on projects with other universities, and regularly reviews papers for journals.

There are times he shows me or tells me about websites, surveys, graphs, or practices that clearly violate current accessibility standards. At times he has mentioned this to the people in charge of these items and he frequently gets the response along the lines of “I don’t think people with visual impairments will use this.”

As someone who strives to ensure accessibility practices are followed, this response makes me frustrated. But, rather than having this be a series with me venting about these transgressions, I’d like to take this time to give a brief overview on how academic faculty and staff (or other researchers) can build accessibility practices into their workflow and why they should.

This series is going to focus on a few main problems with accessibility in academic research, but by no means are they they only ones. If you’re curious about other accessibility considerations, take a look at Anne Gibson’s Alphabet of Accessibility on the Pastry Box Project; it’s fantastic.

Color usage in research graphs/charts

Most people experience normal color vision. Most people tend to create images that are visually distinct to them. If they can tell the difference between two colors on a graph or chart, they believe their audience will be able to as well.

However, color blindness affects about 1 in 12 men and 1 in 200 females. There are an estimated 300 million people worldwide that experience some type of color blindness. This means that there’s a high likelihood that someone you have met or know has some form of color blindness.

The most common type of color blindness is red or green color blindness. However, there are other forms of color blindness, including blue deficiency and total color agnosia (everything appears as shades of grey).

All color blindness can vary in its severity, and isn’t limited only to the deficient colors. Colors with red, blue, or green in them can be difficult to discern as well. For instance, purple is comprised of varying shades of blue and red. When you take away the red from your vision, blue and purple can look very similar.

Lots of scholarly research includes graphs and charts to represent data and results. However, depending on your color scheme, and how you’ve set up your chart, it may not be readable by everyone.

Example of a Bad Graph

A bar graph with seven different colors to represent seven different items. There is a color legend on the right of the graph. This graph looks distinct for users with normal color vision.
This is a graph that appeared in a reputable online academic publication. To those with normal color vision, this graph does a great job of separating out the items by color.
A bar graph with seven different colors to represent seven different items. There is a color legend on the right of the graph. This graph looks distinct for users with normal color vision.This displayes the earlier full color graph as it would appear to a user with protanopia (red deficiency)
Using the slider you can see on the left what the graph looks like to users with normal color vision, and on the right, what it looks like to users with red deficiency (protanopia). In the second graph, the blue and purple colors used to indicate blueberries and grapes look very similar, as do the green and orange colors used to indicate apples and tangerines.
A bar graph with seven different colors to represent seven different items. There is a color legend on the right of the graph. This graph looks distinct for users with normal color vision.This is the same graph from earlier, but the color is gone. It appears like it would to a user with monochromacy.
Using the slider you can see on the left what the graph looks like to users with normal color vision, and on the right, what it looks like to users with no color vision (monochromacy). In the second graph, the blue and orange colors used to indicate blueberries and tangerines are difficult to distinguish.

How to Fix the Problem

I will mention that the legend in the above graph does list the items in the order they appear, but that’s not always possible in graphs, nor is it always how it is done. So, what can we do to adjust these graphs to make them more color blind friendly?

  1. Vary the hues/saturation of the graph colors so they appear different to users with monochromacy. For instance, in the full-color graph above, you can see that the color for peaches is much lighter than the color for tangerines. In the monochromacy graph below it, you can see that the two bars on the right of the graph have different levels of white and black. The peach displays as a much lighter grey than the tangerine, making it visually distinct.

2. Use patterns in data visualization to convey the different data sets. The below image shows an example of a graph that uses patterns to convey the differences, so that color isn’t the distinguishing factor. Regardless of the colors a user can see, they will all be able to pick up on the different patterns and will be able to easily differentiate them.

This image shows a bar graph with three different bars. The left-most bar is filled solid with a turquoise color, the middle bar has a turquoise mesh pattern on top of the white background, and the last bar has a diagonal striped pattern on the white background.
This graph shows one way to distinguish different areas of the graph using different patterns to differentiate the data.

3. Don’t rely on color/legends alone to identify the data; use labels. Many graphs use a color legend to help viewers identify what the different parts of the graph represent. However, for users with color deficiencies it can be difficult to see and identify the colors in the legend, and on the graph. Adding in labels to the different data sections avoids that problem neatly. It clearly labels what the viewer is looking at (if they don’t need alt text-that’s a separate post). The graph below demonstrates using labels to identify the different data.

This is an example of a graph that doesn't use color as the only indicator to differentiate the data, they also include labels on the different bars of the graph.
This graph uses color to distinguish the bars on the graph, but it also uses labels on the bars to differentiate them as well.

Resources

So, how can you easily incorporate this into your workflow? Chrome has several plugins that mimic what different types of color blindness look like, so that you can inspect your work as you go. I recommend the Chromacy Chrome plugin to check your work online.

If you want something that will show you what it looks like on work you’re doing on any software you have on your computer, you can download Color Oracle (free) to use on your computer. It is compatible with both Mac and Windows computers.

If you’re creating work in JupyterLab, my fiancé developed a plugin to help you check for color blindness problems in the software. Neither he nor I gets any kind of compensation from you using this. You can see how to use it in this GIF below.

For help figuring out which colors to use (if you aren’t using patterns or labels), you can use ColorBrewer to find compatible colors. While this website helps generate colors for maps, you can use the same colors on something else once they’ve generated it; just please credit them for it. At the top, just select the number of data classes you have, and it will generate a palate for you (max is 12).

These are by no means the only tools you can use, just some of them. I hope you’re able to use them in your work to make your research more accessible!

Usability Testing With Citizens Ages 55+

As I referenced in my earlier post, I’ve been interested in working on usability testing with seniors on the Boston Public Library website.

Last summer I developed a questionnaire for seniors that asked them about their internet habits. We sent a link to this survey out though Age Strong in Boston, an organization dedicated to improving the life of Boston’s citizens 55 years or older. We used our social media accounts and a local church e-newsletter to promote the survey as well. We also included paper surveys at various library programs that were frequented by seniors, so that we could get respondents who may not feel comfortable taking a survey online.

In the survey we asked if people would be willing to participate in an in-person usability test session at our Central Library in Copley Square. Those who participated would get a $20 gift card. We got over 90 overall survey responses, and approximately 40 said they were interested in participating in the in-person session. Of those 40, we invited 16 to come in person.

Continue reading Usability Testing With Citizens Ages 55+

What I’m Working On/Reading: July 2019

It’s been a while since I posted, but this is the first time I’ve had some free time to sit down and think about things I want to say or share.

When I did usability testing for the redesign of the Boston Public Library website last year, we found that seniors had the most difficulty using the new website. At the time, we didn’t have time to explore much into it. We made the edits we needed based on their feedback, but I wanted to revisit this. Seniors tend to be the demographic group with the most difficulty with technology, and changes. However, they’re also a significant part of the population. I want to make sure as we look forward, we aren’t leaving them behind. Now, we finally have the time to work on this project, so here are a few things I’m reading as I think about how I want to approach this.

Continue reading What I’m Working On/Reading: July 2019

Blog Post Best Practices: A Literature Review

Image of a blank blog post in WordPress
Welcome back everyone, and happy new year! I took a break from writing posts during the holidays, as things just got too busy for me. This month’s post was inspired by a conversation with a friend. My friend was looking for guidelines on writing blog posts. She knew I had created guidelines for the blogs we have at the Boston Public Library, but she had trouble finding articles online with this information. The trouble is that most of the information I used, I gathered from sources about writing for the web. So, when she searched for blog guidelines, she didn’t find what I used.
The purpose of this post is to aggregate information on how to write blog posts, as an informal literature review. I will also include my own suggestions in here as well. I’ve broken things down by category, and included these three broad categories: Word Count, Readability, and Accessibility.

Continue reading Blog Post Best Practices: A Literature Review

How to Do Usability Testing Without a Budget

This post is about doing usability testing on a website for a public library, without a budget for usability testing, or any extra software beyond a simple survey tool and Google Analytics.
 
So, to start at the beginning, my team completely overhauled our old library website design, and for good reason(s):
 
  1. It looked very outdated, because it was basically a lightly modified version of the website we created in the early 2000s.

a. It was all static HTML pages for the most part.

 

2. The design wasn’t responsive, making it a headache for patrons on mobile or tablet devices, and for staff members trying to help users on mobile or tablet devices.

3. Certain parts of the website were not accessibility compliant.

 
Those are the biggest reasons for the switch, but as you can imagine, there were a lot of reasons to do it.

Continue reading How to Do Usability Testing Without a Budget