Color Maker: a Mixed-Initiative Approach to Creating Accessible Color Maps

TL;DR

ColorMaker tackles the challenge of creating quantitative colormaps by marrying designer intuition with a stochastic optimization engine in a mixed-initiative interface. The method optimizes for perceptual uniformity, smoothness, and CVD accessibility while allowing partial inputs and iterative refinement. Key contributions include a novel objective framework, a bias-based integration of user preferences, and an open-source web tool capable of generating CVD-safe and diverse colormaps from scratch or via partial guidance. Evaluations show comparable or superior perceptual characteristics to standard colormaps and positive designer feedback on usability and ideation capability, highlighting the tool's practical impact for accessible data visualization design.

Abstract

Quantitative data is frequently represented using color, yet designing effective color mappings is a challenging task, requiring one to balance perceptual standards with personal color preference. Current design tools either overwhelm novices with complexity or offer limited customization options. We present ColorMaker, a mixed-initiative approach for creating colormaps. ColorMaker combines fluid user interaction with real-time optimization to generate smooth, continuous color ramps. Users specify their loose color preferences while leaving the algorithm to generate precise color sequences, meeting both designer needs and established guidelines. ColorMaker can create new colormaps, including designs accessible for people with color-vision deficiencies, starting from scratch or with only partial input, thus supporting ideation and iterative refinement. We show that our approach can generate designs with similar or superior perceptual characteristics to standard colormaps. A user study demonstrates how designers of varying skill levels can use this tool to create custom, high-quality colormaps. ColorMaker is available at https://colormaker.org

Figures (9)

• Figure 1: The ColorMaker interface consists of several key elements: (A) A configurable color picker that supports selection in multiple color spaces. (B) A 'preference shelf' that enables users to indicate their preferred colors at their approximate desired positions. (C) The generated colormaps are displayed as continuous scales, accompanied by CVD simulation for accessibility considerations. (D) The user can access information about the underlying perceptual characteristics of the colormap. (E) Users have the option to directly edit the colormap curve if desired, providing fine-grained control. (F) The colormap is applied to a selection of visualizations for quick evaluation. Users can also import their own images or scalar fields for further testing. (G) A sidebar keeps a history of all generated colormaps, allowing the user to revisit and fine-tune previous design variations. (H) Optimization parameters, including the option to simulate CVD effects, can be adjusted to provide additional control over the colormap generation process.
• Figure 2: Steps for creating a sequential, single-hue colormap for an ocean bathymetry dataset. A blue color (1) is added to the preference shelf (2), leading to the generation of a multi-hue colormap (3). Stretching of the blue block indicates a preference for a predominantly single-hued design (4), resulting in a second solution that meets the requirement (5). The colormap is checked against example scalar fields (6) and evaluated for its perceptual characteristics (7).
• Figure 3: A multi-hue design created by first ideating a random set of solutions (1--2) and selecting one of five generated colormaps to work with (3). The user locally edits the colormap to saturate the purple (4). This adjustment causes the optimization to update the preference model, although it unexpectedly removes the orange-yellow hue previously visible at the end of the scale (5). The user reincorporates that color by editing the curve in the CIE LCh color space (6), and manually repositions the color blocks to indicate a desired blending between purple and orange (7--8), yielding the final colormap (9).
• Figure 4: Two diverging colormaps generated for CVD accessibility. Starting from a set of five suggested designs, the user opts for the orange-to-lavender design (1), which is flipped to accommodate desired data semantics (2). As an alternative, the user further selects a second, brown-to-purple colormap (3), refining it to incorporate brighter rose (4) and green (5). Although these colors may be problematic for people with green-red blindness, ColorMaker finds an appropriate solution that balances this preference while maintaining a minimum level of color separability for CVD viewers (6).
• Figure 5: Illustration of how ColorMaker incorporates chromatic bias towards preference colors (green and yellow, in this example). Each color block exerts a certain amount of bias on every control point (circles). The magnitude of the bias follows a normal distribution centered at the middle of the block. In this example, green exerts a more diffused bias impacting several control points, whereas the bias to yellow is focused on the second control point from the right. The cumulative, averaged bias vectors are blended with random offset vectors during the optimization.