You can watch my full presentation on designing for accessibility with color on our YouTube page.
Part of the design process at Tidepool includes a lot of thoughtful research into existing tools and understanding how the previous work of designers can help inform our own efforts. The work I shared in this “Designing for accessibility with color” webinar isn’t necessarily revolutionary, but it is dependent on others openly sharing their work for others to leverage in new and innovative ways.
Tidepool’s design system is openly published at tidepool.design. We will continue to update this resource as our work evolves.
You can view Tidepool’s color palette in greater detail in this public Google Sheet.
As mentioned in the webinar, a number of resources, tools, and insights helped inform the work that we’ve done so far. Here they are:
Colorbox.ioInteractive 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.
+ Automatic contrast calculation after generating colors– Hosted version only allows you to select based colors via colorpicker– Accessibility / contrast ratios only tested against #FFF and #000
Geenes.appEnter a hex value, generate a color ramp, tune a number of variables, and visualize the palettes across 3 sample UIs.
+ Color ramps that compensate for differences between shades+ Highly configurable– Focused on monochromatic palettes
+ Accommodates Light & Dark modes – Limited accessibility testing– Assumes use of Material Design component system
Mineral UIOpen source design system (that was) maintained by CA Technologies, including accessible color palettes. Centered around the idea of Color Ramps rather than individual colors.
+ WCAG 2.1 AA compliant+ Support for ‘dark mode’ themes– Accessibility / contrast ratios only tested against #FFF and #000
Design System Sprint 2: One Color Palette to Rule them AllArticle discussing how they created a scalable color system, as part of a redesign they also documented.
Inclusive Color Sequences for Data Viz in 6 StepsDescribes 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.
Viz Palette for Data Visualization ColorDiscusses the downfalls of generating purely mathematical color palettes.
Picking Colors for Your Data VisualizationsDescribes when and why to use different color palettes in data visualization.
Designing Systematic ColorsArticle describing work that went into developing the Mineral UI color system (which this proposal is largely based on).
Material Design Data Visualization GuidelinesHigh-level guidance describing general best practices for data visualization.
Cloudflare – Thinking About ColorBuilds on the Designing Systematic Colors article. Discusses data viz, accessibility testing, & pixel art.
The Science of Color Contrast — An Expert Designer’s GuideIntroduction to color contrast ratios, and the scientific principles that inform color formats such as RBG, HSL, etc
Contrast GridAllows you to compare one whole spectrum against another to check for contrast & WCAG level.
Viz PaletteTool 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 color blindness.
ColorCubeChecks multiple colors at once against black and white. Also gives you the pairings of shades with the highest degree of contrast.
ColorgoricalTool that mathematically balances perceptual differences between colors and name uniqueness.
Sim DaltonismOpen-source Mac and iOS app to simulate various forms of color blindness.
Kevin Gutowski ColorVisualizes the border between accessible and inaccessible color pairings.
HSLuvA developer friendly perceptual color space.
Colours in culture
This image, with additional detail can be found at https://informationisbeautiful.net/visualizations/colours-in-cultures/.
We'll keep you updated with all the need to know news and announcements for Tidepool and Tidepool Loop
Donate today to support Tidepool's mission to improve the lives of People with Diabetes through affordable, accessible and interoperable technologies
Want to get the latest news and updates about Tidepool and Tidepool Loop? We promise to keep it interesting in your inbox.
