Notes de la maquette

La couleur dominante de la pochette colore le haut d'une fiche (album, chanson), celle de la sortie la plus récente le haut de la page artiste, et celle du premier album du Top 5 le haut d'un profil. Le reste de l'interface ne change pas. Les pochettes du haut sont inventées, dessinées dans un canvas. La couleur se calcule ici, dans le navigateur.

Comment la couleur se calcule

• La pochette est réduite à 32 × 32 pixels, chaque pixel passé en OKLCH.
• Les pixels se rangent par teinte (24 cases de 15°), chacun pesant sa chroma : un fond noir ou gris ne gagne pas contre une petite tache de couleur.
• Moins de 6 % de pixels colorés (chroma sous 0,025) : la pochette est grise, le bandeau reste neutre.
• Sans pochette, la teinte vient du titre, la même que la pochette de remplacement (lib/hue.ts).
• Voile : on garde la teinte, mais la clarté est fixée (0,90 en clair, 0,30 en sombre) et la chroma plafonnée. Le texte garde ses couleurs; seul le texte secondaire est foncé (ou éclairci) jusqu'à 4,5:1.
• Aplat : la couleur de la pochette presque telle quelle, avec un texte blanc ou noir choisi au meilleur contraste. Si aucun n'atteint 4,5:1, la couleur du bandeau se fonce ou s'éclaircit.

Contraste du texte posé sur la couleur

Ratios WCAG calculés sur la couleur du haut du bandeau, la plus forte. Titre et texte secondaire doivent atteindre 4,5:1, les étoiles 3:1 (élément graphique). « ajusté » : la couleur du texte ou du bandeau a été déplacée pour y arriver.

Vraies pochettes : Cover Art Archive et CORS

Vérifié le 2 novembre 2026 : coverartarchive.org, la redirection vers archive.org/download et le miroir final répondent tous avec Access-Control-Allow-Origin: *. Une image chargée avec crossorigin="anonymous" se lit donc dans un canvas sans le « salir ». Lecture réussie dans Chromium et WebKit (le moteur de Safari et de l'app iOS). Une pochette à la limite du seuil de gris peut changer d'avis d'un moteur à l'autre (10,000 Days : neutre dans Chromium, 267° dans WebKit). Les miniatures ci-dessous se chargent en direct, et la couleur se calcule sur place.

Recommandation

• Calcul dans le navigateur pour le MVP. Aucune dépendance, aucune migration, et ça marche aussi pour une œuvre qu'on n'a pas encore copiée. Le bandeau part du neutre et passe à la couleur en un fondu quand la pochette a chargé, comme ici.
• Calcul dans l'API, gardé avec la sortie, plus tard si le fondu gêne ou si une liste a besoin de la couleur sans charger l'image. Il faudrait une bibliothèque d'images côté .NET et une colonne.
• Voile par défaut. Il reste sobre et garde le contraste sans effort. L'aplat est plus fort, mais il donne des bandeaux criards sur une pochette saturée, et il faut reprendre la couleur des étoiles et des boutons.
• Pochette grise : bandeau neutre plutôt qu'une teinte inventée.