The chromatic aberration effect on a website

Chromatic aberration is that red edge on one side, cyan on the other, that borders the outlines of an image taken with an imperfect lens. The studio’s library applies it to text, mostly to a title: the letters seem to come out of a screen, a camera, a slightly pushed video. It is also called color fringing, and that is the name the studio gives it.

Liquid care, slow gestures.Without

Liquid care, slow gestures.Color fringe

On the demo, the same title is set twice on the poster. On the right, each letter is edged with a red thread on the left and a cyan thread on the right, two pixels apart.

Where the effect comes from

Glass doesn’t bend all colors the same way. In most optical glasses, short wavelengths, blue, are refracted more strongly than long ones, red (Nikon). A lens therefore doesn’t bring all the colors of one point back to the same place.

Nikon distinguishes two forms. Axial aberration makes colors bleed in front of and behind the point of focus. Lateral aberration makes the image size vary with the color: it is the one that produces colored fringes, only toward the edges of the image, and in pairs of complementary colors, red with cyan, blue with yellow. Manufacturers fight it by combining lenses of different glasses, and with low-dispersion glass; the photographer reduces it further by stopping down the aperture.

What optics corrects, digital imagery later imitated. Video game engines offer chromatic aberration as an effect added after rendering: Unity’s separates the colors along the edges of the image, to reproduce what a real lens does, and its default fringe is red and blue (Unity). The lens flaw became the sign of a filmed image, a screen, a slightly saturated signal. On the web, it serves the same purpose, more discreetly.

When to use it

None of the studio’s twenty-four ready-made layouts applies it by default. It suits trades whose workshop is the screen:

• a 3D studio, a motion design studio, a game developer;
• a label, an electronic music collective, a concert venue;
• a night-time event, a film festival;
• a creative agency that wants a title that grabs attention.

It goes on a large title, the first screen’s for example, and on a few words. Never on a paragraph.

It is better left out:

• on body text: a doubled outline reads more slowly, and tires the eye over length;
• at small sizes: the offset is fixed in pixels, and two pixels on a 14-pixel letter clearly double it;
• for a trade built on trust: a health practice, a lawyer, an accountant. A title that seems to bleed passes for a printing flaw there;
• with a very thin typeface: a stroke one or two pixels thick disappears between its two fringes. A bold typeface, with simple shapes, carries them much better.

The right dose

In the library, the fringe offsets a red shadow by 2 pixels to the left, at 55% opacity, and a cyan shadow to the right, at 45%, with no blur at all. It is discreet on a poster title, and that is intended: the effect should be noticed on the second reading. Wider, you leave optics for an outright “glitch”, the digital image tearing apart.

Because the offset is in pixels, it doesn’t grow with the text: on an 80-pixel title, the same two pixels show less than on a 30-pixel one.

Unlike duotone and glow, the fringe doesn’t read the site’s palette: its two colors are fixed, those of optics.

The library applies only one treatment at a time. Textures can be added on top, two at most: scan lines, which recall a monitor’s lines, extend the idea of a screen well.

What it costs

Almost nothing. The library applies the fringe to text rather than to media, and its stylesheet says why: on a video, three copies of the image would have to be stacked, one per color, at a cost out of proportion with the effect. On a title, two shadows are enough.

These shadows have no blur, and that is what makes them light: anything that requires a blur, a blurred shadow for example, takes longer to paint than a sharp shape (web.dev). The title doesn’t move, and neither does the fringe: no trembling or animated offset, nothing to recompute every frame.

Accessibility

• Contrast. The letter keeps its color; only its edges change. Measure the title’s contrast on the image at the least favorable spot: at least 3 to 1 for a large heading, from about 24 pixels (18.5 in bold), and 4.5 to 1 for body text (W3C, WCAG 2.2). The W3C counts a narrow outline around a letter as part of the letter: the fringe must therefore also stand out from the background.
• Reduced motion. The fringe is still. When the visitor asks their device for less animation (prefers-reduced-motion), the library has nothing to remove.
• No flashing. “Glitch” is often played in jolts: colors jumping, letters shaking. Here nothing moves. A page must not flash more than three times per second, or it may trigger seizures in photosensitive people (W3C, criterion 2.3.1).

How it is made

Two text shadows, text-shadow, with no blur. Each is described by a horizontal offset, a vertical offset, an optional blur and a color; a negative horizontal offset sends the shadow to the left (MDN). The library sets the gap with a variable, --frange, set to 2:

.m-frange {
  text-shadow:
    calc(var(--frange, 2) * -1px) 0 0 rgba(255, 60, 60, .55),
    calc(var(--frange, 2) *  1px) 0 0 rgba(0, 220, 255, .45);
}

The shadows are drawn under the letter. Where they overlap it, the letter wins, and all that remains of each shadow is a thread on one edge: the whole illusion lies there.

In the studio

Color fringing is one of the library’s three treatments, kept apart from the ten textures: it sits on a chosen text, instead of covering the page. It has no step of its own in the flow, and none of the twenty-four ready-made layouts applies it by default.