L’essentiel en bref
- Une couleur d’accent est une couleur contrastée, utilisée en petite quantité pour attirer l’attention sur l’élément le plus important : un bouton, un prix ou un mot du titre.
- Dans la règle 60 30 10, l’accent représente les dix pour cent, et c’est sa rareté qui le rend efficace.
- Un bon accent se distingue des couleurs de base sur au moins un point fort : la teinte, la luminosité ou la saturation.
- Un accent chargé de trop de rôles différents ne signale plus rien : donnez-lui une mission principale.
- En CSS, la propriété accent-color teinte les cases à cocher, boutons radio, curseurs et barres de progression natifs.
Sur cette page
La couleur d’accent est la petite couleur contrastée d’une palette qui désigne ce qui compte : le bouton à cliquer, le prix, le mot clé d’un titre. Pour en choisir une qui fait le travail, partez de vos couleurs de base et choisissez une teinte qui s’en distingue nettement par la teinte, la luminosité ou la saturation, puis utilisez-la avec parcimonie. Dans la répartition 60 30 10 bien connue, c’est elle qui fait les dix pour cent. Moins elle apparaît, plus chaque apparition compte.
À quoi sert une couleur d’accent
L’essentiel d’une création est fait de couleurs de base et de soutien : fonds, panneaux, texte. L’accent est l’exception qui indique à l’œil où aller. C’est donc la couleur la plus fonctionnelle que vous possédez. Sur un site, elle marque l’action principale ; sur une affiche, elle tombe sur la date ; dans une marque, elle devient le détail dont on se souvient, un point final coloré ou une seule bande vive.
La règle 60 30 10 donne les proportions : environ soixante pour cent de couleur dominante, trente pour cent de secondaire, dix pour cent d’accent. Voyez ces dix pour cent comme un plafond, pas comme un objectif. Beaucoup des meilleures mises en page en utilisent bien moins.
Dans une publication comme celle-ci, l’accent a sa place à un seul endroit, par exemple la petite étiquette au-dessus du titre, et nulle part ailleurs.
Le même principe dans une publication en liste : si l’accent apparaît, il ne marque que le titre.
Comment choisir une couleur d’accent
Tout repose sur le contraste. Regardez vos couleurs de base et secondaires, demandez-vous ce qu’elles ont en commun, puis rendez l’accent différent d’elles sur au moins un point fort.
- 1
Contraste de teinte
Choisissez de l’autre côté du cercle chromatique. Les palettes marine et sarcelle accueillent des accents chauds comme le corail ou l’ambre ; les palettes chaudes prennent du bleu ou du vert. Les couleurs complémentaires sont le choix classique.
- 2
Contraste de luminosité
Sur une base sombre, un accent clair ; sur une base pâle, un accent profond. Une palette sourde de gris peut accueillir un accent noir aussi bien qu’un accent vif.
- 3
Contraste de saturation
Au milieu de couleurs douces et poudrées, une seule couleur saturée se lit comme l’accent, même si elle partage leur teinte. Une palette argile avec un accent vermillon pur en est un bon exemple.
- 4
La tester à sa vraie taille
Un accent est généralement petit. Vérifiez-le en libellé de bouton ou en fin trait de soulignement, pas en grand échantillon, car les petites surfaces de couleur paraissent plus sombres et plus ternes.
Où mettre l’accent, et où ne pas le mettre
À tenir à l’écart de
À tenir à l’écart de
À tenir à l’écart de
À tenir à l’écart de
À tenir à l’écart de
Les accents vifs comme le citron vert, le jaune ou le menthe échouent souvent en texte sur fond blanc. Utilisez-les en aplat avec un texte sombre par-dessus, et vérifiez chaque association avec les recommandations de contraste des couleurs : au moins 4,5:1 pour le texte courant et 3:1 pour les grands textes et les éléments d’interface.
Un audit rapide aide si l’accent s’est glissé partout. Faites une capture de votre page d’accueil ou d’une semaine de publications, floutez-la légèrement et regardez où l’accent apparaît. Si votre œil se pose sur trois ou quatre endroits à la fois, rétrogradez tous ceux qui ne sont pas les plus importants vers une couleur secondaire. S’il ne se pose nulle part, l’accent est sans doute trop proche de la base et demande plus de contraste en teinte ou en luminosité.
La propriété CSS accent-color
Sur le web, accent-color teinte les contrôles de formulaire natifs en une ligne : cases à cocher, boutons radio, curseurs et barres de progression. Elle est prise en charge par les versions actuelles des principaux navigateurs ; la référence MDN donne les détails.
:root {
--accent: #d42a35;
}
/* Native checkboxes, radios, sliders and progress bars */
body {
accent-color: var(--accent);
}
/* The same accent on your own components */
.button-primary {
background: var(--accent);
color: #ffffff;
}
a {
color: #b3202a; /* a deeper shade for text links on white */
}Les navigateurs peuvent ajuster la couleur de la coche ou du curseur dans un contrôle pour le garder lisible sur votre accent : testez donc des accents clairs comme sombres. Pour le reste des couleurs d’un site, voyez palette de couleurs de site web.
Accents sur dégradés et photos
Sur un fond riche, l’accent a plus de concurrence. Prenez-le hors de la famille de couleurs du fond : un accent chaud sur un dégradé froid, ou un quasi-blanc sur un dégradé coloré. Dans Gradiently, l’encre automatique choisit un texte clair ou sombre pour chaque ligne à partir de la palette du Mark lui-même, si bien que les mots restent lisibles quand le fond bouge, et votre accent n’a plus qu’une mission à remplir. Pour d’autres palettes construites autour d’une seule couleur forte, voyez palettes de couleurs tech.
Les questions qu’on nous pose
Qu’est-ce qu’une couleur d’accent en design ?
Une couleur contrastée utilisée en petite quantité pour attirer l’attention sur l’élément le plus important, comme un bouton, un mot clé ou un prix.
Quelle part d’une création doit occuper la couleur d’accent ?
Environ dix pour cent au maximum, selon la règle 60 30 10. Beaucoup de créations fortes en utilisent bien moins.
Comment choisir une couleur d’accent pour ma palette ?
Faites-la se distinguer clairement de vos couleurs de base par la teinte, la luminosité ou la saturation, puis testez-la à la petite taille où elle apparaîtra vraiment.
À quoi sert accent-color en CSS ?
Elle règle la teinte des cases à cocher, boutons radio, curseurs et barres de progression natifs, pour que les contrôles de formulaire suivent votre marque sans style personnalisé.
Une marque peut-elle avoir plusieurs couleurs d’accent ?
Oui, mais chacune doit avoir un rôle distinct, par exemple une pour les actions et une pour les mises en avant. Deux accents qui font le même travail s’annulent.
É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