Accessible Color Systems
When I joined Tidepool, there was a rainbow of singular colors used for branding purposes.
As the Data Science team grew, as we began visualizing new types of data, and as I focused on improving the accessibility of our tools, I made it clear to the team-at-large that it was time to invest into a scalable color system.
A Zoom presentation I gave on the open-sourcing of my work through Tidepool.
Gather the herd
In addition to inconsistent use of color, Tidepool lacked a design system, and was in the process of incorperating a third, pre-existing product into it's offerings. Every surface through which you could interact with Tidepool looked and felt different.
Since the first designs for Tidepool, many had expressed a desire to move away from the use of red and green relating to Blood Sugar ranges.
Data, Data, Data
As Tidepool was growing, we began analyzing and visualizing broader and broader swaths of data.
Described here are just the core set of datatypes we needed to account for from the start:
The problem with many design systems at the time of my research was that they were based around color spaces that digital designers were most familiar with.
This lead me to Alexie Boronine's work on HSLuv, a programmatic adapation of the CIELUV color space focused trading off precision in saturation in exchange for a mathematically precise representation of lightness.
The New Tidepool
Through the use of HSLuv and the initial brand colors Tidepool had, I extrapolated hues around the rest of the rainbow, generated shades out of those hues, then began testing for grayscale consistency.
Kicking the tires
Once I had iterated to a small enough lightness delta across all the hues, I began extensive accessibility testing. Each shade was cross-referenced, and I generated a sort of reference compendium for designers, marketers and data scientists to refer to when using color in their work.
Reference & Research Materials
Interactive browser-based tool to generate ‘accessible’ color palettes. The article describes the naming process for colors, and how they built their palettes using Hue, Saturation & Luminance.
Enter a hex value, generate a color ramp, tune a number of variables, and visualizes the palettes across 3 sample UIs.
+ Accommodates Light & Dark modes
– Limited accessibility testing
– Assumes use of Material Design component system
Open source design system (that was) maintained by CA Technologies, including accessible color palettes. Centered around the idea of Color Ramps rather than individual colors.
Describes how to take a product or design system color palette, and select a range of colors for use in data visualization, while making it accessible.
Article discussing how they created a scalable color system, as part of their redesign they also documented.
Viz Palette for Data Visualization Color
Discusses the downfalls of generating purely mathematical color palettes.
Describes when and why to use different color palettes in data visualization.
Article describing work that went into developing the Mineral UI color system (which this proposal is largely based on).
Introduction to color contrast ratios, and the scientific principles that inform color formats such as RBG, HSL, etc
Allows you to compare one whole spectrum against another to check for contrast & WCAG level.
Tool from the “Viz Palette for Data Visualization Color” article. Allows you to paste in multiple colors at once, gives you perceptual difference ratings & allows you to simulate colorblindness.
Checks multiple colors at once against black and white. Also gives you the pairings of shades with the highest degree of contrast.
© Paul Forgione 2022