Article
Extraire une palette de couleurs accessible depuis une image
Une photographie ou un asset de marque contient souvent les bases d'un système colorimétrique complet. Extraire ces bases, les organiser en palette utilisable, puis les vérifier selon les critères d'accessibilité demande trois étapes distinctes. Cet article les couvre dans l'ordre : comment fonctionne l'extraction, comment sélectionner et ajuster les couleurs pour un usage concret, comment vérifier le contraste WCAG, et comment repérer les paires qui se confondent pour les utilisateurs daltoniens.
Comment une palette est extraite : échantillonnage et quantification colorimétrique
Toute image numérique est une grille de pixels, chacun portant une valeur de couleur dans un espace comme RGB. Un outil d'extraction de palette n'inspecte pas chaque pixel individuellement : une photo de 2 mégapixels contient 2 millions de points, ce qui serait lent à traiter et renverrait des milliers de teintes légèrement différentes plutôt qu'un ensemble utilisable. L'outil échantillonne donc la grille à intervalle régulier pour collecter un sous-ensemble représentatif. Ce sous-ensemble est ensuite traité par un algorithme de quantification colorimétrique. L'approche la plus courante regroupe les couleurs similaires par une méthode de regroupement, parfois appelée découpe médiane ou partitionnement de type k-means. L'algorithme place chaque pixel échantillonné dans l'un des groupes en fonction de la similarité de couleur, puis calcule la couleur moyenne de chaque groupe. Le résultat est une petite liste, généralement de 4 à 16 couleurs, qui rend compte des tons visuels dominants de l'image. Les couleurs présentes dans de petites zones isolées peuvent être ignorées, ce qui est un comportement attendu.
Des couleurs dominantes brutes à une palette utilisable
Le résultat brut d'un extracteur est une liste de couleurs classées par fréquence, mais la fréquence seule ne fait pas une palette. Une photo de forêt renverra plusieurs verts trop similaires pour être utilisés comme accents distincts dans une interface. Le travail concret consiste à sélectionner et ajuster. Commencez par identifier une couleur principale : celle qui est la plus distinctive et la moins neutre. Parmi les autres, cherchez au plus deux couleurs qui contrastent avec la principale et entre elles. Ce seront vos accents. Tout le reste, y compris les tons désaturés que l'extracteur renvoie souvent depuis les ombres et les demi-teintes, peut servir de neutres pour les fonds et les bordures. Une fois cette structure définie, vous devrez presque certainement ajuster des valeurs individuelles. L'outil color-converter permet d'examiner chaque couleur en hex, RGB et HSL. Le mode HSL est particulièrement utile : vous pouvez maintenir la teinte constante et faire varier la luminosité ou la saturation pour créer une famille plus resserrée ou plus ouverte sans quitter la même gamme chromatique.
Vérifier le contraste : les seuils WCAG pour la lisibilité du texte
Une fois que vous avez des couleurs candidates pour le texte et l'arrière-plan, il faut vérifier si la combinaison est lisible. Les Règles pour l'accessibilité des contenus Web (WCAG) définissent un rapport de contraste à cet effet. Ce rapport compare la luminance relative de deux couleurs : une valeur de 1:1 signifie aucun contraste (même couleur sur même couleur), et 21:1 est le maximum (noir sur blanc). WCAG 2.1 niveau AA exige un rapport d'au moins 4,5:1 pour le texte courant et de 3:1 pour le texte grand format (18 pt ou 14 pt en gras). Le niveau AAA fixe des seuils plus élevés, à 7:1 et 4,5:1 respectivement. Il n'est pas nécessaire de calculer la luminance à la main. L'essentiel est de comprendre qu'une paire de couleurs qui semble lisible dans de bonnes conditions d'éclairage peut descendre sous 4,5:1 à l'écran. Après extraction et ajustement, testez chaque combinaison texte sur fond que vous comptez utiliser. Un gris moyen lisible sur blanc peut échouer complètement sur un fond beige clair extrait de votre palette.
Daltonisme : simuler ce que voient les utilisateurs concernés
Environ 1 homme sur 12 et 1 femme sur 200 présentent une forme de déficience de la vision des couleurs. Le type le plus courant est la deutéranopie (sensibilité réduite au vert), suivi de la protanopie (sensibilité réduite au rouge). La tritanopie (sensibilité réduite au bleu-jaune) est plus rare. Pour chaque type, le système visuel associe certaines longueurs d'onde à la même couleur perçue que les personnes à vision normale voient comme distinctes. Le problème concret pour une palette est que deux couleurs clairement différentes pour une vision normale peuvent se confondre pour un utilisateur daltonien, les rendant inutiles pour marquer une distinction, comme l'usage du rouge et du vert seuls pour signaler succès et erreur. Lancer une simulation de daltonisme vous montre l'apparence de la palette quand les canaux concernés sont comprimés. Les paires qui se confondent en un gris ou un brun presque identique sont celles à reconsidérer : augmentez l'écart de luminosité entre elles pour que le contraste reste perceptible sans la distinction de teinte, ou ajoutez un signal secondaire (forme, libellé, motif) pour que la couleur ne soit pas le seul indicateur.
Travailler en local : color-palette, color-blindness et color-converter
Les trois étapes décrites dans cet article peuvent être réalisées sans envoyer votre image ni vos couleurs de marque à un serveur. L'outil color-palette fonctionne entièrement dans le navigateur : vous déposez une image, il échantillonne les pixels localement et renvoie les couleurs dominantes sous forme de valeurs hex. Aucun fichier n'est transmis. L'outil color-converter accepte un code hex et affiche la même couleur en RGB et en HSL pour effectuer des ajustements ciblés sur la luminosité ou la saturation tout en restant dans la même famille chromatique. Le hex et les valeurs converties restent uniquement dans la page. L'outil color-blindness fonctionne dans l'autre sens : vous déposez une image et il en calcule les simulations de deutéranopie, protanopie et tritanopie, directement dans le navigateur. Pour vérifier une palette plutôt qu'une photo, exportez ou capturez d'abord vos nuances sous forme d'image, puis déposez-la dans le simulateur. Utilisés en séquence, extraire avec color-palette, ajuster dans color-converter, puis exporter une image de nuances et la vérifier dans color-blindness, couvrent l'intégralité du flux de travail décrit plus haut. Votre image reste sur votre appareil tout au long du processus, ce qui est important si la photo source contient une identité de marque non publiée ou l'identité visuelle encore confidentielle d'un client.
Outils mentionnés dans cet article
- Extracteur de paletteExtrayez les couleurs dominantes d'une image sous forme de nuances HEX. Copiez n'importe quelle couleur. Aucun upload.
- Simulateur de daltonismeSimulez la protanopie, deutéranopie, tritanopie et achromatopsie sur une image. Aucun upload.
- Convertisseur de couleursConvertissez des couleurs entre HEX, RGB, HSL, HSV et CMYK. Vérificateur de contraste WCAG inclus. Aucun upload.
- Générateur de palettesGénérez des palettes complémentaires, analogues, triadiques, tétradiques et monochromatiques depuis une couleur de base. Aucun upload.
Questions fréquentes
Combien de couleurs un extracteur de palette renvoie-t-il en général ?
La plupart des outils renvoient entre 5 et 16 couleurs par défaut, mais beaucoup permettent de définir ce nombre. Renvoyer moins de couleurs oblige l'algorithme à regrouper davantage de pixels, ce qui peut fusionner des tons distincts mais proches. Renvoyer plus de couleurs peut produire des quasi-doublons difficiles à utiliser de façon distincte. Pour une palette d'interface, un point de départ de 6 à 8 couleurs est généralement adapté.
Une palette extraite d'une image peut-elle passer automatiquement le contraste WCAG ?
Non, pas automatiquement. Les couleurs dominantes d'une photographie sont souvent des tons moyens avec une luminance modérée, qui produisent des rapports de 2:1 à 3:1 entre elles. Atteindre le seuil de 4,5:1 pour le texte courant nécessite généralement d'éclaircir les valeurs d'arrière-plan ou d'assombrir les valeurs de texte au-delà de ce que l'extraction brute fournit. L'extraction donne un point de départ ; la vérification du contraste indique l'amplitude de l'ajustement nécessaire.
Le rapport de contraste WCAG tient-il compte du daltonisme ?
En partie. La formule de luminance WCAG repose sur la luminosité relative, pas sur la teinte. Une paire à fort contraste qui atteint 4,5:1 restera généralement distinguishable pour les personnes daltoniennes car la différence de luminosité est préservée. Cependant, deux couleurs à luminance similaire mais de teintes différentes, comme un rouge et un vert à même luminosité, peuvent satisfaire le critère de luminance tout en étant indiscernables pour un deutéranope. Lancer une simulation de daltonisme est la bonne façon de vérifier la différenciation par teinte séparément du rapport de contraste.