At the end of this past year, I participated in the final #MakeoverMonday for 2019 – “The Most Popular Makeover Monday Topics”. This makeover was uniquely special because it was Andy Kriebal’s final week as one of the leads for this community project. In 2016, I participated in my first #MakeoverMonday and I can personally say that this project has enabled my visualization and design growth. Thank you, Andy and Eva, for all that you have done and continue to do for this community.
With that being said… let’s get into the visualization!
The dataset for the final #MakeoverMonday of 2019 provided weekly downloads of each of the #MakeoverMonday topics from 2016 to 2019. Here is the original visualization that accompanied this dataset:
The dataset was rather simple. Therefore, it didn’t take long to decide on the information that I wanted to highlight, nor did it take long to create my dashboard (under two hours). However, I did spend quite a bit of time changing the colors of my final visualization due to it failing the Web Content Accessibility Guidelines. Yes, there are times when I fail in design and with this viz I did it over and over and over again.
Because of my many failed color attempts, I want to use this blog to focus on my Design Secret Color Guidelines and how I was able to fix my failed attempts and come up with my final design.
Let’s talk about colors!
To begin, in creating the final viz shown above, there were many ways that I thought about strategically using color. View the image below to see the guidelines that I decided to incorporate.
Color Guidelines Additional Context:
Let brand colors form the basis.
The Makeover Monday project is a well branded project that has a unique logo and color scheme. Because this dataset reflected the downloads for this project, I decided to color the visualization using the brand colors. I simply searched online for the logo and downloaded it to my computer. Then I went to https://coolors.co/app and uploaded the image using the camera button available on the website. From there, I selected each color within the logo, and the app automatically generated the colors for me. Finally, I exported an image of this color palette to be used within the viz. The app also generates a custom html code that you can share with others to access the same color palette.
Get inspiration from art and other visuals.
Meera Umasankar is an incredible Tableau designer who produces amazing #MakeoverMonday visualizations on a weekly basis. Before getting started with my viz, I ran across Meera’s visualization on my Tableau Public Activity feed. What caught my eye about her viz was how she incorporated a left-sided BAN area and how she was able to call out the top 5 downloaded datasets. Typically, I place my BANs at the top, but I loved the clean look and feel of Meera’s left sided BAN; therefore, I decided to test it out in my viz. Check out her beautiful dashboard below.
Create accessible color schemes and test them.
This part of the visualization is where I spent the most time. I created various color schemes for my viz and each of them failed the Web Content Accessibility Guideline color contrast test - three different times to be exact. Before I go into details on why each one failed, let’s briefly highlight the Web Content Accessibility Guidelines (WCAG).
The Web Content Accessibility Guidelines is a step-by-step set of technical requirements that details how to make web content (including apps and other digital content) accessible for people with various kinds of disabilities. A section of these guidelines focuses on color and contrast, both being vital to accessibility. A significant number of people have some form of color visual deficiency that limits their ability to distinguish between certain colors. Therefore, in order for text and other graphic elements to be readable they need to have enough contrast from the background that they are on. In terms of the visualizations that we create, we need to make sure that there is enough contrast between things like text on a dashboard background and labels on charts. View the image below to see examples of text and backgrounds that have both good and bad color contrast.
The Web Content Accessibility Guidelines recommend minimum levels of contrasts for text and background colors by using a mathematical formula. There are various free applications that allow you to test whether your text and background pass this minimum level. One of my favorite sites to use is https://accessible-colors.com/. It allows you to enter the text color, text size, and background color. The app then determines if the colors are AA or AAA compliant – AA being the medium level of compliance for color contrast and AAA being the highest. If your combination of text and background colors do not pass, the app provides you with the closest accessible combination – one for the text and one for the background color.
Now let’s look my visualizations that failed.
Failed Attempt #1
For my first test, I wanted to check if the white text on the peach colored bars for both charts (2019 Downloads & Top 5 Downloads) passed the contrast test. Using https://accessible-colors.com/, I input the text HTML color code, the smallest size of this text, and the HTML color code for the bar chart. My visualization failed *sad face*. The contrast ratio returned as 3.03 and the required minimum contrast for AA compliance is 4.5. I saw that a brighter bar background OR a darker text color could potentially pass. To be honest, I really loved the color of the bars and didn’t want to change it – yes, I can be a stubborn designer at times. Therefore, I decided to change the color of the text to match the Makeover Monday dark blue. This leads me to my second failed attempt.
Failed Attempt #2
For my second attempt, I was still set on keeping the bars its original color; therefore, I decided to change the color of the text on the bars to the dark blue brand color. Once again, I entered in the text color, text size, and background color into the app. My visualization failed *super sad face*. At this point, I knew I had to change the bar colors. I ended up changing the bar colors to the bright red #Makeover Monday brand color and after using the app, I saw that this color with text passed.
Finally, success! But I was not finished yet. Now that the bar color and the text passed, I needed to check the light blue font that I used on the BAN area against the navy blue background as well as the text caption - “Click on a Bar to View Dataset”. This leads me to my final failed attempt with this viz.
Failed Attempt #3
The light blue text with the caption “Click on a Bar to View Dataset” did not pass the test. However, the light blue section headers in the BAN area did pass. With that, I decided to change the “Click on… “ caption to the dark blue font in order to make the entire visualization WCAG AA compliant.
Check out the final viz here:
Starting out on this journey I did not know the importance of accessibility when creating a visualization. I thought that if I could tell what it was, then others should be able to as well. That is not the case and it is a very selfish way of thinking. Rarely are our visualizations created for solely our own use --we create them to be shared, therefore we must design them with others in mind. Today, I wouldn’t say that I am an expert at it either. However, I am aware of some of the basic things that us non-designers can do to make sure that our work is accessible to others.
A Non-Designer,
Chantilly J.
Comments