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.
Starting with what you know
My prior work with the Material Design team meant that I was already familiar with Google's approach to color theory. While it was easy to interpolate from the single color into shades, accessibility issues quickly became apparent.
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.
Charts from various Tidepool interfaces, all displaying the same kind of data.
Source: David McCandless / InformationIsBeautiful.com
Cultural Connotations
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:
- Carbohydrates
- Other nutritional data (Fat, Protein)
- Sleep
- Activity Data
- Steps
- Heartrate
- Calories
- Physical Activity (Running, Biking, Swimming, etc)
- Menstruation
- Device changes (site and sensor swaps, moving to a different device)
- Therapy settings changes (changing basal rates, adjusting carb ratios)
Hue, Saturation,
Value Lightnessuv
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
Color System
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.
Articles
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
Builds on the Designing Systematic Colors article. Discusses data viz, accessibility testing, & pixel art.
High-level guidance describing general best practices for data visualization.
Tools
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.
Tool that mathematically balances perceptual differences between colors and name uniqueness.
© Paul Forgione 2023