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.

Colors-1

A Zoom presentation I gave on the open-sourcing of my work through Tidepool.

acc-color
acc-greyscale-2

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.

image-1
image-3
image-2

Charts from various Tidepool interfaces, all displaying the same kind of data.

2552_ColoursInCulture-3

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.

Stoplight

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)
HSL
HSL
HSLuv
HSLuv

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.

cielchuv-transparent

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.

1. Color Palettes
1. Color Palettes
2. Test Greyscale Consistency
2. Test Greyscale Consistency
3. Isolate Product Colors
3. Isolate Product Colors
4. Definte Light Palettes
4. Definte Light Palettes
5. Define Light Palettes (Accessibility)
5. Define Light Palettes (Accessibility)
6. Define Dark Palettes
6. Define Dark Palettes
7. Define Dark Palettes (Accessibility)
7. Define Dark Palettes (Accessibility)

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.

Spreadsheet
Concepts

Reference & Research Materials

Colorbox

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.


Geenes

Enter a hex value, generate a color ramp, tune a number of variables, and visualizes the palettes across 3 sample UIs.

Material-Color

+  Accommodates Light & Dark modes
–  Limited accessibility testing
–  Assumes use of Material Design 
 component system

Mineral-UI

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

Articles-3

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.

Articles-1

Article discussing how they created a scalable color system, as part of their redesign they also documented.

Articles-2

Viz Palette for Data Visualization Color
Discusses the downfalls of generating purely mathematical color palettes.

Articles-4

Describes when and why to use different color palettes in data visualization.

Article-5

Article describing work that went into developing the Mineral UI color system (which this proposal is largely based on).

Article-8

Introduction to color contrast ratios, and the scientific principles that inform color formats such as RBG, HSL, etc

Article-7

Builds on the Designing Systematic Colors article. Discusses data viz, accessibility testing, & pixel art.

Article-6

High-level guidance describing general best practices for data visualization.

Tools

Tools-1

Allows you to compare one whole spectrum against another to check for contrast & WCAG level.

Tools-2

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.

Tools-3

Checks multiple colors at once against black and white. Also gives you the pairings of shades with the highest degree of contrast.

Tools-4

Tool that mathematically balances perceptual differences between colors and name uniqueness.

Tools-7

A developer friendly perceptual color space

Tools-6

Visualizes the border between accessible and inaccessible color pairings.

© Paul Forgione 2023