Couleur du message de succès : pourquoi #00FF00 échoue et les 8 verts à utiliser à la place
Le vert pur est le premier vert de succès que tout le monde choisit, et le mauvais pour du texte. Les quatre correctifs, les huit couleurs de succès clair et sombre d'IBM Carbon, et le code à donner à votre développeur.
La bonne couleur de succès pour du texte est un vert plus foncé, pas #00FF00. Le vert pur a l'air frais mais se lit mal sur fond blanc, et sur un écran sombre il éblouit. Voici les quatre correctifs, les huit couleurs de succès à utiliser en mode clair et sombre, et le code à donner à votre développeur.
Pourquoi le vert pur échoue
Personne ne choisit #00FF00 pour du texte de succès. Il arrive tout seul. C'est le vert de la première ligne de tous les sélecteurs de couleur, le lime du vieux CSS, le premier vert d'un nouveau fichier de design. Il finit donc sur la ligne qui annonce à quelqu'un que son paiement est passé.
Le vert pur est vif et saturé, donc il évoque le « go ». Mais la vivacité est justement le problème. C'est l'une des couleurs les plus claires qu'un écran puisse produire, et un texte clair sur une page claire n'a aucune prise. Du texte blanc sur #00FF00 comme du texte #00FF00 sur blanc ratent largement le minimum WCAG pour le petit texte.
La solution n'est pas une autre teinte. C'est le même vert, assombri jusqu'à ce que le texte ait du poids, et tenu à l'écart des surfaces les plus criardes.
Les verts ci-dessous viennent du design system IBM Carbon, qui publie une rampe de verts complète et attribue des paliers précis à chaque usage.
Correctif 1 : assombrir le vert pour le texte
Nouveau mot de passe
✓ Le mot de passe est robuste.
✕ #00FF00 sur blanc : difficile à lire
Nouveau mot de passe
✓ Le mot de passe est robuste.
✓ #198038 sur blanc : facile à lire
Même champ, même message, deux verts. Le bon est le green 60 de Carbon. Il reste nettement vert, et c'est celui que l'œil lit, même si celui de gauche est le vert « plus vert ».
Utilisez le vert foncé pour chaque morceau de texte de succès : la ligne sous un champ, un libellé qui passe au vert, une étiquette « Vérifié » en ligne, l'icône de coche elle-même. Bannissez #00FF00 du texte. Si le vert de votre marque est proche du vert pur, gardez-le pour les illustrations et les grands titres, où la taille fait le travail que la profondeur fait dans le petit texte.
Correctif 2 : teinter la bannière, puis utiliser du texte foncé
✕ Blanc sur #00FF00 : crie, reste difficile à lire
✓ #044317 sur #A7F0BA : facile à lire
Une barre néon pleine avec du texte blanc est l'élément le plus bruyant de la page, et elle reste difficile à lire, car le blanc sur #00FF00 a le même contraste faible que #00FF00 sur blanc. Les couleurs ont échangé leurs places. Le problème, lui, est resté.
Un conteneur vert doux avec du texte vert foncé dit « succès » par sa couleur et laisse les mots se lire. Le succès est une bonne nouvelle, il n'a donc pas à hurler. Le système Polaris de Shopify arrive au même endroit : sa surface de succès #CDFED4 porte du texte vert foncé, #014B40.
Utilisez le conteneur teinté pour les bannières, les toasts et les alertes en ligne. Réservez l'aplat vert plein à une seule chose, l'unique bouton qui confirme l'action, avec un libellé foncé ou blanc sur un vert assez profond pour le porter, comme #198038.
Correctif 3 : l'adoucir sur les écrans sombres
État du site
✓ Déploiement prêt.
✕ #00FF00 sur fond sombre : éblouit
État du site
✓ Déploiement prêt.
✓ #42BE65 sur fond sombre : calme et net
Le mode sombre inverse le conseil. Le vert pur sur du quasi-noir passe le minimum de contraste haut la main, donc un vérificateur ne le signalera pas. C'est pourtant le mauvais choix. Un vert pleinement saturé sur gris foncé brille et fatigue l'œil, et une liste de dix d'entre eux est pénible à regarder.
Le thème sombre de Carbon utilise un vert plus doux et plus clair, green 40, #42BE65. Sur #161616, il se lit facilement sans l'éblouissement. C'est la règle générale des thèmes sombres : les couleurs saturées qui marchent sur blanc deviennent plus claires et plus douces sur sombre. Notre article sur les systèmes de couleurs du mode sombre couvre le reste de la palette, et la règle sœur pour les erreurs se trouve dans couleur des messages d'erreur.
Correctif 4 : ne jamais utiliser la couleur seule
Paiement 1
✕ Un simple point : lequel est passé ?
Paiement 1
✓ Réussi
✓ Coche et mot : toujours évident
Prenez un point vert pour « Réussi » et un point rouge pour « Échoué ». Convertissez-les en niveaux de gris avec les pondérations de luminance habituelles (0,299 rouge, 0,587 vert, 0,114 bleu) et ils ressortent presque identiques :
Point vert #198038 en gris
Point rouge #DA1E28 en gris
Voilà à quoi ressemble une colonne de statuts pour quelqu'un atteint de daltonisme rouge-vert, et à peu près pour n'importe qui sur un écran délavé en plein soleil. Chaque état de succès a besoin de trois choses :
- Une couleur : le vert plus foncé sur clair, le vert plus doux sur sombre.
- Une forme : une coche devant le message, visible sans couleur.
- Des mots : ce qui s'est passé. « Paiement reçu » vaut mieux qu'un point vert.
C'est la règle WCAG 1.4.1, utilisation de la couleur : la couleur peut appuyer un message, jamais être la seule façon de le transmettre. Passez votre écran en niveaux de gris une fois avant de livrer une liste de statuts (Réglages Système, Accessibilité, Affichage, Filtres de couleur sur Mac ; le même filtre existe dans les réglages d'affichage d'accessibilité sur iOS et Android).
Les 8 couleurs de succès, claires et sombres
Touchez une pastille pour copier son code.
| Rôle | Clair | Sombre | À utiliser pour |
|---|---|---|---|
| Succès | #198038 | #42BE65 | Texte de succès, icônes de coche, bordures de succès |
| Sur succès | #FFFFFF | #161616 | Texte sur un aplat de succès, comme un bouton Confirmer |
| Conteneur de succès | #A7F0BA | #044317 | Bannières, toasts et alertes en ligne |
| Sur conteneur de succès | #044317 | #A7F0BA | Texte et icônes à l'intérieur de ces conteneurs |
Le thème sombre n'est pas une nouvelle palette. Ce sont les mêmes quatre paliers de la rampe de verts avec les rôles échangés : la couleur du conteneur devient la couleur du texte, et inversement.
À donner à votre développeur
Les mêmes huit couleurs en propriétés CSS personnalisées, avec les valeurs sombres activées selon le thème du système :
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
Carbon les nomme green 60, green 40, green 20 et green 80 sur sa rampe de verts. Quel que soit le système que vous utilisez, les quatre noms de rôles valent le coup d'être volés : ils empêchent la prochaine personne de tendre la main vers #00FF00.
Un piège voisin : le systemGreen d'iOS, #34C759, est trop clair pour du texte sur blanc. Apple l'utilise pour les interrupteurs et les aplats, où c'est la forme qui porte le sens. Ne le copiez pas dans du texte courant.
FAQ
De quelle couleur doivent être les messages de succès ?
Un vert foncé facile à lire en petite taille, comme #198038 sur fond blanc. Associez-le à une coche et à un mot qui dit ce qui s'est passé.
#00FF00 est-il accessible pour du texte de succès ?
Non. Le vert pur sur blanc rate largement le minimum de contraste WCAG pour le texte courant. Utilisez un vert plus foncé comme #198038.
Quel est un bon vert pour une bannière de succès ?
Teintez le fond avec un vert pâle comme #A7F0BA et posez dessus du texte vert foncé, #044317. Cette paire est facile à lire et ne crie pas.
De quelle couleur doit être le succès en mode sombre ?
Un vert plus doux et plus clair comme #42BE65 sur #161616. Le vert pur passe le test de contraste sur fond sombre mais éblouit et fatigue l'œil.
Peut-on montrer un succès avec la couleur seule ?
Non. Un point vert et un point rouge se ressemblent en niveaux de gris, et la règle WCAG 1.4.1 exige que la couleur ne soit jamais le seul signal. Ajoutez une coche et un mot comme Réussi ou Échoué.
Sources
- Design system IBM Carbon, aperçu des couleurs : green 60 #198038, green 40 #42BE65, green 20 #A7F0BA, green 80 #044317 et gray 100 #161616.
- WCAG 2.2, 1.4.3 Contrast (Minimum) et 1.4.1 Use of Color.
- Contrastes vérifiés avec la formule de luminance relative WCAG (blanc sur #00FF00 et #00FF00 sur blanc 1,37:1 ; #198038 sur blanc 5,02:1 ; #044317 sur #A7F0BA 8,69:1 ; #42BE65 sur #161616 7,57:1 ; #00FF00 sur #161616 13,19:1). Les valeurs de gris utilisent les pondérations de luminance 0,299, 0,587, 0,114.
- Surface de succès Shopify Polaris #CDFED4 avec texte #014B40, issue de
@shopify/polaris-tokens9.4.2. - systemGreen d'iOS #34C759 mesuré contre le blanc (2,22:1) ; voir les Human Interface Guidelines sur la couleur d'Apple.
- Le formulaire de mot de passe, le reçu envoyé à mia@brainy.ink, le déploiement brainy-site et la liste de paiements sont des exemples inventés pour cette page.
- Première publication sous forme de carrousel sur UX Brainy.
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
