Topics in the Accessible Color Project

Perceptual Color Space

The careful treatment of color has been a sadly neglected element of computer graphics.

We are aware of no commercial products which employ a perceptually based colorspace in their color pickers or manipulation tools. (Some programs, such as Adobe Photoshop, do have a CIELAB space color picker, but the a*-b* dimension appears to be distorted to fit into the square color gamut window, and hence the displayed colors are not evenly spaced perceptually.) One of the issues in trying to use a perceptually-based color space is that the gamut of available colors in a given medium is irregularly shaped, and so does not fit well into typical circular or square color-choosing widgets. On the one hand, using a perceptually-based color space produces behavior more in line with the user's expectations, but on the other hand the irregular gamut boundaries can confuse a user not used to them. Thus, one element of our research has been how to present the gamut of available colors to the user in a way that makes intuitively obvious what operations and colors are available without surprising the user with unexpected restrictions or "you can't get there from here" problems. This is closely related to the problem of color gamut compression, but with a more interactive focus.

We use the Munsell system as our underlying perceptual color space. This space has been selected because it is perceptually uniform; that is, equal distances in the color space show perceptually equal differences in color. All of the hues are given equal space, so the non-primary hues are easier to find than in most other non-perceptually-based spaces. Also, when users change brightness, saturation, or hue in the Munsell space, they can be sure that they are changing only these characteristics.

The images below show a slice through the Munsell space at a constant perceptual brightness. The irregular shape of realizable colors is apparent. The first image shows the slice plotted in Munsell space, showing the regular sampling grid, with equal distances corresponding to equal perceptual changes. Other color spaces do not share this uniformity in perceptual distance, as can be seen in the second image, where the slice through Munsell space is plotted in CIELAB space, which is an analytic approximation to a perceptual space. The third image shows the slice plotted in the standard computer graphics "HSV" space, ignoring the brightness component (which is totally wrong for HSV space), and showing the extreme distortion of that space. In each image, the blue line represents the pure spectral hues (and the line of purples) and hence encloses all possible colors, while the green line shows the Macadam limits at the given brightness for CIE illuminant D65 and hence encloses all colors that are realizable with nonfluorescent pigments (i.e., all possible object colors). The red line is supposed to show the gamut of a typical RGB monitor, but it doesn't quite due to a bug.

Select a Color

This widget is intended for a single isolated color selection task such as paint color selection, and works well because it lets users choose a satisfactory color in only one or two steps. The idea for the color selector is that users usually have a good idea of what color they want, but want to see a few variations before making a final selection. For example, the user wants green, but which green? The Color Selector presents selectable variations on the initially selected color.

Select From a Palette of Colors

We are just starting to address this topic. We view expert palettes as an alternative to having to choose from amongst the 16 million colors available on a 24-bit display. Initially, we have designed two simple mechanisms. The first set of palettes are offered as a set of related pre-selected swatches. For example, one set is saturated colors (Bright colors), another is pastels (Subdued colors), and another contains more subdued "natural" colors. These palettes are appropriate for the paint color selection task.

We would like to design palettes for other applications that are more specifically task-oriented. For example, a user interface palette might suggest which colors should be used for each part of the interface.

Another mechanism for limiting color choices is to provide three user-selected "primaries" that become points on a triangle as shown below. We interpolate the colors to create the edges of the triangle as a gradient between each pair of colors. This provides a palette analogous to what a fine artist might create when she squeezes out three dollops of paint and then blends them to create a range of colors from which to create a composition. In our current implementation, the three "primaries" are hardwired, but this will be changed soon.

Modify a Color

Our color modification widgets have gone through many iterations. Through informal testing, we have discovered that initial selection of a color and the editing of an existing color are very different tasks that usually require different interaction techniques. Furthermore, offering a variety of ways to select and edit colors seems to be important for user satisfaction. The choice of method depends both on the person and his or her experience level and on the task.

Our Nudging and Selecting widgets are based on a three-axis gestural menu.

Modify a Group of Colors

Although easier choice and manipulation of colors is essential, virtually every book on color stresses that it is the relationships between colors that determine their effect. The Contrast Nudger builds upon the Color Nudger with Thumbnails. It works in the same way, but changes the saturation or brightness contrast between two or more selected colors. Of multiply selected areas, increasing brightness contrast would cause dark areas to become even darker, and light areas even lighter. The same concept is used to increase saturation contrast: more saturated areas become even more vivid, and less saturated ones become even less vivid. In other words, increasing contrast along one of the axes pushes the colors further apart on that particular axis while decreasing contrast brings them closer together. Because this widget is showing color relationships, the user needs to see the entire image; therefore, we again display thumbnail versions of the image, this time at a target level of increased or decreased contrast along each axis.

Experimental UIs

We are using scientific visualization tools such as AVS to analyze the color structure of various types of visual work. We are also developing 3D visualizations of color parameters to help use think about their work in new ways. These techniques are also used in the educational programs discussed next.

One visualization technique which we're calling the Magic Carpet, lends itself to haptic modification with a combination sculpting and brushing technique, enabling the user to indicate color and form simultaneously, eliminating the extra steps needed to specify color separately in other interfaces.

Learn More About Color

In addition to the 2D Java work, we have created a series of fully three-dimensional educational exploratories for use on a desktop or in semi- and fully-immersive environments. The 3D experience has helped us to better understand different color spaces and their relationship to each other. Our current content in this series includes explorable situations that show different color spaces (such as Munsell, CIELab, etc.) using a variety of visualization techniques (falling "snow flakes", ramps to walk around on, slicing planes, and spiderwebs showing paths of changes in hue, saturation, and value, etc.).