Carte En Écoute

UNE CARTE QUI RESTE LISIBLE SUR TOUTE POCHETTE
⚡ La plupart des cartes « en écoute » tirent leur couleur de la moyenne de la pochette, puis y posent du texte blanc. Les deux étapes sont mesurablement fausses : la moyenne de six teintes saturées donne du gris exact, et le texte blanc passe le seuil de lisibilité de 4,5:1 sur seulement 36 % des couleurs. Celle-ci choisit une couleur réellement présente dans la pochette, puis choisit la couleur du texte par contraste — et vous montre le rapport. Rien n’est envoyé.
Déposez la pochette ici
ou cliquez pour choisir — JPG, PNG ou WebP

La moyenne d’une pochette est une couleur que la pochette ne contient pas

Presque toutes les cartes « en écoute » tirent leur fond de la moyenne de la pochette. C’est une ligne de code, et elle est fausse d’une manière qui se mesure en une seconde environ.

Faites la moyenne de six bandes égales de teintes pleinement saturées et vous obtenez rgb(128, 128, 128) — saturation 0,0, du gris exact. Faites la moyenne de moitié rouge sur moitié bleu et vous obtenez du violet, qui n’apparaît nulle part dans l’image. Nous avons testé trois pochettes et dans chacune la couleur moyenne était absente de la pochette :

PochetteMoyenneSaturationPrésente ?
Six teintes saturées128, 128, 1280,0 %Non
Moitié rouge, moitié bleu128, 0, 128100 %Non
Vert sur presque noir27, 103, 5258,5 %Non

Le motif est le problème : 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 et une pochette monochrome une carte fidèle, ce qui est exactement l’inverse. Cet outil quantifie plutôt la pochette et choisit un seau peuplé et saturé : une couleur réellement présente dans l’image. Vous pouvez basculer sur la moyenne ci-dessus et regarder la carte virer au gris.

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

La seconde habitude, c’est du texte blanc sur la couleur sortie de l’étape précédente. Nous avons échantillonné 636 056 couleurs du cube sRGB et calculé le rapport de contraste WCAG contre le blanc et contre le noir :

TextePasse 4,5:1Passe 3,0:1
Toujours blanc36,4 %56,9 %
Toujours noir65,3 %

Autrement dit, 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 — assez lisible sur votre propre écran, en grand, quand vous savez déjà ce qui est écrit.

Choisir couleur par couleur n’échoue jamais, et cela se démontre

Voici la partie qui vaut d’être connue. Nous avons parcouru les 16 777 216 couleurs sRGB — pas un échantillon — et retenu, pour chacune, le meilleur de son contraste contre le blanc et contre le noir. Le pire cas de tout l’espace colorimétrique est 4,58:1.

C’est au-dessus du seuil de 4,5:1, partout. Il n’existe aucune couleur de fond sur laquelle le blanc et le noir échouent tous les deux. Le chiffre n’est pas non plus un artefact du parcours ; il correspond exactement à la forme close. Les deux courbes se croisent à la luminance √(1,05 × 0,05) − 0,05 = 0,1791, ce qui donne 1,05 / 0,2291 = 4,5826.

Choisir la couleur du texte par contraste n’est donc pas une heuristique qui marche souvent. C’est lisible par construction, et cela coûte une comparaison. La carte indique le rapport obtenu, pour que vous le voyiez plutôt que de nous croire.

Le parcours, la forme close et les mesures de moyenne sont détaillés dans Pourquoi les cartes « en écoute » ressortent grises, et pourquoi le texte est difficile à lire.

Ce que la carte montre, et ce qu’elle ne montre délibérément pas

La carte porte votre pochette, votre texte, une barre de progression et les deux durées que vous saisissez. Elle ne porte ni logo, ni marque verbale, ni couleurs de marque d’aucun service, et ce n’est la capture d’écran de rien — c’est une image que vous avez faite, à partir d’une image que vous aviez. Les titres longs sont mesurés et tronqués par des points de suspension plutôt que laissés déborder, ce qui est la troisième petite chose que la plupart des générateurs ratent.

Questions fréquentes

Ma pochette est-elle envoyée quelque part ?

Non. Le fichier est lu par votre navigateur, dessiné sur un canvas dans la page, puis rendu sous forme de téléchargement. Il n’atteint jamais de serveur, et c’est aussi pourquoi l’outil continue de fonctionner hors ligne une fois la page chargée.

Pourquoi ma carte n’a-t-elle pas la couleur attendue ?

Parce que c’est une couleur de la pochette, et non la moyenne de la pochette. Les deux diffèrent en général, et beaucoup sur une pochette colorée — la moyenne tire vers le gris à mesure que les teintes opposées s’annulent. Basculez la couleur de la carte sur « moyenne de la pochette » pour voir la différence, ou choisissez la couleur vous-même.

Que signifie le rapport de contraste ?

C’est le rapport WCAG entre le texte et le fond derrière lui. 4,5:1 est le seuil pour du texte courant ; en dessous, le texte devient mesurablement difficile à lire pour beaucoup de gens et dans beaucoup d’éclairages. Choisir entre blanc et noir couleur par couleur ne descend jamais sous 4,58:1, ce que nous avons vérifié sur tout l’espace sRGB.

Puis-je m’en servir pour une capture Spotify ou Apple Music ?

Ce n’est pas une capture et cela n’en imite pas une — aucun logo, aucune marque verbale, aucune couleur de marque. L’outil fabrique une simple carte de lecteur à partir de votre pochette et de ce que vous saisissez, et cela vous appartient.

Quelle taille d’export choisir ?

1080 × 1920 pour une story plein écran, 1080 × 1350 pour une publication de fil, 1080 × 1080 si le fil recadre en carré. Les trois dépassent ce qu’affiche n’importe quelle grande plateforme, donc ils survivent à la réduction avec du détail en réserve.

Mon titre est coupé. Pourquoi ?

Parce qu’il ne rentre pas, et que la carte le mesure au lieu de le laisser dépasser du bord. Les titres sont tronqués par des points de suspension à la largeur disponible ; s’il vous faut le titre entier, raccourcissez-le ou choisissez un export plus haut, où la carte est plus large.

La barre de progression doit-elle être exacte ?

Non — elle est dessinée à partir des deux durées que vous saisissez, donc elle est exactement aussi juste qu’elles. Si le temps écoulé dépasse la durée, la barre se remplit entièrement.

Est-ce que ça marche sur téléphone ?

Oui. Le dessin est fait par le même canvas que sur ordinateur. Les très grandes pochettes sont limitées par la mémoire du navigateur, pas par l’outil ; si le téléchargement revient vide, redimensionnez la pochette d’abord.