L’effet aberration chromatique sur un site web

L’aberration chromatique est ce liseré rouge d’un côté, cyan de l’autre, qui borde les contours d’une image prise avec un objectif imparfait. La bibliothèque de l’atelier l’applique au texte, à un titre surtout : les lettres semblent sortir d’un écran, d’une caméra, d’une vidéo un peu poussée. On parle aussi de frange chromatique, et c’est le nom que lui donne l’atelier.

Ardoise et cobalt qui se replient lentement, sans effet — L’affiche du fond « Surfaces liquides », tourné par l’atelier. À droite, le même titre avec le traitement Frange chromatique de la bibliothèque, à son réglage par défaut.

La même image, avec un titre en Frange chromatique — L’affiche du fond « Surfaces liquides », tourné par l’atelier. À droite, le même titre avec le traitement Frange chromatique de la bibliothèque, à son réglage par défaut.

Sur la démonstration, le même titre est posé deux fois sur l’affiche. À droite, chaque lettre est bordée d’un fil rouge à gauche et d’un fil cyan à droite, à deux pixels de distance.

D’où vient l’effet

Le verre ne dévie pas toutes les couleurs de la même façon. Dans la plupart des verres optiques, les longueurs d’onde courtes, le bleu, sont plus fortement réfractées que les longues, le rouge (Nikon). Un objectif ne ramène donc pas toutes les couleurs d’un même point au même endroit.

Nikon en distingue deux formes. L’aberration axiale fait baver les couleurs devant et derrière le point de netteté. L’aberration latérale fait varier la taille de l’image selon la couleur : c’est elle qui produit les franges colorées, seulement vers les bords de l’image, et par paires de couleurs complémentaires, le rouge avec le cyan, le bleu avec le jaune. Les fabricants la combattent en associant des lentilles de verres différents, et avec des verres à faible dispersion ; le photographe la réduit encore en fermant le diaphragme.

Ce que l’optique corrige, l’image numérique l’a ensuite imité. Les moteurs de jeu vidéo proposent l’aberration chromatique comme un effet ajouté après le rendu : celui de Unity sépare les couleurs le long des contours de l’image, pour reproduire ce que fait un vrai objectif, et sa frange par défaut est rouge et bleue (Unity). Le défaut d’objectif est devenu le signe d’une image filmée, d’un écran, d’un signal un peu saturé. Sur le web, il sert le même propos, en plus discret.

Quand le poser

Aucune des vingt-quatre mises en page prêtes de l’atelier ne la pose d’office. Elle va aux métiers dont l’écran est l’atelier :

un studio 3D, un studio de motion design, un développeur de jeux ;
un label, un collectif de musique électronique, une salle de concert ;
un événement de nuit, un festival de films ;
une agence créative qui veut un titre qui accroche.

Elle se pose sur un grand titre, celui du premier écran par exemple, et sur quelques mots. Jamais sur un paragraphe.

Il vaut mieux s’en passer :

sur le texte courant : un contour dédoublé se lit moins vite, et fatigue l’œil sur la longueur ;
sur les petites tailles : le décalage est fixé en pixels, et deux pixels sur une lettre de 14 pixels la dédoublent franchement ;
pour un métier de confiance : un cabinet de santé, un avocat, un expert-comptable. Un titre qui semble baver y passe pour un défaut d’impression ;
avec une police très fine : un trait d’un ou deux pixels d’épaisseur disparaît entre ses deux franges. Une police grasse, aux formes simples, les porte bien mieux.

Le bon dosage

Dans la bibliothèque, la frange décale de 2 pixels une ombre rouge vers la gauche, à 55 % d’opacité, et une ombre cyan vers la droite, à 45 %, sans aucun flou. C’est discret sur un titre d’affiche, et c’est voulu : l’effet doit se remarquer à la deuxième lecture. Plus large, on quitte l’optique pour le « glitch » assumé, l’image numérique qui se déchire.

Parce que le décalage est en pixels, il ne grandit pas avec le texte : sur un titre de 80 pixels, les mêmes deux pixels se voient moins que sur un titre de 30.

Contrairement au duotone et à la lueur, la frange ne lit pas la palette du site : ses deux couleurs sont fixes, celles de l’optique.

La bibliothèque ne pose qu’un traitement à la fois. Les matières peuvent s’ajouter par-dessus, deux au plus : la trame, qui rappelle les lignes d’un moniteur, prolonge bien l’idée d’un écran.

Ce qu’il coûte

Presque rien. La bibliothèque applique la frange au texte plutôt qu’au média, et sa feuille de style dit pourquoi : sur une vidéo, il faudrait superposer trois copies de l’image, une par couleur, pour un coût sans rapport avec l’effet. Sur un titre, deux ombres suffisent.

Ces ombres n’ont pas de flou, et c’est ce qui les rend légères : tout ce qui demande un flou, une ombre floue par exemple, prend plus de temps à peindre qu’une forme nette (web.dev). Le titre ne bouge pas, la frange non plus : ni tremblement ni décalage animé, rien à recalculer à chaque image.

L’accessibilité

Le contraste. La lettre garde sa couleur ; seuls ses bords changent. Mesurez le contraste du titre sur l’image à l’endroit le moins favorable : au moins 3 pour 1 pour un grand titre, à partir de 24 pixels environ (18,5 en gras), et 4,5 pour 1 pour un texte courant (W3C, WCAG 2.2). Le W3C compte un contour étroit autour d’une lettre comme une partie de la lettre : la frange doit donc, elle aussi, se détacher du fond.
Le mouvement réduit. La frange est immobile. Quand le visiteur demande à son appareil moins d’animations (prefers-reduced-motion), la bibliothèque n’a rien à retirer.
Aucun clignotement. Le « glitch » se joue souvent en saccades : des couleurs qui sautent, des lettres qui tremblent. Ici rien ne bouge. Une page ne doit pas flasher plus de trois fois par seconde, sous peine de déclencher des crises chez les personnes photosensibles (W3C, critère 2.3.1).

Comment il est fait

Deux ombres de texte, text-shadow, sans flou. Chacune se décrit par un décalage horizontal, un décalage vertical, un flou facultatif et une couleur ; un décalage horizontal négatif envoie l’ombre à gauche (MDN). La bibliothèque règle l’écart par une variable, --frange, qui vaut 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);
}

Les ombres se dessinent sous la lettre. Là où elles la recouvrent, la lettre l’emporte, et il ne reste de chaque ombre qu’un fil sur un bord : toute l’illusion tient là.

Dans l’atelier

La frange chromatique est l’un des trois traitements de la bibliothèque, rangés à part des dix matières : elle se pose sur un texte choisi, au lieu de couvrir la page. Elle n’a pas d’étape à elle dans le parcours, et aucune des vingt-quatre mises en page prêtes ne la pose d’office.