Les couleurs qui survivent au fil YouTube

Deux problèmes distincts sous une seule question

« Quelles couleurs marchent sur une miniature » est en réalité deux questions aux réponses différentes, et les mélanger explique pourquoi les conseils trouvés sont si vagues.

La première est la séparation d'avec l'interface : votre cadre a un bord, et ce bord touche directement le fond de YouTube. Celle-ci se calcule, et c'est l'essentiel de ce guide.

La seconde est la séparation d'avec les voisines : à l'intérieur du cadre, vous ne concourez pas contre l'interface mais contre les autres miniatures de la rangée. Celle-là n'a pas de réponse universelle, car elle dépend entièrement de ce à quoi ces miniatures ressemblent.

L'interface est exactement l'une de deux couleurs

La page de YouTube est presque noire en mode sombre et blanche en mode clair. La valeur sombre est #0F0F0F, assez proche du noir pour que la penser comme du noir soit l'erreur : c'est un gris foncé, et une miniature vraiment noire est plus sombre que la page qui la porte.

Vous ne pouvez pas savoir laquelle des deux un spectateur utilise. Le même fichier doit tenir sur les deux, ce qui signifie que le contraste utile d'une couleur n'est pas son meilleur cas mais son pire.

Ces deux valeurs sont celles que reproduit la maquette de l'outil d'aperçu, et la raison pour laquelle il a un interrupteur clair/sombre : c'est le même fichier face aux deux fonds où il va réellement atterrir.

Ce que disent les chiffres

Rapports de contraste, calculés de la manière standard, pour une série de couleurs que vous pourriez plausiblement placer au bord d'une miniature. La dernière colonne est celle qui compte, car c'est le cas que vous ne pouvez pas écarter : Ce sont des rapports de contraste au sens où les WCAG les définissent : les chiffres signifient donc ici la même chose que partout ailleurs sur le web.

Ils mesurent la séparation entre deux couleurs pleines, pas la lisibilité du texte — celle-ci a ses propres chiffres, dans le guide sur la taille du texte. Lisez le tableau ainsi : à quel point voit-on la limite où ma miniature s'arrête et où la page commence.

Le résultat est l'inverse du conseil habituel

Parcourez la dernière colonne : le schéma n'est pas celui que prédit « utilisez des couleurs vives ». Les options les plus lumineuses sont les plus mauvaises, car vif veut presque toujours dire forte luminosité, et une forte luminosité est invisible sur du blanc.

Un bord blanc donne 1,0:1 en mode clair : littéralement aucune limite. Jaune, cyan et gris clair font à peine mieux, entre 1,3 et 1,5. Tous sont magnifiques sur une capture en mode sombre — c'est exactement ainsi qu'on les choisit.

Les couleurs qui survivent aux deux fonds sont les saturées de luminosité moyenne : rouge, bleu, magenta, orange, et même un gris moyen quelconque. Aucune ne remporte l'une des deux colonnes, et c'est le point : ce sont les seules qui ne perdent jamais gravement.

Où cette règle s'applique, et où non

C'est une règle sur la bande extérieure du cadre, pas sur toute la création. Le centre d'une miniature ne touche jamais l'interface : un centre blanc n'est donc pas un problème, un bord blanc si.

Contrainte plus petite qu'elle n'en a l'air, et très précise : ce sont les derniers pour cent du cadre qui décident si votre miniature se lit comme un objet posé sur la page ou s'y dissout. Un bord qui bave n'est pas seulement négligé : il rend la miniature plus petite, car la partie dissoute dans le fond cesse de compter comme la vôtre.

À l'intérieur du cadre, la compétition change

Dès que le bord tient, la couleur cesse d'être un problème mesurable pour devenir comparatif. Il n'y a pas de meilleure couleur pour l'intérieur d'une miniature, car la seule chose qui compte est ce qui se trouve à côté.

Une miniature rouge saturée ressort dans une rangée de gris éteints et disparaît dans une rangée de rouges saturés — et la rangée n'est pas de votre choix. Dans la plupart des niches la convention converge, ce qui veut dire que la couleur qui paraît la plus professionnelle est aussi celle que tout le monde utilise.

D'où le fait que la bonne question n'est jamais « quelle couleur est la meilleure » mais « quelle couleur manque ici ». Regarder votre création dans le fil où elle apparaîtra y répond en quelques secondes, et aucune théorie ne le fait.

La teinte lâche avant la luminosité

Une raison de plus de penser en clair et sombre plutôt qu'en noms de couleurs : à la taille où une miniature est réellement vue, le contraste de teinte est le premier à s'effondrer.

Rouge sur bleu est vif en taille réelle et boueux en taille de tuile, car quelques pixels de chacun sont moyennés et ce qui survit est leur luminosité voisine. Clair contre sombre survit au même traitement, car moyenner du clair et du sombre laisse encore un écart.

La vérification consiste à regarder la création en niveaux de gris. Si elle s'effondre sans couleur, c'est la couleur qui la portait — et la taille d'affichage emporte la couleur en premier.

Le liseré blanc, et quand c'est une béquille

Un fin liseré blanc ou vif autour de toute la miniature est le remède standard au bord qui bave, et il marche — en mode sombre. En mode clair, c'est le cas invisible du tableau : un liseré choisi pour un thème peut être aucun liseré dans l'autre.

La version qui survit aux deux est un liseré de luminosité moyenne, ou un bord bicolore, ou simplement une composition dont la bande extérieure porte du demi-ton plutôt qu'un extrême. Cette dernière est la seule qui n'a jamais l'air d'un expédient.

Il vaut aussi la peine de se demander si le liseré résout un problème ou le masque. Une création sans sujet clair ne devient pas plus claire avec un cadre autour : elle devient une création peu claire, encadrée.

Une vérification de trois minutes

Rien de tout cela n'exige une théorie des couleurs. Il faut trois regards sur le même fichier, dans l'ordre qui trouve les problèmes le plus vite.

1. Regardez le bord sur les deux fondsPosez la miniature sur du blanc et sur du #0F0F0F. Si la limite disparaît sur l'un des deux, c'est cette couleur qu'il faut changer — et le changement ne concerne que la bande extérieure.
2. Regardez-la en niveaux de grisSi la création cesse de fonctionner, c'est la teinte qui la portait, et c'est la première chose que la taille d'affichage retire.
3. Regardez-la à côté de ses voisinesDans le fil où elle apparaîtra, à la taille où elle apparaîtra. C'est la seule étape qui puisse dire si la couleur qui survit à l'interface ressort aussi dans la rangée.

Ce qu'il faut en retenir

La version courte : des couleurs saturées de luminosité moyenne sur les bords, parce que ce sont les seules qui tiennent contre les deux interfaces. Les extrêmes de clair et de sombre à l'intérieur du cadre, où ils ne coûtent rien. Du contraste de luminosité plutôt que de teinte, parce que la teinte ne survit pas à la taille. Et le choix réel fait face à la rangée où vous apparaîtrez, pas face à une théorie.

Cette dernière partie est la seule étape qu'aucun article ne peut faire à votre place, celui-ci compris, car elle dépend d'un ensemble de miniatures qui change chaque semaine.

Les questions que tout le monde se pose