Making a more inclusive chart library

Saurabh Yadav
Primer Design
Published in
7 min readJun 8, 2023

--

In today’s fast-paced digital landscape, Primer serves companies that face a myriad of challenges in ensuring seamless transaction processing, identifying potential issues, and maintaining a secure and reliable payment ecosystem. With the constant evolution of technology and the increasing complexity of payment systems, organizations require a comprehensive observability solution that provides real-time insights into their operations.

Hi, I’m Saurabh, Design Systems Lead at Primer and I work with designers across different teams to make sure we craft great & consistent designs faster than ever. The Primer Design Team is guided by our design values which reflect our strong emphasis on creating inclusive designs. We strive to create experiences that are efficient and effective for all our users, irrespective of their abilities.

Charts are an integral part of our Observability product dashboard. We at Primer see it as a central nervous system for a merchant’s payment infrastructure, offering a holistic view of their entire transaction ecosystem. From the moment a customer initiates a payment to the completion of the transaction, every step is monitored and analyzed, providing them with invaluable insights into the health and efficiency of their payment systems.

Observability in Primer Dashboard

First attempt with charts

For the Observability product, our primary emphasis is on line and bar charts, which make up a significant portion of our chart selection. However, we also cater to various other use cases of data visualizations to ensure that our merchants have the most optimal scanning experience with their data and are always on the lookout for other charts to add.

Types of supported charts at Primer

Instead of being completely static, one can interact with our charts by hovering over the chart elements to see more specific details about that specific node. This helps increase the focus on that chart element.

Hover interaction in a line chart

Feedback & Areas of Improvement

During the collaborative design process with Daniel (from the design team), we successfully implemented several positive aspects:

  • Ensuring all text elements meet the required color contrast of 4.5:1.
  • Incorporating clear labels for each element within the charts.
  • Enabling hover focus functionality for chart elements.

However, in some later stages, we also identified some areas for improvement:

  • The chart colors lacked sufficient contrast, potentially impacting readability.
  • We did not prioritize keyboard accessibility, which could limit usability for certain users.
  • The chosen chart colors did not take into account the needs of color-blind individuals.

Overall, while we accomplished some critical design goals, there were notable areas where we could have enhanced the charts’ accessibility, legibility, and usability for all users. This is why we decided to revisit the charts and try to tackle these issues.

Revisiting accessibility

While our first approach considered accessibility in the design process, we missed out on a few details from WAI which we aim to address now. According to the Web Accessibility Initiative (WAI), it is advisable to provide a detailed description for complex images, such as those represented in the charts. This can be achieved through alternative text (alt text), tooltips, or by directing users to a separate page containing a comprehensive summary of the chart’s content. Additionally, the WAI Non-text contrast guidelines recommend maintaining a contrast ratio of 3:1 between graphical elements to ensure their visibility.

Another valuable resource is this article which discusses the use of hover interactions to focus on chart elements, reducing reliance on color alone. To help our case, our current charts already support this functionality, allowing users to hover over elements for more information. However, the charts currently lack keyboard navigation capabilities, preventing users from accessing the elements via keyboard commands.

Addressing the possibilities

At first, we went for exploratory approaches that change how our charts look completely. Here at Primer, we strive by diverging our ideas to the limits and taking help & different perspectives from other designers, developers, and other members of the team. These are a few approaches we took to reduce our dependency on colors and take help from other visual elements. We tried using dotted patterns for the line charts, introducing visual nodes and also a monochrome palette.

Accessibility explorations with line charts

While the charts successfully adhered to theoretical color contrast requirements and accessibility practices, we encountered some flaws when testing them with color-blind users on our dashboard, like:

  • In tight spaces, the presence of nodes within the charts made it even more challenging for users to differentiate between the lines.
  • The effectiveness of dotted lines diminished when the chart contained more than four lines, as the dotted pattern became difficult to discern.
  • Although a monochrome palette improved distinguishability between different lines, it created difficulties in mapping the lines to the corresponding legend keys.

Sometimes what works in theory doesn’t work exactly the way we want it. The theory is purely meant to guide us for best practices in general, not the perfect practice for your exact use case.

However, this experience was not in vain. It highlighted the need for better contrast, even for users with full-color vision. Nevertheless, due to the complex nature of multiple chart elements crossing each other, maintaining a 3:1 contrast ratio among them proved unfeasible.

These insights emphasize the importance of finding alternative approaches to address the challenges posed by tight spaces, dotted lines, and color mapping. It is crucial to explore solutions that can enhance visibility and comprehension for all users, including those with color vision impairments, without compromising the usability and integrity of the charts.

Accessibility explorations with bar charts

Similar challenges arose when applying patterns and a monochrome palette to our bar charts.

  • The patterns used in the bars became harder to distinguish from one another due to their size.
  • Utilizing high-contrast colors with a 3:1 ratio (including white) did not align well with our brand identity.

However, we also discovered a few effective strategies:

  • Introducing a 1px gap between the bar elements proved helpful in enhancing the distinction between bars.
  • The monochrome palette worked well in this context because the legend keys followed the same order as the bars, making it easier to establish connections between them.

We also considered implementing an accessible high-contrast mode for the entire dashboard. After careful consideration, we decided that we’ll pursue this option later in the roadmap and focus on fixing the accessibility issues on the chart level for now.

Preview of high-contrast mode

Towards inclusion

To arrive at our current version, we had to make several trade-offs considering what we uncovered in our explorations implementing accessibility features. These insights imposed constraints on our design choices, leading us to deviate from conventional approaches that could potentially undermine the user experience. As a result, we made the following changes to address these considerations and redefine charts at Primer.

Updated colors

We enhanced the color system by introducing more vibrant colors compared to the previous version. We decided to stray away from the WAI guidelines suggesting a 3:1 contrast ratio between different chart elements. Our testing revealed that it wasn’t helping our use case much since we have multiple chart elements overlapping each other and our requirement to adhere to the brand identity.

Color update to charts

Updated color order

Through comprehensive testing with various color perceptions, we reevaluated the order in which colors were presented to ensure improved distinguishability between bars. Additionally, we incorporated a 1px gap between the bars, enhancing their visual separation and making them more distinct from one another.

Color order update to charts
Color perception matrix for bar charts

Focus interactions

Rather than solely relying on colors, we expanded our approach by redefining the interaction patterns to enable keyboard navigation within the charts. By incorporating focus elements within the chart, users can now navigate through the key legends using the keyboard and easily correlate each key with its corresponding chart element. This improvement significantly reduces the reliance on color when multiple chart elements are introduced, enhancing accessibility and inclusivity for all users.

Key legend focus interactions

For the future

We realize that we have made progress but we are not completely there yet and there is still room for improvement. And that’s perfectly alright. Our focus should always be on continuously striving to do better and enhance our services for our users. In the case of charts, there are additional possibilities to explore, such as implementing a high-contrast mode. However, it may be more feasible to address it at a later time. The key is to remain committed to ongoing improvement and prioritize the needs of our users.

Stay tuned for more behind-the-scenes stories from our Design team here at Primer. You can also check out our Dribbble for some eye candies. Until next time!

--

--