Redundant Encoding: When Color Cannot Be the Only Signal

Color is a channel with a small capacity that is destroyed by a large set of ordinary conditions. Printed on a monochrome laser printer, a chart made of colored lines becomes a chart of identical gray lines. Viewed by someone with deuteranopia, red and green converge toward the same yellow-brown. Viewed on a screen in direct sunlight with the brightness at half, saturation drops and everything trends toward the same mid-tone. Any encoding that relies on hue alone fails in all three cases, and none of them are edge cases.

What the deficiency actually collapses

The most common forms of color vision deficiency are inherited alterations of the cone photopigments. Deuteranomaly, the most frequent, shifts the green cone’s response curve toward the red cone’s; deuteranopia removes the green cone’s separate response entirely; protanomaly and protanopia do the equivalent to the red cone. In all four, the result is that the difference between red and green shrinks or vanishes while the blue-yellow axis remains intact. Tritan defects, which affect the blue cone, are far rarer and collapse a different axis.

The important structural point is that these are not “less color”. They are a projection of the three-dimensional color space onto a lower-dimensional one, and the projection is not uniform: it compresses a specific plane while leaving others nearly untouched. A palette designed by walking the hue circle at even steps therefore does not degrade gracefully. It maps onto the surviving plane in a way that can put two neighboring steps on top of each other while leaving a large gap elsewhere.

The same collapse happens in grayscale, but with a different geometry: all hues project onto a single luminance axis. That projection is the one computed by relative luminance, and it makes the failure mode easy to predict: two colors with the same luminance become the same gray. A red-green pair chosen to look distinct can have near-identical luminance and vanish on a black-and-white printout, while a red-blue pair that looks less distinct on screen survives.

This is why the useful test is not “does this pass a color blindness simulator” but “does this survive a luminance-only rendering”. The first tests one particular projection; the second tests the most destructive one.

The channels that remain

Every visual encoding has a small set of separable channels, and hue is only one. Position along a common scale is the strongest: two marks at different x coordinates are distinguishable under every projection, because the reader is comparing locations rather than colors. Shape is next, and is the standard fallback for categorical series: a solid circle, an open circle, a square, a triangle, and a cross are distinguishable at small sizes and in monochrome. Texture — hatching, dot density, line dash pattern — survives grayscale well because it varies spatially rather than tonally. Direct labels eliminate the legend lookup entirely and are the most reliable option when the chart has room.

Size and line weight are weaker channels. They are separable in principle but they interact with the data: a thicker line implies more of whatever the chart measures, and a reader will interpret it as magnitude rather than identity. Using them for categories creates ambiguity that survives the accessibility fix.

The engineering trade is that redundant encoding costs visual bandwidth. A five-series line chart with distinct dash patterns and distinct marker shapes at every data point becomes cluttered; a scatter plot with five shapes at a thousand points becomes a texture of overlapping glyphs. Position-based separation, small multiples, or direct labeling usually beats stacking every channel on one plot. The choice is between a chart that is legible to everyone and slightly less dense, and a chart that is denser and illegible to some readers.

Encoding rules that hold in practice

For categorical series, the practical recipe is to assign each category a triple: a distinct position or ordering, a distinct shape or dash, and a color that differs in luminance as well as hue. The luminance separation is what makes the palette survive both grayscale and the common deficiencies, since the deficiency projections preserve the luminance axis reasonably well. A palette of five colors spaced along a monotonic lightness ramp and given different shapes satisfies both.

For ordered data, hue is the wrong channel entirely. A sequential scale should be a lightness ramp, because lightness is ordered and hue is not: readers can rank five steps of a gray ramp reliably and cannot rank five hues without a legend. Diverging scales need two ramps meeting at a neutral midpoint, and the midpoint must be visually neutral rather than a pale version of one of the poles.

For status, the convention of red for error and green for success is a case where the color carries a meaning that also needs text. The color alone is insufficient in both directions: a red asterisk next to a field says nothing to a reader who cannot see the red, and it also says nothing to a reader who does not know the convention. The text is the encoding; the color is emphasis.

What the markup layer can do

In HTML, the redundant channel is often available for free and simply unused. A required field can carry aria-required and a visible text marker. A validation error can be announced through the message text rather than through a red border. A chart in an image can carry a text alternative that names the series and, where the data matters, the values.

<!-- The legend swatch is decorative; the label carries identity. -->
<ul class="legend">
  <li><svg aria-hidden="true" class="swatch swatch-dashed"></svg>Baseline</li>
  <li><svg aria-hidden="true" class="swatch swatch-dotted"></svg>Projected</li>
</ul>

The aria-hidden on the swatch is correct here because the swatch conveys nothing the adjacent text does not. The inverse mistake is common: an icon that is the only label for a control, marked aria-hidden with no text alternative, leaving the control with no accessible name at all. Whether a graphic needs an alternative depends on whether it is redundant, and that question is answered by looking at what else carries the information, not by the graphic’s size.

Canvas and SVG charts have a harder version of this problem because the marks are not in the accessibility tree at all. A text summary, a data table rendered alongside, or a set of focusable data points with labels are the usual ways to expose the same information. Whatever route is taken, the non-visual version has to be checked in the same way the visual one is, and contrast checking in practice describes how that verification is actually carried out.

Verifying without guessing

The verification that actually finds defects is mechanical: render the interface to grayscale and check that every distinction survives, then check the palette against a simulation of deuteranopia, then check the same interface with the display at low brightness. Each test targets a different projection, and passing one does not imply passing another.

Automated tools can flag a small part of this: they can detect text whose color is the only difference from a sibling, and they can compute whether two colors in a declared palette are close under a given simulation. They cannot detect whether a chart’s series are distinguishable in a screenshot, whether a legend is positioned so that the reader must match by color, or whether a status indicator has text. Those require looking at the rendered result, which is why automated checks have a ceiling that manual inspection has to raise.