# Couleur d’accent : choisir celle qui fait vraiment le travail

[Canonical HTML page](https://gradiently.design/fr/guide/accent-color)

L’accent est la plus petite part d’une palette et celle que l’on remarque en premier. Voici comment en choisir un qui se détache de votre base, le garder assez rare pour qu’il fonctionne, et le régler en CSS.

## The short version

- 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.

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](https://gradiently.design/fr/guide/60-30-10-rule) 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.

Une publication portrait annonçant une ouverture tardive le vendredi, avec une petite étiquette au-dessus du titre

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.

Une publication portrait en liste intitulée Trois choses à apporter, pour un atelier

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](https://gradiently.design/fr/guide/color-wheel). 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](https://gradiently.design/fr/guide/complementary-colors) 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.

- Base marine, accent corail: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Base sable, accent bleu profond: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Base forêt, accent safran: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Base gris lilas, accent rouge: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Base noire, accent citron vert: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Base rose poudré, accent anthracite: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Six palettes réparties à environ 70, 20 et 10 pour cent. Chaque accent se distingue de sa base par la teinte, la luminosité ou les deux.

## Où mettre l’accent, et où ne pas le mettre

| À utiliser pour | À tenir à l’écart de |
| --- | --- |
| Le bouton principal ou l’appel à l’action | Les boutons secondaires et d’annulation |
| Un mot clé, un prix ou une date | Des paragraphes entiers de texte courant |
| Les états actifs : l’onglet en cours, un élément sélectionné | Toutes les icônes d’une barre d’outils |
| Les petits détails de marque : un filet, un point, un sticker | Les grands fonds derrière un texte long |
| Les points forts d’un graphique : la seule série qui compte | Toutes les séries d’un graphique à la fois |

Un accent avec une mission principale garde son sens. Quand il est partout, plus rien ne ressort.

> **Un accent n’est pas une couleur d’erreur** Si votre accent est rouge, pensez à sa cohabitation avec les messages d’erreur. Les utilisateurs peuvent lire un bouton rouge comme destructif. Certaines marques à accent rouge utilisent un autre rouge pour les erreurs, ou signalent les erreurs par une icône et un texte en plus de la couleur.

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](https://gradiently.design/fr/guide/color-contrast-accessibility) : 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](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) donne les détails.

```css
: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 */
}
```

Un seul jeton d’accent pour les contrôles de formulaire et le bouton principal, avec une nuance plus profonde pour les liens texte afin qu’ils passent le contraste sur blanc.

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](https://gradiently.design/fr/guide/website-color-scheme).

## 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](https://gradiently.design/fr/guide/tech-color-palettes).

## FAQ

### 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.