Couleur des messages d'erreur : pourquoi #FF0000 échoue et les 8 rouges à utiliser à la place
Le rouge pur est la première couleur d'erreur que tout le monde choisit, et la mauvaise pour du texte. Les quatre corrections, les huit couleurs d'erreur claires et sombres, et le code à confier à votre développeur.
La bonne couleur d'erreur pour le texte est un rouge plus foncé, pas #FF0000. Le rouge pur fait beaucoup de bruit et se lit pourtant mal aux petites tailles des messages d'erreur, et il vibre sur les écrans sombres. Voici les quatre corrections, les huit couleurs à utiliser en mode clair et sombre, et le code à confier à votre développeur.
Pourquoi le rouge pur échoue
Personne ne choisit #FF0000 pour du texte d'erreur. Il s'impose tout seul. C'est le rouge de la première rangée de tous les sélecteurs de couleur, le mot-clé red en CSS, le premier échantillon d'un nouveau fichier de design. Il finit donc sur la seule ligne de l'écran qui doit être lue correctement du premier coup.
Le rouge pur est vif et saturé, il paraît donc fort, mais il n'est pas foncé. Sa luminosité est proche de celle d'un gris moyen. En petit sur fond blanc, les lettres perdent leurs contours.
La solution n'est pas une autre teinte. C'est le même rouge, assombri jusqu'à ce que le texte ait du poids.
Correction 1 : assombrir le rouge du texte
Saisissez une adresse e-mail valide.
✕ #FF0000 sur blanc : difficile à lire
Saisissez une adresse e-mail valide.
✓ #B3261E sur blanc : facile à lire
Même champ, même message, deux rouges. Le bon est la couleur d'erreur du thème clair de Material 3, et c'est celui sur lequel votre œil se pose, alors que celui de gauche est le rouge « plus rouge ».
Utilisez le rouge foncé pour tout texte d'erreur : le message sous un champ, un libellé qui devient rouge, une étiquette « Obligatoire » en ligne. Bannissez #FF0000 du texte. Si le rouge de votre marque est proche du rouge pur, gardez-le pour les illustrations et les grands titres, où la taille fait le travail que la profondeur fait dans le petit texte.
Correction 2 : teintez la bannière, ne la peignez pas
✕ Blanc sur #FF0000 : crie, reste difficile à lire
✓ #410E0B sur #F6CBC8 : facile à lire
Une barre rouge pleine avec du texte blanc est l'élément le plus bruyant de la page et reste difficile à lire, car le blanc sur #FF0000 a le même faible contraste que #FF0000 sur blanc. Les couleurs ont échangé leurs places, pas le problème.
Un conteneur rouge doux avec du texte rouge foncé dit « erreur » par sa couleur et laisse les mots se lire. L'urgence vient de l'icône et du message. Le conteneur de Material est un #F9DEDC plus pâle ; nous prenons un cran plus soutenu, #F6CBC8, car le rose plus pâle se délave à côté d'une interface sombre.
Correction 3 : adoucissez-le sur écran sombre
Saisissez une adresse e-mail valide.
✕ #FF0000 sur sombre : vibre
Saisissez une adresse e-mail valide.
✓ #F2B8B5 sur sombre : calme et net
Le mode sombre inverse le conseil. Le rouge pur sur quasi-noir passe le minimum de contraste, un vérificateur ne le signalera donc pas, mais un rouge saturé sur gris foncé vibre sur ses bords. Le thème sombre de Material utilise un rouge d'erreur clair et doux, #F2B8B5, qui garde avec le fond sombre la même relation que #B3261E avec le blanc.
C'est la règle générale des thèmes sombres : les couleurs saturées qui fonctionnent sur blanc deviennent plus claires et plus douces sur fond sombre. Notre article sur le design du mode sombre couvre le reste de la palette.
Correction 4 : vérifiez en niveaux de gris
✕ Bordure seule : quel champ est faux ?
Saisissez une adresse e-mail valide.
✓ Icône et mots : toujours évident
Le rouge pur et un gris moyen ont presque la même luminosité : un champ dont le seul signal d'erreur est une bordure rouge ressemble, en niveaux de gris, à tous les autres. Passez votre écran en niveaux de gris une fois avant de livrer un formulaire (Réglages Système, Accessibilité, Affichage, Filtres de couleur sur Mac ; le même filtre se trouve dans les réglages d'affichage d'accessibilité sur iOS et Android).
Chaque état d'erreur a besoin de trois choses :
- Une couleur : le rouge plus foncé sur clair, le rouge plus doux sur sombre.
- Une forme : une icône devant le message, visible sans couleur.
- Des mots : ce qui a échoué et quoi faire. « Saisissez une adresse e-mail valide » vaut mieux que « Saisie invalide ».
C'est le critère WCAG 1.4.1, utilisation de la couleur : la couleur peut appuyer un message, jamais être le seul moyen de le donner.
Les 8 couleurs d'erreur, claires et sombres
Touchez une pastille pour copier son code.
| Rôle | Clair | Sombre | À utiliser pour |
|---|---|---|---|
| Erreur | #B3261E | #F2B8B5 | Texte d'erreur, bordures d'erreur, icône d'erreur |
| Sur erreur | #FFFFFF | #601410 | Texte sur un fond d'erreur plein, comme un bouton Supprimer |
| Conteneur d'erreur | #F6CBC8 | #8C1D18 | Bannières, toasts et boîtes d'alerte en ligne |
| Sur conteneur d'erreur | #410E0B | #F9DEDC | Texte et icônes à l'intérieur de ces conteneurs |
À donner à votre développeur
Les mêmes huit couleurs en propriétés personnalisées CSS, avec les valeurs sombres activées selon le thème du système :
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
Sur Material, ces rôles existent déjà sous les noms colorScheme.error, onError, errorContainer et onErrorContainer ; le seul changement par rapport au défaut est le conteneur clair plus profond. Ailleurs, les quatre noms valent le coup d'être volés : ils empêchent la prochaine personne de se jeter sur #FF0000.
Les chiffres du contraste
Le WCAG 2 demande au moins 4,5 pour 1 pour le texte courant.
| Paire | Contraste |
|---|---|
| Texte #FF0000 sur blanc | 4,0 pour 1, sous le minimum |
| Texte #B3261E sur blanc | 6,5 pour 1 |
| Texte blanc sur #FF0000 | 4,0 pour 1, sous le minimum |
| Texte #410E0B sur #F6CBC8 | 11,1 pour 1 |
| Texte #F2B8B5 sur sombre #141218 | 10,9 pour 1 |
| Texte #FF0000 sur sombre #141218 | 4,7 pour 1, passe et vibre quand même |
La dernière ligne explique pourquoi un vérificateur ne suffit pas. Le rouge pur sur sombre passe techniquement, et reste pourtant le mauvais choix.
FAQ
De quelle couleur doivent être les messages d'erreur ?
Un rouge foncé facile à lire aux petites tailles, comme #B3261E sur fond blanc. Associez-le à une icône et à un message qui explique comment corriger le problème.
#FF0000 est-il accessible pour du texte d'erreur ?
Non. Le rouge pur sur blanc a un contraste d'environ 4,0 pour 1, sous les 4,5 pour 1 que le WCAG demande pour le texte courant, et les messages d'erreur sont généralement petits.
Quelle est la couleur d'erreur dans Material Design 3 ?
Le rôle d'erreur du thème clair est #B3261E avec #FFFFFF par-dessus, le conteneur d'erreur est #F9DEDC avec du texte #410E0B. Dans le thème sombre, le rôle d'erreur est #F2B8B5 et le conteneur est #8C1D18.
Quelle couleur pour les erreurs en mode sombre ?
Un rouge plus clair et plus doux comme #F2B8B5. Le rouge pur passe le test de contraste sur fond sombre mais vibre et fatigue à la lecture.
Peut-on signaler une erreur par la couleur seule ?
Non. Environ un homme sur douze a une forme de daltonisme, et le WCAG 1.4.1 exige que la couleur ne soit jamais le seul signal. Ajoutez une icône et des mots.
Sources
- Rôles d'erreur de base de Material Design 3, clairs et sombres, issus des rôles de couleur Material et des jetons de couleur androidx Compose.
- WCAG 2.2, 1.4.3 Contraste (minimum) et 1.4.1 Utilisation de la couleur.
- Ratios de contraste calculés avec la formule de luminance relative du WCAG. Le rouge pur et le gris #808080 ont une luminance relative de 0,213 et 0,216.
- Prévalence du daltonisme d'après le National Eye Institute.
- Publié d'abord sous forme de carrousel sur UX Brainy.
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
