L’effet duotone sur un site web

Le duotone retire au fond ses couleurs d’origine et lui donne celles du site. L’image garde ses lumières et ses ombres, mais elle passe d’abord en niveaux de gris, puis reprend une teinte tirée de la palette. Une vidéo tournée dans les bleus, une photo prise au téléphone sous une lumière jaune, une scène générée aux couleurs imprévues : sous le duotone, toutes parlent la même langue que les titres et les boutons.

Sans

Duotone

Sur la démonstration, l’affiche ardoise et cobalt du fond « Surfaces liquides » prend les couleurs de cette vitrine : la braise en haut, le noir en bas. Les vagues, les reflets et les creux sont restés à leur place ; seules les couleurs ont changé.

D’où vient l’effet

Le mot vient de l’imprimerie. Un duotone est une image en niveaux de gris imprimée avec deux encres, le plus souvent un noir et une couleur ; avec une, trois ou quatre encres, on parle de monotone, de tritone ou de quadritone (Corel).

On s’en sert aujourd’hui surtout pour colorer une image, mais le but premier était technique : élargir la gamme des tons. Une seule encre noire ne sait pas rendre les gris les plus légers. En confiant les hautes lumières à une encre grise et les ombres au noir, l’imprimeur gagne des nuances dans le clair ; en imprimant le noir par-dessus le gris, il obtient un noir plus dense (CreativePro, 2013).

Un écran n’a pas d’encres. Le duotone du web est donc une approximation, et il s’assume comme tel : on désature l’image, puis on la colore avec un calque qui ne lui emprunte que sa luminosité. Le résultat a l’allure d’un duotone imprimé, sans en reproduire les courbes d’encre.

Quand le poser

Aucune des vingt-quatre mises en page prêtes de l’atelier ne le pose d’office. Dans la bibliothèque, il agit sur le fond seulement, quel que soit son type : la vidéo, son affiche, les scènes d’un fond en séquence, l’image du dessus d’un révélateur, la bande d’un fond défilant. Les photos d’une galerie gardent leurs couleurs.

Il sert quand :

• les couleurs du fond se battent avec celles du site : une scène tournée dans des bleus pour une marque tout en ocres, un ciel trop saturé sous un titre rouge ;
• les images viennent de partout et ne s’accordent pas entre elles ;
• la marque tient en une couleur forte, qu’on veut retrouver jusque dans l’image : une association et la couleur de sa campagne, un festival et son affiche, une agence créative, un label ;
• le fond est chargé et qu’on veut le calmer sans l’assombrir davantage : une image en une seule teinte retient moins l’œil qu’une image en couleurs.

Il vaut mieux s’en passer quand la couleur est le sujet : la cuisine d’un restaurant, les bouquets d’un fleuriste, les toiles d’un peintre, les tissus d’un tapissier. Une assiette passée à l’orange ne donne plus faim. Même prudence avec les visages : une peau teintée d’une couleur vive dérange vite.

Le bon dosage

Dans la bibliothèque, le média passe entièrement en niveaux de gris, avec un contraste relevé de 12 %, et le calque de teinte est posé à 85 % d’opacité. Sa couleur suit un dégradé en biais, de la couleur d’accent du site, en haut, à sa couleur de fond, en bas.

Ce dégradé a une conséquence à connaître. Le mode de fusion couleur (color) prend au calque sa teinte et sa saturation, et à l’image sa luminosité (MDN). Or un fond de site presque noir n’a presque pas de saturation : vers le bas, l’image reste donc presque grise, comme sur la démonstration. Avec un fond de site coloré, un bleu nuit, un vert bouteille, le duotone garde de la couleur jusqu’en bas de l’écran.

La bibliothèque ne pose qu’un traitement à la fois. Les matières, elles, peuvent s’ajouter par-dessus, deux au plus : la trame de points, héritée elle aussi de l’imprimerie, prolonge bien l’idée.

Ce qu’il coûte

Deux choses s’ajoutent au fond : un filtre CSS sur le média, et un calque immobile en fusion. Sur l’affiche, le filtre s’applique une fois. Sur une vidéo, il s’applique à chaque image du film, ce qui demande un peu de travail au navigateur pendant toute la lecture : c’est la raison de s’en tenir à un filtre simple, grayscale(), plutôt qu’à un traitement image par image plus fidèle.

Le calque de teinte, lui, ne bouge jamais. Un navigateur n’anime à peu de frais que la position et l’opacité d’un calque (web.dev) ; une teinte qui changerait avec le temps l’obligerait à repeindre le fond entier à chaque image.

L’accessibilité

• Le contraste. Le duotone change l’image qui se trouve derrière le titre du premier écran, et le contraste relevé peut faire naître des hautes lumières là où il n’y en avait pas. Mesurez le contraste du titre sur l’image teintée, à l’endroit le plus clair : au moins 4,5 pour 1 pour un texte courant, et 3 pour 1 pour un grand titre (W3C, WCAG 2.2).
• Le mouvement réduit. Le duotone ne bouge pas. Quand le visiteur demande à son appareil moins d’animations (prefers-reduced-motion), la vidéo du fond s’efface et son affiche reste : l’affiche est teintée comme la vidéo, et la page garde ses couleurs.
• Aucun clignotement. La teinte est fixe : elle ne pulse pas et ne change pas avec le temps.

Comment il est fait

Deux règles suffisent. La première passe le média en niveaux de gris, grayscale(1) valant une conversion complète (MDN), et relève un peu son contraste. La seconde pose sur le fond un calque coloré en mode de fusion color. Ce calque est un pseudo-élément, ::after : la feuille le dessine elle-même, et la page n’a aucun élément à prévoir pour lui. Là où la classe arrive, la teinte arrive.

.fond.fond--duotone .fond__video,
.fond.fond--duotone .fond__canevas,
.fond.fond--duotone .fond__affiche,
.fond.fond--duotone .fond__scene,
.fond.fond--duotone .fond__dessus,
.fond.fond--duotone .fond__bande { filter: grayscale(1) contrast(1.12); }

.fond.fond--duotone::after {
  content: ""; position: absolute; inset: 0;
  mix-blend-mode: color;
  background: linear-gradient(160deg, var(--accent), var(--bg));
  opacity: var(--duotone, .85);
}

Les deux règles demandent la classe fond en plus de fond--duotone. Égarée sur une autre balise, sur le corps de la page par exemple, la classe ne fait donc rien : sans cette garde, le calque de teinte couvrirait le texte de toute la page.

L’ordre compte. Sans la désaturation préalable, un calque en fusion color laisse ressortir par plaques les couleurs les plus vives de l’image d’origine : c’est pourquoi la bibliothèque passe d’abord par le filtre. Et parce que la teinte lit --accent et --bg, changer la palette du site change la couleur du fond.

Dans l’atelier

Le duotone est l’un des trois traitements de la bibliothèque, rangés à part des dix matières parce qu’ils changent l’image au lieu de se poser dessus. Il n’a pas d’étape à lui dans le parcours, et aucune des vingt-quatre mises en page prêtes ne le pose d’office.