Pourquoi les Cartes « En Écoute » Ressortent Grises

Une carte « en écoute », ce sont deux décisions de couleur et un peu de mise en page. Les deux décisions sont d’ordinaire prises par une seule ligne de code, et les deux sont fausses d’une manière qui se mesure en une seconde chacune.

La première ligne tire le fond de la moyenne de la pochette. La seconde écrit le texte en blanc. Voici ce que chacune fait réellement.

La moyenne d’une image est une couleur que l’image ne contient pas

Prenez six bandes égales de teintes pleinement saturées — rouge, jaune, vert, cyan, bleu, magenta — et moyennez chaque pixel. La réponse est rgb(128, 128, 128). Saturation 0,0. Du gris exact, à partir d’une image qui ne contient de gris nulle part.

Ce n’est pas la bizarrerie d’une seule image fabriquée. Nous en avons mesuré trois :

Dans les trois cas, la couleur moyenne était absente de la pochette. Moitié rouge sur moitié bleu donne du violet ; il n’y a pas de violet dans l’image. Vert sur presque noir donne un vert plus sombre et plus terne que le vert qui s’y trouve.

Et le motif derrière tout cela est ce qui compte : plus la pochette est colorée, plus sa moyenne est grise, parce que les teintes opposées s’annulent. Une pochette franche reçoit une carte terne. Une pochette monochrome en reçoit une fidèle. C’est exactement l’inverse de ce que veut quiconque, et c’est pourquoi tant de ces cartes ressemblent au même rectangle délavé quoi qu’on leur donne.

Que choisir à la place

Le correctif consiste à choisir une couleur réellement présente dans l’image. Quantifiez la pochette en seaux — seize niveaux par canal suffisent largement —, comptez les pixels de chacun et prenez-en un peuplé, pondéré vers la saturation pour que le blanc du papier et le noir de l’ombre ne l’emportent pas par simple surface.

Sur la pochette à six teintes, cela renvoie un rouge que l’image contient vraiment. Sur une vraie pochette, cela renvoie la couleur que vous auriez désignée du doigt. La différence est un passage sur une vignette de 96 × 96, qui ne coûte rien.

Le texte blanc échoue sur près de deux tiers des couleurs

Passons à la seconde ligne. Quelle que soit la couleur sortie de la première étape, le texte s’y pose en blanc.

Nous avons échantillonné 636 056 couleurs du cube sRGB et calculé le rapport de contraste WCAG de chacune contre le blanc et contre le noir. 4,5:1 est le seuil du texte courant :

Une carte qui écrit toujours en blanc passe sous le seuil de lisibilité sur 63,6 % des couleurs sur lesquelles elle peut tomber. Pas illisible de façon spectaculaire — c’est lisible sur votre propre écran, en grand, quand vous savez déjà ce qui est écrit. Cela cesse de l’être sur le téléphone de quelqu’un d’autre, en plein jour, en taille de vignette, c’est-à-dire au seul endroit où cela sera réellement vu.

Celle-là, vous n’avez jamais à la perdre

Voici la partie qui vaut d’être connue, et elle est plus forte qu’une heuristique.

Nous avons parcouru les 16 777 216 couleurs sRGB — l’espace entier, pas un échantillon — et retenu, pour chaque couleur, le meilleur de son contraste contre le blanc et contre le noir. Le pire cas de tout le cube est 4,58:1, à rgb(207, 13, 204).

4,58 est au-dessus de 4,5. Il n’existe aucune couleur de fond sur laquelle le blanc et le noir échouent tous les deux au seuil. Choisir entre eux couleur par couleur n’est pas une règle empirique qui marche souvent ; c’est lisible par construction, partout, et cela coûte une comparaison :

function pickText(bg) {
    return contrast(bg, WHITE) >= contrast(bg, BLACK) ? WHITE : BLACK;
}

Le chiffre mesuré n’est pas non plus un artefact du parcours. Il correspond exactement à la forme close. Le contraste contre le blanc baisse à mesure que le fond s’éclaircit et le contraste contre le noir monte, si bien que le pire cas se situe au croisement des deux courbes — à la luminance relative √(1,05 × 0,05) − 0,05 = 0,1791, ce qui donne 1,05 / 0,2291 = 4,5826. Le parcours exhaustif et l’algèbre s’accordent à quatre décimales.

La troisième petite chose

Tant qu’on y est : les titres de morceaux sont longs, et la plupart des générateurs les laissent déborder du bord de la carte ou rétrécissent la police jusqu’à ce que la ligne de l’artiste ait l’air d’un autre design. Un canvas sait mesurer du texte — ctx.measureText(s).width — donc le comportement honnête consiste à mesurer, tronquer par des points de suspension à la largeur disponible, et laisser le corps tranquille. Cela fait trois lignes et personne ne le fait.

Que faire quand vous en fabriquez une

• Tirez la couleur de la carte de la pochette, pas d’une moyenne de celle-ci. La moyenne est en général une couleur que la pochette ne contient pas, et plus la pochette est colorée, plus elle devient grise.
• Choisissez la couleur du texte par contraste, pas par habitude. Elle ne peut pas échouer : le pire cas sur tout l’espace colorimétrique est 4,58:1.
• Regardez le nombre, pas votre œil. Vous savez déjà ce que dit le titre, ce qui fait de vous le pire juge possible de sa lisibilité.
• Mesurez les titres longs et tronquez-les, au lieu de les laisser dépasser du bord ou de rétrécir la typographie.

Essayez

Notre générateur de carte en écoute fait tout ce qui précède et vous montre la seconde carte à côté de la vôtre — couleur moyenne, texte blanc, à la manière habituelle — pour que la différence se voie plutôt que de s’affirmer. Il indique le rapport de contraste obtenu et celui qu’aurait donné le texte blanc. Tout se passe dans votre navigateur ; la pochette n’est jamais envoyée.

Si la pochette n’est pas encore carrée, le redimensionneur d’images s’en charge d’abord, et le vérificateur de zone sûre montre ce que l’interface d’une story recouvrira une fois la carte publiée.

Questions fréquentes