L’essentiel en bref
- Une palette de couleurs vives utilise des couleurs très saturées comme le rose vif, la mandarine, le citron, le bleu électrique et le vert vif.
- Les jaunes, verts, cyans, sarcelles et oranges vifs sont des couleurs claires : ils demandent donc un texte foncé plutôt que blanc.
- Les rouges et roses vifs mesurent environ 3,5:1 contre le blanc, ce qui échoue au WCAG AA pour le corps du texte : composez-y le petit texte en noir et gardez le blanc pour les grands titres.
- Deux vifs de clarté semblable placés bord à bord semblent vibrer : séparez-les donc par un neutre ou par une nette différence de clarté.
- Toute palette vive a besoin d’une ancre calme, généralement un quasi noir ou un blanc cassé chaud, pour porter le texte et laisser de l’espace à la couleur.
Sur cette page
Une palette de couleurs vives reste lisible quand vous traitez chaque couleur éclatante selon sa clarté, pas selon son éclat. Le citron #FFD60A, le vert vif #34C759, l’aqua #00C2FF et la mandarine #FF7A00 sont tous assez clairs pour demander un texte quasi noir. Le rose vif #FF2D87 et le rouge coquelicot #FF3B30 se situent dans un entre-deux délicat : le texte noir réussit, mais le blanc ne fonctionne que pour les grands titres. Ajoutez une ancre calme, donnez à chaque vif son propre espace, et une palette qui ressemble à une confiserie devient une palette sur laquelle on peut vraiment composer des mots.
Quelles couleurs vives demandent du texte noir
La saturation donne une impression de force, mais la lisibilité dépend de la clarté. Beaucoup de vifs sont bien plus clairs qu’ils n’en ont l’air : voilà pourquoi le texte blanc sur vert vif ou jaune paraît criard et reste difficile à lire. Le tableau ci-dessous mesure onze vifs contre le blanc et contre un quasi noir #111111.
#FFD60AAvec du texte blanc
Avec du texte noir
#00C2FFAvec du texte blanc
Avec du texte noir
Hex
#00D1B2Avec du texte blanc
Avec du texte noir
#34C759Avec du texte blanc
Avec du texte noir
Hex
#FF7A00Avec du texte blanc
Avec du texte noir
Hex
#FF3B30Avec du texte blanc
Avec du texte noir
#FF2D87Avec du texte blanc
Avec du texte noir
Hex
#E0115FAvec du texte blanc
Avec du texte noir
Hex
#8B3DFFAvec du texte blanc
Avec du texte noir
#1D4ED8Avec du texte blanc
Avec du texte noir
Hex
#C81D11Avec du texte blanc
Avec du texte noir
Une règle pratique : le côté clair du cercle, de l’orange au cyan en passant par le jaune et le vert, prend du noir, tout comme les roses et rouges les plus chauds ; le côté profond, du bleu au cramoisi en passant par le violet, prend du blanc. Si vous concevez pour un large public, lisez aussi les palettes adaptées au daltonisme, car des vifs qui ne diffèrent que par la teinte peuvent paraître identiques à certains lecteurs.
Six palettes de couleurs vives avec codes hex
- Fête à la piscine : aqua
#00C2FF, vert vif#34C759, citron#FFD60A, blanc#FFFFFF, marine profond#0B1F3Apour le texte. - École primaire : cobalt
#1D4ED8, rouge signal#C81D11, citron#FFD60A, papier#FAF7F0, encre#111111. - Impression riso : rose fluo
#FF48B0, bleu#0078BF, jaune#FFE800, papier journal#F2EFE6, noir#1A1A1A. - Tropical : framboise
#E0115F, mangue#FFA51F, palmier#00A86B, sable#F6EBD9, cacao#2B1B14.
Comment garder une palette vive lisible
- 1
Choisissez d’abord une ancre
Prenez un quasi noir ou un blanc cassé chaud et laissez-le couvrir la majeure partie de la surface. Le blanc chaud
#FFF8ECavec l’encre#111111mesure 17,89:1 : chaque mot composé en encre se lit donc. - 2
Composez le texte dans l’ancre, pas dans un vif
Le corps du texte appartient à la couleur d’ancre. Les vifs peuvent porter un titre ou un grand chiffre, où s’applique le seuil de 3:1 du grand texte.
- 3
Séparez les vifs de clarté égale
Le rose vif à côté d’un bleu électrique comme
#2F6BFFmesure 1,28:1, et le bord semble scintiller. Placez du blanc, du noir ou de l’espace entre eux, ou associez un vif clair à un vif profond. - 4
Limitez le nombre de vifs qui touchent les mots
Trois vifs dans une palette, c’est largement assez, et un seul doit se trouver derrière un bloc de texte. La règle 60 30 10 aide ici : ancre 60, vif dominant 30, accents 10.
- 5
Vérifiez-la sur un téléphone en plein air
Les vifs se délavent au soleil et sur les écrans à faible luminosité. Si les mots se lisent encore sur un téléphone en luminosité réduite, la palette fonctionne.
Un fond criard avec les mots directement dessus : le titre survit, la ligne de détail disparaît.
Les mêmes couleurs, avec le fond qui se calme derrière le texte. Toujours vif, et chaque ligne se lit.
Cette version de droite est ce que fait Gradiently par défaut. Un Mark sait où se placent vos mots, éloigne sa couleur la plus chargée et choisit une typographie claire ou foncée ligne par ligne : vous pouvez ainsi garder une palette criarde sans cadre ni ombre derrière le texte.
Des dégradés vifs sans milieu gris
Fondez deux vifs issus de côtés opposés du cercle en sRGB simple et le point médian devient gris ou brun. Choisissez des voisins, ou demandez au navigateur d’interpoler en oklch, qui garde le milieu saturé. L’interpolation des dégradés explique la différence.
Pour d’autres combinaisons, voir les dégradés vibrants et les dégradés néon. Pour les conseils complets sur le contraste, lisez le contraste des couleurs.
Un avertissement si la palette sera imprimée : les couleurs d’écran les plus électriques, surtout l’aqua, le rose vif et le vert vif, sortent de ce que les encres CMJN standard peuvent reproduire, et reviennent de l’imprimeur nettement plus ternes. Demandez une épreuve, ou prévoyez des encres spéciales ou fluorescentes. RVB ou CMJN explique à quoi s’attendre.
Les questions qu’on nous pose
Qu’est-ce qu’une palette de couleurs vives ?
Un ensemble de couleurs très saturées comme le rose vif, la mandarine, le citron, l’aqua et le vert vif, généralement équilibré par une ancre neutre pour le texte.
Faut-il du texte blanc ou noir sur les couleurs vives ?
Utilisez du noir sur les vifs clairs comme le jaune, l’orange, le vert, l’aqua et la sarcelle, ainsi que sur le rose vif et le rouge coquelicot. Utilisez du blanc sur les vifs profonds comme le cobalt, le violet, la framboise et le rouge signal.
Pourquoi certaines couleurs vives semblent-elles vibrer ?
Deux couleurs saturées de clarté semblable côte à côte, comme le rose vif et le bleu électrique, font scintiller le bord entre elles. Séparez-les par un neutre ou changez la clarté de l’une.
Combien de couleurs vives une palette doit-elle avoir ?
Deux ou trois vifs plus un ou deux neutres, c’est largement assez. Un seul vif doit se trouver derrière un bloc de texte.
Les couleurs vives sont-elles mauvaises pour l’accessibilité ?
Pas en elles-mêmes. Les problèmes viennent du texte sur des vifs avec trop peu de contraste : vérifiez donc chaque paire de texte au WCAG et gardez le corps du texte dans une ancre foncée ou claire.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil