# Palettes de couleurs vives qui restent lisibles

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

Les couleurs éclatantes sont faciles à aimer et faciles à rendre illisibles. Le secret : savoir quels vifs veulent du texte noir, lesquels du blanc, et donner à toute la palette un endroit calme où se reposer.

## The short version

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

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

| Couleur | Hex | Avec du texte blanc | Avec du texte noir |
| --- | --- | --- | --- |
| Citron | `#FFD60A` | 1,41:1 | 13,38:1, utilisez du noir |
| Aqua | `#00C2FF` | 2,07:1 | 9,14:1, utilisez du noir |
| Sarcelle menthe | `#00D1B2` | 1,95:1 | 9,68:1, utilisez du noir |
| Vert vif | `#34C759` | 2,22:1 | 8,51:1, utilisez du noir |
| Mandarine | `#FF7A00` | 2,61:1 | 7,23:1, utilisez du noir |
| Rouge coquelicot | `#FF3B30` | 3,55:1 | 5,32:1, utilisez du noir |
| Rose vif | `#FF2D87` | 3,51:1 | 5,37:1, utilisez du noir |
| Framboise | `#E0115F` | 4,76:1, utilisez du blanc | 3,97:1 |
| Violet électrique | `#8B3DFF` | 4,99:1, utilisez du blanc | 3,78:1 |
| Cobalt | `#1D4ED8` | 6,70:1, utilisez du blanc | 2,82:1 |
| Rouge signal | `#C81D11` | 5,77:1, utilisez du blanc | 3,27:1 |

Le WCAG AA demande 4,5:1 pour le corps du texte et 3:1 pour le grand texte. La framboise et le violet électrique sont des cas limites : le blanc réussit, mais de justesse.

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

- Blanc chaud: #fff8ec
- Rose vif: #ff2d87
- Mandarine: #ff7a00
- Citron: #ffd60a
- Encre: #111111

Étal de fruits. Trois vifs chauds entre un blanc chaud et une encre. L’encre porte tout le texte ; les vifs portent les formes et les grands mots.

- Violet de nuit: #1a1033
- Sarcelle menthe: #00d1b2
- Citron: #ffd60a
- Rose vif: #ff2d87
- Blanc lilas: #f4f1ff

Salle d’arcade. Un fond sombre fait briller les vifs, et les trois réussissent AA contre lui : le citron à 12,76:1, la sarcelle menthe à 9,23:1, le rose vif à 5,13:1.

- **Fête à la piscine :** aqua `#00C2FF`, vert vif `#34C759`, citron `#FFD60A`, blanc `#FFFFFF`, marine profond `#0B1F3A` pour 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 `#FFF8EC` avec l’encre `#111111` mesure 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 `#2F6BFF` mesure 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](https://gradiently.design/fr/guide/60-30-10-rule) 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.

Une publication vive de soldes d’été où le petit texte de soutien se perd sur le fond éclatant

Un fond criard avec les mots directement dessus : le titre survit, la ligne de détail disparaît.

La même publication vive de soldes d’été avec chaque ligne de texte nette sur une zone plus calme derrière elle

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](https://gradiently.design/fr/guide/gradient-interpolation) explique la différence.

- Du rose au citron: `linear-gradient(135deg, #ff2d87 0%, #ff7a00 55%, #ffd60a 100%)`
- De l’aqua au vert: `linear-gradient(135deg, #00c2ff 0%, #00d1b2 50%, #34c759 100%)`
- Du rose à l’aqua en oklch: `linear-gradient(in oklch 135deg, #ff2d87 0%, #00c2ff 100%)`
- Halo rose sur la nuit: `radial-gradient(circle at 30% 30%, #ff2d87 0%, #8b3dff 45%, #1a1033 90%)`

Les vifs voisins se fondent nettement. Les opposés restent éclatants quand on interpole en oklch.

Pour d’autres combinaisons, voir les [dégradés vibrants](https://gradiently.design/fr/guide/vibrant-gradients) et les [dégradés néon](https://gradiently.design/fr/guide/neon-gradients). Pour les conseils complets sur le contraste, lisez le [contraste des couleurs](https://gradiently.design/fr/guide/color-contrast-accessibility).

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](https://gradiently.design/fr/guide/rgb-vs-cmyk) explique à quoi s’attendre.

## FAQ

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