design systems - accessibility for charts

Workday needed to update chart styles in the design system and make them accessible for users. This project aimed to design a pattern library to assist people with color blindness. In two months, I audited the current framework, conceptualized an approach for the patterns, executed the designs, and then tested the patterns internally. I worked directly with the engineer to bring this functionality live.

I enjoy making the internet more accessible and was thrilled to work on this project.

Fill patterns I designed were implemented into the Workday Design System Library

Initial Research Audit

Before the update, the existing patterns lacked logic and coordination with the current design system colors. To begin my investigation, I started with basic shapes: a square, a circle, and a line.

The previous patterns lacked logic and coordination with the design system colors.

The framework I built used size, density, thickness, and rotation to determine the correct fidelity.

Searching for the Correct Density

My process used elements such as size, density, thickness, and rotation.

Viewing Patterns in Context

After identifying patterns in black and white, I started incorporating colors from the design system. I examined both normal and reversed options to compare contrast levels.

Interpolating Colors

I used JavaScript to estimate color values and determine the appropriate level of fidelity to achieve the desired contrast.

Fill Patterns Were Incorporated into the Design System

The Workday Design System team updated the design system to add fill patterns for improved accessibility across the platform. I used existing usability standards and tested the patterns within Workday.

Chart Feature for Accessibility

Workday needed to update charts in the design system and make them accessible for users. This project aimed to design a pattern library to assist people with color blindness. In two months, I audited the current framework, conceptualized an approach for the patterns, executed the designs, and tested the patterns internally.

I enjoy making the internet more accessible and was thrilled to work on this project.

Audit of Existing Fill Patterns

At the project's start, I researched fill patterns in our current pattern library and found that the visualizations did not align with the design system colors and were unclear at small scales.

Elements to Examine Density

I adopted a clean slate approach to design the fill patterns. I began by selecting basic elements to examine the density in space. As I explored options from less dense to denser patterns, the foreground and background unveiled new shapes to work with. For instance, crossed lines formed diamonds in the negative space.

Search for the Correct Density

The chart system needed to support a wide variety of chart sizes. The biggest challenge involved finding fill patterns that suited small spaces. I collaborated closely with the developer, iterating through multiple prototypes to select patterns that fit well in those confined areas.

Working with Color

Once I selected black-and-white patterns, I began incorporating colors from Workday's design system.

Modes of Color Selection

Defining the logic for using the solid colors in the fill pattern mode was the next step in determining the appropriate level of legibility. How might we determine the right level of fidelity in our patterns?

Referencing Legibility Standards

I worked with the developer to create a tool that evaluates the contrast levels between charting colors and the fill patterns to calculate a score based on legibility standards. It used color interpolation methods for blending between the two values. I used this tool to generate a set of high contrast color and fill pattern pairs.

Testing Values of Interpolation

After several iterations, I selected a version of the interpolated color for each fill pattern. We shipped this first version with limited internal testing, primarily based on the internal team's feedback. I normally would want to test the selection with users and with different screens, but we were working under intense time constraints and shipped my recommendations for the first release.

Incorporated into the Pattern Library

The new color schemes and fill patterns significantly improved accessibility across the platform, making it easier for a wider range of individuals to navigate and interact with charts in the Workday enterprise.

In addition to designing new features for design systems, I utilize Figma to efficiently create, edit, and share files with developers and other designers. While working with Apiture on their development portal, I built a component library to enable accurate, consistent design creation, preparing it for addition to the AUI Design System.

Design Systems - Accessibility for Charts