Color Palettes

Color palettes may be a tool for allowing a user agent or script to customize graphics. Theoretically a color palette could be swapped to make the graphic more interpretable. In intelligently swapping color palettes a script or user agent needs to know:

what color is used for text
what color is used for the background
what colors are used to represent a categorical variable
what colors are used to represent continuous variable

Examples and approach

File

File:Palette.zip

Issues marking up color legends

Color legends for a continuous variable may be difficult to mark up for assistive technologies, because there may not be a 1:1 color swatch/label match. Color legends for a continuous variable can be of 3 commonly used types - a swatch legend, stagger legends and continuous legends.

Swatch color legend

Swatch color legends are used for mapping categorical scales to colors. Swatch color legends have a 1:1 relationship between a color swatch and a label. That is the label describes the category with that color. Swatch color legends can be used with continuous color scales as well. When used with continuous color scales a ordered list of color swatches and corresponding values are shown to the user. Usually the values are evenly spaced, but non linear scales may be used. It would be poor practice to use unevenly spaced values when using a linear scale. A user is left to mentally interpolate colors for intermediate values.

Stagger color legend

Stagger color legends are a hybrid representation between a swatch color legend and continuous color legend. Stagger legends provide a discretized view of a continuous scale. For some users, this is the easiest form of continuous color legend to interpret, since they have a finite number of colors to work with and each color has enough area to clearly see.

Stagger legends show a contiguous area with a stack of colored blocks running up the scale. In a stagger legend, the labels align with the boundary of the blocks - not the center of the block. The color of a block is the mid value between the two labels. For example, a block with labels of 10 and 20 on it's boundaries would have the color for the value 15.

Stagger legends do not have a 1:1 label to color swatch relationship. In swatch legends there is one more label than color swatches and the color value is the mid value between two labels.

Continuous color legend

A continuous color legend resembles an analog thermometer; it has labels along a long bar. The fill in the bar may use a gradient to smoothly transition between colors. In theory, this legend provides the widest view of colors in a scale and gives the best capability to find a color and interpolate a value. However, many folks find a continuous gradient hard to deal with especially when trying to interpolate a color in a data item not near the legend.

The gradient used in the continuous color legend in the ColorLegends.png image is given below.

   <linearGradient id="0" gradientUnits="userSpaceOnUse" y1="35" x2="0" y2="371">
     <stop stop-color="#f00" />
     <stop offset=".5" stop-color="#fff5e6" />
     <stop offset="1" stop-color="#008000" />
   </linearGradient>

Continuous color legends have only 1 bar (swatch) containing color and usually has many labels and thus does not have a 1:1 color swatch to label relationship. Generally two forms of continuous color scales are used. Sequential color scales have two terminal colors, that is the transition from a color at one end to a color on the other end of the scale. A diverging color scale is usually defined by three terminal colors and acts like two sequential color scales with a common terminal value. The continuous color scale in the picture ColorLegends.png use a diverging color scale with the terminal colors of green, white and red. That is the lowest value corresponds to green the mid value corresponds to white with a continuous gradient between green to white in the lower half of the scale and a continuous gradient between white and red on the upper half of the scale. ColorBrewer 2 shows effective sequential and diverging color scales they recommend for maps. Note many of their diverging scales a light color for the middle terminal value.

Markup issues

An approach to marking up legends is to markup the legend item swatch (symbol), linking the label through aria-labeledby and potentially providing a desc child to describe the swatch. This uses the 1:1 relationship between a label and a swatch. This approach works well with a swatch legend.

A stagger legend does not have a 1:1 label to swatch relationship and the swatch value is the mid point between the two labels on the bounds of the swatch block. On a stagger legend should assistive technologies be made aware of the label values, swatch color values or both?

A continuous color legend does not have a 1:1 label to swatch relationship and the single swatch contains a gradient of values over the entire color range. In the example image, 11 labels are used on the continuous legend.