Apr 25, 2026 Tech Brief

The Color Design Insight We Don't Know We Know

Already in vision science. Already in VR research. Coming to design.

Red means error, danger, urgency, destruction. Blue means information, default action, system state. The major design systems (Material, Carbon, Bootstrap) lean this way. It's the dominant convention. The peripheral retina, where most of a screen sits at any given fixation, treats red and blue differently.

The understanding isn't new. The Impressionists were designing for the periphery in the 1880s; Mullen and Kingdom mapped the chromatic-channel asymmetry across the visual field in 2002; Margaret Livingstone carried the vision-and-art story to the HCI community in her UIST 2012 keynote; AR/VR rendering research exploits peripheral colour insensitivity for power savings.

Quick orientation before we start: periphery here means everything beyond a few degrees of where your eye is currently pointing, which at typical desktop viewing is most of your screen.

Side-view diagram of a person at a 24-inch monitor 60 cm away, with nested foveal (±2°), parafoveal (±5°), and peripheral (±15°) cones drawn from the eye to the screen plane, plus tick-mark labels showing what eccentricities map to fixation point, the next paragraph, the nav bar, browser tab corner, and the edge of the screen
Foveal vision (±2°) covers about a line of body text. Parafoveal (±5°) extends a few inches. Peripheral (±15°) reaches the corners of a typical monitor. The chromatic asymmetry this post is about matters most in the ±5°–±15° band, away from the point of gaze and still on screen.

What the painters found, and what they couldn't

Painters worked this same edge for centuries, and Seurat is the cleanest case. In A Sunday on La Grande Jatte (1884), your retina does the chromatic mixing. Each dot is a single unmixed pigment. Stand close and the surface is visibly stippled; step back and each dot subtends a smaller visual angle, so the visual system integrates the marks into lawn, parasols, river. Away from fixation, peripheral pooling accelerates the same effect.

Seurat's A Sunday on La Grande Jatte, central group Original
La Grande Jatte, high-frequency dot texture only High frequencies
La Grande Jatte, low-frequency band where chromatic mixing happens Low frequencies
Seurat's A Sunday on La Grande Jatte (1884). The chromatic mixing of the dots happens on your retina.

That is the half the painters could reach by eye: the periphery discards fine spatial detail and pools what remains, so marks below the resolving scale merge into form. Sfumato's soft edges, Impressionist broken colour and Pointillist dots each made the same discovery: the visual system assembles an image the surface only suggests. It is the spatial-frequency story Rosenholtz's pooling models formalize and the one Livingstone carried to HCI, built on the Mona Lisa's low-spatial-frequency smile.

Spatial frequency is half the story, and that half hides the part this post is about. What no painter could isolate, because nothing in the practice would reveal it, is that the periphery sheds colours at different rates. One chromatic channel falls off fast; the other declines much more slowly. That asymmetry never entered the art-historical account, and the design consequences follow from it.

The asymmetry

Color vision depends on two opponent channels. Red-green (L-M) opponency is strongest in the central retina: its high-acuity form relies on midget ganglion cells wired near 1:1 to individual L and M cones, a circuit that degrades rapidly as retinal sampling becomes coarser. For low-spatial-frequency (0.3 c/deg) isoluminant gratings (the standard stimulus class in Mullen & Kingdom 2002), sensitivity falls steeply with eccentricity, down ~50% by 8–10° and substantially weakened by 20°. The exact loss depends on stimulus size, luminance contrast, and spatial frequency. At 20° the channel is weaker but still measurable.

“Colors are only symbols. Reality is to be found in luminance alone.”

Blue-yellow (S-(L+M)) opponency has different hardware, including dedicated S-cone bipolar pathways, and remains measurable much farther into the visual field. S-cone sensitivity stays appreciable out to ~40–50° eccentricity. The ingredients of this pathway are evolutionarily ancient: short-wavelength-sensitive cones and comparisons against longer-wavelength signals long predate the recent primate L/M duplication.

At a typical desktop setup (a 24-inch monitor at about 60 cm), the full screen subtends on the order of tens of degrees horizontally. Fixate the middle of a paragraph and a nav bar, tab strip, notification tray, or corner badge can easily sit 8–20° away, in the zone where red-green chromatic resolution is already substantially weakened.

The practical consequence is for colour identity. Detection holds up better. A bright red badge at 15° eccentricity may stay perfectly detectable on luminance contrast (you see something in the nav bar) while its specifically red identity becomes unreliable. A blue badge of matched size and luminance retains its chromatic identity further out, on the more eccentricity-tolerant blue-yellow channel. Detection, localization, colour-naming, and semantic interpretation are separable: the asymmetry bites hardest on naming and on hue-only carriers, less on signals backed by luminance, size, shape, motion, or position. The familiar cart-icon-with-bubble pattern works for this reason: your peripheral vision picks up the shape change (icon → icon-plus-appendage). The red signals meaning once you foveate; the shape signals which icon changed before you do.

Same e-commerce screenshot rendered foveally vs through a peripheral filter at fixed gaze: red sale badges and notification dots collapse to luminance smudges; the blue category chips and yellow accents persist
Same screenshot, same fixation. Red sale badges fade to luminance smudges off-axis; blue and yellow chips hold their hue. Castle­CSF per-pixel attenuation, fixation marked.

EXIT signs: the live debate

US building codes (NFPA 101 / IBC) require EXIT signs to be "distinctive in colour" without naming a colour. Some jurisdictions require green; many default to traditional red. The international standard (ISO 7010) chose white-on-green running-man.

In a fire evacuation, your fovea is on the path ahead. The sign sits at 15–30° eccentricity. At those distances a red sign's chromatic identity becomes much less reliable than its luminance contrast with the wall; a green or yellow-green sign typically has both higher luminance and a chromatic carrier on a more eccentricity-tolerant axis. That gives the green/yellow-green case a plausible perceptual advantage as a testable hypothesis, matched for size, luminance, smoke, illumination, and placement. Real evacuation performance still has to be measured; familiarity, mounting, and lighting may dominate. The peripheral colour science doesn't currently enter the standards conversation at all.

Signs already did the work

The FHWA exploited something in this neighborhood when they moved school zone signs from standard yellow to fluorescent yellow-green. The stated rationale was "detection distance" and "conspicuity". Cone opponency was not part of it. Conspicuity gains there are multi-causal (high luminance, high saturation, retroreflective/fluorescent materials, contrast against natural backgrounds), so any contribution from the more eccentricity-tolerant blue-yellow mechanisms is one component among several. But the direction of travel is consistent with the channel asymmetry.

The pattern shows up across the whole MUTCD road-sign palette when you read it that way: red (STOP, YIELD) for signs that demand foveal fixation, where L-M runs at full strength; yellow for transitional warnings noticed peripherally and foveated to read; green for guide signs scanned at higher luminance; and blue (SERVICES) for ambient peripheral awareness of gas, food and hospitals, the things you want to detect far off-axis without breaking your forward gaze. The hierarchy was assembled empirically and the MUTCD doesn't cite cone opponency, but the gradient is at least compatible with the eccentricity story. Stop signs are foveal signals. The octagon supports peripheral detection (shape survives eccentricity better than colour), and red signals urgency once you're already looking. EXIT signs are the opposite case, detected peripherally while moving, which is why the chromatic-channel argument applies so differently to each.

Physical signage took a century of iteration to converge here, and it converged through redundancy: shape and colour and luminance and placement all carrying part of the load. Screens are younger and haven't had that century yet.

Street scene through Scrutinizer's peripheral filter, fixated on the white STOP painted on the road: the foveal region holds detail; the red octagonal stop sign in the upper-right corner desaturates and loses chromatic identity at peripheral eccentricity
A Scrutinizer pass with fixation on the painted STOP. Foveally that word stays sharp. The red octagonal stop sign in the upper-right corner sits at peripheral eccentricity. Its red identity desaturates first, and its shape stays recognizable.

What this means for screen design

In the periphery, a red badge recruits attention through its luminance, size and shape. Its hue starts working once you look at it.

The convention that red = urgent is miscalibrated for peripheral visibility. Red works at the fovea, once you're already looking directly at it, because L-M opponency runs at full strength only in the densely-packed central retina. A notification's whole job is to recruit your attention before you're looking at it, from the periphery, where the colour has already faded.

Luke Wroblewski's form-design guidance already has the synthesis: red so the user reads "error" the moment they look, plus icon, label, inline message, position next to the field. Peripheral colour loss is why every cue except the hue is non-negotiable. Red conveys the meaning once the user looks, and the other cues show which field to look at.

A real shop nav bar shown two ways, each foveally and at 15° eccentricity. Top row keeps the red carriers (Sale link, cart count-badge, -20% discount chip), which desaturate toward grey and brown off-axis. Bottom row recolours the same carriers onto the blue-yellow axis (blue Sale link and -20% chip, amber count-badge), which keep their hue at the same eccentricity.
The shop's own nav bar. The red carriers (the Sale link, the cart count-badge, the -20% chip) were recoloured onto the blue-yellow axis in the page's HTML and recaptured, then run through the same filter. At 15° off-axis the red versions ghost toward grey; the blue and amber ones hold. The carriers that survive are blue and yellow. Green shares red's L-M axis and fades the same way, so it is not a safe substitute.

The gap in the standards

The major guideline documents do not mention the chromatic asymmetry. WCAG specifies foveal text contrast thresholds and warns about red-green colour blindness for the ~8% of men who have it; it says nothing about the chromatic decay that affects 100% of viewers everywhere except the central 2°. Material Design teaches token systems and accessible contrast pairs. Apple's HIG engages vision science more than the others (the visionOS section reasons about gaze targeting at the shape level) but never crosses from references to gaze and field-of-view into a per-colour rule like "if a status indicator sits beyond 10° of likely fixation, prefer the blue-yellow channel." That rule could be tested and prototyped; the science is sufficient.

Why design education hasn't caught up

Design schools teach colour the way Albers and Itten taught it: hue, saturation, value, simultaneous contrast, complementary pairings, perceptual mixing. That curriculum is foundational and says nothing about cone biology. You can earn a design degree without ever encountering "L-M opponency" or "S-cone bipolar wiring," because design is still taught largely in art schools (RISD, Parsons, SVA, ArtCenter) and vision science is mostly in psychology departments and human-factors labs (Wisconsin, NYU, MIT BCS). Different journals, different conferences, different career tracks. The fields don't share readers. A finding that's been textbook for 25 years in vision science can be entirely novel to a working designer, even a senior one. The structural problem is geometric too: web designers compose components inside viewport-bounded rectangles reviewed at the fovea on a Figma canvas, and chromatic-stability-across-eccentricity is a property the rectangle can't reward.

AR/HUD makes this urgent

Screens at least sit in front of you, where you can foveate the bits you care about. Augmented reality (AR) and head-up displays don't. A status indicator in an AR overlay sits at 15–30° eccentricity by design. A small red urgency indicator in that zone is, by the math above, at risk of becoming mostly a luminance dot. The same goes for cockpits, driver-assist HUDs, surgical mixed-reality, and ambient smart-home displays, and anywhere else the fovea is meant to stay on a primary task while alerts arrive in the periphery.

Aviation HUD doctrine arrived at a compatible answer through task-priority logic. Red is reserved for warnings that demand foveation, paired with flashing, audio, and central placement (SAE ARP4032/4102, FAA AC 25-11). The redundancy is what makes the "red = warning" convention survive the periphery. Modern AR overlays putting hue-only red status icons in the periphery without flashing or shape redundancy are a regression from a design tradition that already converged on the right answer for adjacent reasons.

The gap is closing

Cone-opponent sensitivity has a strong central peak for red-green and a much shallower decline for blue-yellow. Modern UI conventions (red-for-error, blue-for-info, urgent-things-glow-red) were assembled at the centre. Most of the time the user's gaze is elsewhere.

The future is already here — it's just not evenly distributed. Some shops absorbed the cone-opponency science years ago: Apple has had vision scientists on display teams for decades (Andrew Watson, formerly of NASA Ames's Vision Group, is Apple's Chief Vision Scientist). AR/VR rendering research uses peripheral colour insensitivity as a power lever. Recent work shifts off-axis pixel colours within a gaze-contingent colour-discrimination model, cutting VR display power by up to 24% without changing luminance.

Most design tooling didn't get the memo. Doug Bowman's 2009 "Goodbye, Google" essay is the famous artifact: designer intuition vs A/B-tested data, with the eye nowhere in either argument.

What might be changing now is the cross-disciplinary plumbing. The gap stayed open because vision science, HCI, and design didn't share readers. Livingstone's framing was delivered to HCI's flagship venue in 2012 and still didn't migrate into design tooling. AI tools at least offer a different shape: a designer asking about a red error state can be pulled into the cone-opponency literature in a single conversation. Whether that moves findings from Vision Research into design tooling is a separate empirical question. This post is one experiment in that direction.

Keep red. It still does extraordinary foveal work, and luminance, shape, motion and position do most of the remaining work. The problem is red alone at eccentricity. Audit for the whole visual field: saturation, size, and shape redundancy on off-axis alerts; blue-yellow as the chromatic carrier when colour itself is doing the work; a peripheral simulator in the loop.

Which palette of N hues is most discriminable in the periphery is an open question. The standard categorical palettes (ColorBrewer, Wong, IBM, Tol) are all tuned for foveal reading, and nobody has published the peripheral-categorical experiment. As an untested working hypothesis, 2 splits probably ride cleanly on the blue/yellow axis (both surviving opponent dimensions); 3 splits add luminance as the third channel; 4+ runs out of hue fast, and the design has to add shape, position, or motion as parallel carriers. Real psychophysical work on this would be welcome.

Read more

Painters and peripheral vision

Cone opponency and the eccentricity gradient

Apple, design systems, and form-design empiricism

Standards referenced

Tools