Experience Designer
Charts for Accessibility

Data Aesthetics

Charts for Accessibility

Charts for Accessibility

In 2018, Workday was in the process of replacing the existing charting library in d3 with a new charting library, Aurora, that was built for large data sets. In the process of replacing the charting library, there were multiple items that we needed to examine while coordinating with the recently developed design system. One of the first items was fill patterns for color blindness.

The existing fill patterns

The existing fill patterns

When beginning the project, I researched what the current fill patterns were in d3 and if there was logic to their design. The current patterns were not coordinated with the current design system and many of them were difficult to decipher at a small scale. Therefore, I began to design fill patterns with a clean slate.

Design patterns with basic elements

Design patterns with basic elements

To begin, I selected basic elements to explore the density in a space. As I began to explore less dense to higher dense options, the foreground and background revealed new shapes to work with. For example, crossed lines revealed diamonds in the negative space.

Applying appropriate density to charts

Applying appropriate density to charts

Within the chart system, there were instances when the fill patterns were limited to small spaces. I worked closely with the developer to select patterns that worked well in small spaces.

legend identification

legend identification

The current implementation of a legend identifier is a 16px circle. To account for fill pattern legibility, I proposed a rectangle shape that would allow for fill patterns to be recognizable at a small scale.

Working with chart colors

Working with chart colors

Once I selected patterns that were legible at a small scale, I incorporated colors from the design system at Workday.

Modes of color selection

Modes of color selection

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

referencing aim legibility standards for contrast

referencing aim legibility standards for contrast

Working with legibility standards, the developer created a tool with contrast levels between the charting colors and the fill pattern Color. Interpolation methods for blending between two values were used to determine the appropriate score.

Testing values of interpolation

Testing values of interpolation

After several iterations, I selected a version of the interpolated color for the fill pattern. Although I wanted to test the selection with users and with different screens, we shipped my best guess for the first release.

UI_test.png