Créer une palette web à partir d'une photo qui respecte le contraste

Vous pointez un extracteur de couleurs sur une photo de forêt ou d’une assiette, et il vous renvoie huit échantillons. Ils s’accordent à merveille. Puis vous posez le plus joli sur un titre, vous réglez le texte courant dans un autre, et la page se lit comme une aquarelle laissée sous la pluie. Les échantillons n’ont jamais été mauvais. Ils n’étaient simplement pas faits pour être du texte.

Les outils d’extraction et les listes « 50 palettes magnifiques » sont partout. Presque aucun ne va jusqu’au bout, jusqu’aux couleurs que vous pouvez réellement utiliser sur un vrai site sans échouer à l’accessibilité. Voici tout le déroulé : extraire les couleurs dominantes, puis transformer ces échantillons bruts en rôles qui tiennent la route.

En bref : extrayez les couleurs, mais ne les utilisez pas telles quelles. Triez-les par rôle (fond, surface, texte, accent), puis assombrissez ou éclaircissez les paires qui n’atteignent pas le contraste WCAG. Les couleurs vives vont aux titres et aux accents, pas au texte courant.

Ce qu’une photo vous donne vraiment

Un extracteur de palette analyse une image et signale les couleurs qui occupent le plus de surface, généralement regroupées en cinq à dix échantillons. Une photo de feuilles de sauge sur une assiette crème peut renvoyer un vert sauge doux, un crème chaud, un olive terne, un reflet presque blanc et un brun d’ombre.

Ce sont les couleurs de la scène. Elles sont pondérées vers ce qui remplit le cadre, c’est-à-dire les tons moyens et les pastels doux. C’est exactement cette pondération qui rend le résultat calme et cohérent, et c’est aussi pourquoi si peu d’échantillons fonctionnent en texte. Les photos contiennent rarement un vrai foncé ou un blanc papier net en quantité, donc l’extracteur n’a rien de proche du noir à vous donner pour le corps du texte.

Considérez donc l’extraction comme la première étape sur deux. Vous avez la matière première. Reste à la rendre exploitable.

Le rapport de contraste, brièvement

Le rapport de contraste compare la luminance relative de deux couleurs : la quantité de lumière que chacune réfléchit, pondérée selon la manière dont l’œil perçoit réellement le rouge, le vert et le bleu. Le résultat est un nombre allant de 1:1 (identiques) jusqu’à 21:1 (noir pur sur blanc pur).

Le WCAG, le référentiel d’accessibilité que visent la plupart des équipes, fixe deux seuils courants pour le niveau AA :

• 4,5:1 pour le texte courant sur son fond
• 3:1 pour le grand texte (environ 24px en graisse normale ou 18,66px en gras et au-delà) et pour les éléments d’interface comme les icônes, les bordures de champ et les anneaux de focus

Le point clé pour le travail sur les palettes : le contraste dépend de l’écart de luminance, pas du fait que deux couleurs « aient l’air différentes ». Un magenta vif et un sarcelle profond peuvent fortement jurer à l’œil et échouer quand même au contraste, parce qu’ils ont une clarté semblable. Deux couleurs ont besoin d’un véritable écart de luminance pour passer.

Triez les échantillons par rôle avant de les juger

Un site web a besoin d’un petit nombre de fonctions à remplir, pas d’un sac de jolies couleurs. Associez vos échantillons extraits à quatre rôles :

• Fond : la page derrière tout le reste, généralement votre échantillon le plus clair ou le plus foncé
• Surface : les cartes, les panneaux et les champs qui se posent sur le fond, à un demi-pas de celui-ci
• Texte : la couleur du corps du texte, qui doit atteindre 4,5:1 sur le fond comme sur la surface
• Accent : les liens, les boutons, les surbrillances, là où une couleur vive extraite trouve sa place

La plupart des échantillons extraits sont parfaits pour le fond, la surface et l’accent. C’est sur le rôle du texte que les photos vous laissent tomber, parce que le foncé qu’il faut pour un corps de texte lisible est généralement absent de l’image. Vous l’inventerez souvent en prenant une des teintes de la photo et en la poussant beaucoup plus foncé.

Un exemple concret

Disons que la photo sauge-sur-crème vous donne ceci :

Échantillon	Hex	Rôle envisagé
Crème	#F4EFE3	Fond
Sauge moyen	#9CAE8B	Accent ou texte ?
Blanc chaud	#FBF8F1	Surface
Olive	#6E7A57	Accent

La tentation est de mettre le corps du texte en sauge moyen sur crème, parce que la paire paraît douce et fidèle à l’identité. Vérifiez-la :

• Sauge moyen #9CAE8B sur crème #F4EFE3 donne environ 1,7:1

C’est un échec. Un échec net. La paire rate le texte courant (4,5:1), le grand texte (3:1) et même le minimum d’interface (3:1). Deux tons moyens, trop proches en luminance. En couleur de remplissage ou en bloc décoratif, c’est très bien. En texte, c’est illisible pour beaucoup de gens et invisible pour certains.

Maintenant, corrigez-le sans jeter la teinte. Gardez le vert, baissez la clarté jusqu’à ce que la paire franchisse le seuil :

• Sauge assombri #3C4A2E sur crème #F4EFE3 donne environ 8,4:1

Cela passe le niveau AA pour le corps du texte avec de la marge, et cela se lit toujours comme la même famille de sauge. Vous avez gardé l’ambiance de la marque tout en la rendant lisible. Le sauge moyen d’origine n’est pas perdu non plus. Promouvez-le sur un grand titre ou une bordure de carte, là où le seuil de 3:1 est atteignable :

• Sauge moyen #9CAE8B sur crème a besoin de 3:1 pour le grand texte et le rate encore à 1,7:1, il reste donc décoratif
• Olive #6E7A57 sur crème donne environ 3,4:1, ce qui franchit le grand texte et l’interface mais pas le corps du texte

Le schéma est constant. Les couleurs vives et les tons moyens gèrent les titres, les boutons, les bordures et les remplissages. Une seule couleur assombrie ou presque noire porte la lecture. Testez toujours la vraie paire que vous comptez utiliser, le premier plan sur son fond réel, et non sur un blanc supposé.

Une routine reproductible

1. Extrayez la palette de votre image et notez les valeurs hex.
2. Choisissez l’échantillon le plus clair pour le fond, un quasi-jumeau pour la surface.
3. Pour le texte, prenez une teinte qui vous plaît et assombrissez-la jusqu’à atteindre 4,5:1 sur le fond et sur la surface. Testez la paire, ajustez, retestez.
4. Affectez les échantillons vifs restants aux accents et aux grands titres, en vérifiant chaque paire d’accent par rapport à 3:1.
5. Contrôlez les combinaisons que vous allez vraiment afficher : lien sur fond, texte de bouton sur fond de bouton, texte indicatif sur champ de saisie.

Deux réflexes évitent le plus d’ennuis. D’abord, ne laissez jamais un ton moyen faire le corps du texte ; si un échantillon se situe au milieu de la plage de clarté, sa place est dans les remplissages et les accents. Ensuite, vérifiez la paire, pas l’échantillon. Une couleur n’est ni accessible ni inaccessible en soi ; seule une combinaison premier plan / fond possède un rapport.

Des outils de palette et de contraste gratuits, directement dans le navigateur, arrivent bientôt sur color.hivly.net, pour que vous puissiez extraire depuis une photo, ajuster un échantillon plus clair ou plus foncé et voir le rapport se mettre à jour sur un vrai fond, le tout dans la page, sans rien téléverser. En attendant, la routine ci-dessus, accompagnée de n’importe quel vérificateur de contraste, vous donne une palette avec laquelle vous pouvez réellement construire.

Les couleurs d’une photo sont une ambiance. Une palette web est un ensemble de fonctions. Le travail consiste à passer de l’une à l’autre sans perdre l’ambiance ni la lisibilité, et l’essentiel de ce travail revient simplement à assombrir un échantillon suffisamment loin.