# Palette de couleurs d’un site web : bien choisir ses couleurs

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

Un site a besoin de moins de couleurs que vous ne le pensez, et chacune a besoin d’un rôle. Attribuez les rôles, vérifiez-les les uns contre les autres, et tout le site reste cohérent en grandissant.

## The short version

- La palette d’un site web fonctionne mieux comme une courte liste de rôles : fond de page, surface, texte, texte discret, bordure, accent et couleurs d’état.
- La plupart des sites n’ont besoin que d’un accent de marque, surtout pour les boutons et les liens, les neutres faisant le reste du travail.
- Les WCAG demandent un rapport de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d’interface comme les bordures de champs.
- Stocker les couleurs en propriétés personnalisées CSS, ou design tokens, permet de changer le thème de tout un site en remplaçant un seul jeu de valeurs.
- Un thème sombre est un jeu de valeurs distinct pour les mêmes rôles, pas une inversion du thème clair.

Une bonne **palette de couleurs de site web** n’est pas un moodboard de cinq couleurs préférées. C’est une courte liste de rôles, chacun tenu par une couleur : le fond de page, les surfaces en relief, le texte courant, le texte plus discret, les bordures, un accent pour les actions, et du rouge, de l’ambre et du vert pour les états. Choisissez d’abord votre accent de marque, construisez autour des neutres calmes, vérifiez le contraste de chaque association de texte, puis stockez le résultat en variables CSS pour que tout le site utilise les mêmes valeurs.

## Les rôles dont chaque site a besoin

| Rôle | Utilisé pour | Règle empirique |
| --- | --- | --- |
| Fond | L’arrière-plan de la page | Légèrement teinté plutôt que blanc ou noir pur, c’est plus doux |
| Surface | Cartes, panneaux, menus | Un cran plus clair (thème clair) ou plus clair encore (thème sombre) que le fond |
| Texte | Titres et texte courant | Contraste très élevé sur le fond et la surface |
| Texte discret | Légendes, libellés, métadonnées | Toujours au moins 4,5:1 sur le fond |
| Bordure | Séparateurs et contours de champs | Les séparateurs décoratifs peuvent être légers ; les bordures de champs exigent 3:1 |
| Accent | Boutons, liens, états sélectionnés | Votre couleur de marque, utilisée avec parcimonie pour qu’elle signifie «  agir ici  » |
| État | Erreurs, avertissements, succès | Rouge, ambre, vert, ajustés pour aller avec votre accent |

Sept rôles couvrent la plupart des sites. Nommez les couleurs par rôle, pas par teinte, pour que changer la couleur de marque plus tard ne demande qu’une modification.

## Comment choisir les couleurs d’un site web

1. **Commencez par un seul accent** Votre couleur de marque, ou celle que vous voulez qu’on associe à vous. Si vous n’en avez pas, [comment choisir les couleurs de sa marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors) vous aide.
2. **Teintez les neutres vers lui** Des gris avec une pointe de la teinte de l’accent semblent lui être apparentés. Une marque sarcelle reçoit des gris froids, légèrement bleutés ; une marque terre cuite, des gris chauds et crème.
3. **Choisissez clair, sombre ou les deux** Prenez le thème que la plupart des visiteurs verront en premier et concevez-le entièrement avant de commencer l’autre.
4. **Vérifiez chaque association de texte** Texte sur fond, texte sur surface, texte discret sur les deux, blanc sur le bouton d’accent. Corrigez tout ce qui est sous 4,5:1.
5. **Appliquez 60, 30, 10** Environ 60 % de fond, 30 % de surfaces et de texte, 10 % d’accent. La [règle 60 30 10](https://gradiently.design/fr/guide/60-30-10-rule) explique cet équilibre.

## Trois palettes de site web pour démarrer

- Fond: #f7f9fb
- Surface: #ffffff
- Texte: #14202b
- Texte discret: #52606d
- Bordure de champ: #8a96a3
- Accent sarcelle: #0f766e

Cabinet apaisé, clair. Le texte sur le fond est à environ 15,7:1, le texte discret à 6,1:1, le blanc sur le bouton sarcelle à 5,5:1, et la bordure de champ atteint tout juste 3:1 sur le blanc.

- Fond crème: #fbf6ef
- Surface avoine: #efe4d6
- Texte espresso: #2a1f17
- Texte discret: #635e68
- Accent terre cuite: #b4441c

Café chaleureux, clair. L’espresso sur crème est à environ 15:1 ; le blanc sur terre cuite à environ 5,5:1, donc les libellés des boutons restent lisibles.

- Fond nuit: #0f0e17
- Surface en relief: #1a1926
- Texte: #ecebf3
- Texte discret: #a5a3b8
- Accent lilas: #a78bfa

Studio de nuit, sombre. Un texte blanc cassé plutôt que blanc pur réduit l’éblouissement ; l’accent lilas est à environ 7:1 sur le fond, donc mettez un texte sombre sur les boutons lilas.

## Les règles de contraste qui gardent un site lisible

Les [règles de contraste des WCAG](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) fixent le plancher : 4,5:1 pour le texte courant, 3:1 pour le grand texte (environ 24 px, ou 19 px en gras) et 3:1 pour les composants d’interface comme les bordures de champs et les icônes porteuses de sens. Le [vérificateur de contraste de WebAIM](https://webaim.org/resources/contrastchecker/) teste n’importe quelle paire. Notre [guide du contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility) en explique les raisons et les cas limites.

### Erreurs courantes

- Un texte indicatif gris clair utilisé comme seul libellé
- Du texte blanc sur une couleur de marque pâle comme le jaune ou le bleu ciel
- Des liens qui ne se distinguent du texte que par la couleur
- Une bordure pâle comme seul contour d’un champ de formulaire
- Des messages d’erreur affichés seulement en rouge

### Corrections

- De vrais libellés au-dessus des champs, texte discret à 4,5:1
- Du texte sombre sur les accents clairs, ou une nuance plus profonde de l’accent
- Soulignez les liens dans le texte courant, ou mettez-les en gras
- Des bordures de champs à 3:1 sur leur fond
- Une icône ou des mots en plus de la couleur

## Coder votre palette en tokens

Stockez chaque rôle une seule fois en propriété personnalisée CSS et n’utilisez que ces variables dans vos styles. Un thème sombre, une campagne saisonnière ou un changement d’identité devient alors une modification d’un seul bloc de valeurs, pas une recherche dans chaque fichier. C’est l’idée centrale des [design tokens](https://gradiently.design/fr/guide/design-tokens).

```css
:root {
  --ground: #f7f9fb;
  --surface: #ffffff;
  --text: #14202b;
  --text-muted: #52606d;
  --border-input: #8a96a3;
  --accent: #0f766e;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0f0e17;
    --surface: #1a1926;
    --text: #ecebf3;
    --text-muted: #a5a3b8;
    --border-input: #6e6b85;
    --accent: #a78bfa;
    --on-accent: #0f0e17;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
.button { background: var(--accent); color: var(--on-accent); }
```

Des rôles, pas des teintes. Notez que `--on-accent` passe du blanc au quasi noir, car un bouton lilas clair a besoin d’un texte sombre.

## Le mode sombre est une palette à part entière

Inverser une palette claire fonctionne rarement. Les accents saturés brillent trop sur le noir, les ombres disparaissent, et le texte blanc pur éblouit. Construisez le mode sombre comme un second jeu de valeurs : un fond quasi noir avec une pointe de teinte, des surfaces qui s’éclaircissent à mesure qu’elles s’élèvent, un texte plus doux, et un accent éclairci jusqu’à atteindre le contraste. [Le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) va plus loin.

## Quand la couleur de marque va au-delà des boutons

Si l’accent ne sert qu’aux boutons, le site peut paraître générique. La réponse n’est pas de mettre plus d’accent partout, mais un endroit où la marque peut s’exprimer : l’en-tête, une bande de mise en avant ou le pied de page. Un riche dégradé dans la famille de la marque y fonctionne bien, pendant que le reste de la page reste calme et lisible.

Un en-tête de site large pour un cabinet de kinésithérapie, avec un titre court sur un riche dégradé

Une bande expressive en 1920×1080 porte la marque ; le reste du site utilise les rôles calmes vus plus haut.

Un Mark Gradiently peut être cette couche expressive : un fond que personne d’autre n’a, qui choisit pour chaque ligne une couleur de texte dans sa propre palette pour que les titres restent lisibles. Pour aller plus loin sur les associations, voyez [l’harmonie des couleurs](https://gradiently.design/fr/guide/color-harmony) et [le design de l’en-tête](https://gradiently.design/fr/guide/hero-section-design).

## FAQ

### Combien de couleurs doit avoir un site web ?

En général un accent de marque, trois à cinq neutres pour le fond, les surfaces, le texte et les bordures, et trois couleurs d’état. Plus d’un accent rend plus difficile de savoir ce qui est cliquable.

### Comment choisir la palette de couleurs de mon site ?

Partez de votre accent de marque, teintez les gris neutres vers sa teinte, choisissez un thème clair ou sombre, et vérifiez que chaque association de texte atteint au moins 4,5:1 de contraste.

### Quel rapport de contraste pour le texte d’un site ?

Les WCAG demandent au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte et les éléments d’interface comme les bordures de champs.

### Le fond d’un site doit-il être blanc pur ?

Pas forcément. Un blanc cassé très légèrement teinté paraît souvent plus calme et fait ressortir les cartes blanches comme des surfaces.

### Comment ajouter un mode sombre à ma palette ?

Définissez chaque rôle de couleur comme propriété personnalisée CSS, puis fournissez un second jeu de valeurs dans une media query `prefers-color-scheme: dark`.