Quelle couleur pour les messages d'erreur pour un formulaire avec un fond rouge?
J'ai un grand site Web avec quelques formulaires. Il existe quatre couleurs d'arrière-plan pour les composants form. L'un d'eux est rose/rouge.
Voici l'image et le message d'erreur:
Je ne peux pas changer la couleur de fond du formulaire, mais je suis libre de changer le style du message (couleur de fond, couleur du texte, etc.).
Qu'est-ce que tu penses? Je n'aime pas le rouge avec du texte blanc. Le message d'erreur n'est pas très visible, car l'arrière-plan est rouge . J'essaye depuis quelques jours avec d'autres styles rouge, et quelques oranges, mais ça a l'air bizarre.
Les arrière-plans bleus ou verts sont vraiment visibles, mais cela peut prêter à confusion. (succès = vert, erreur = rouge)
Comment puis-je améliorer ce formulaire?
Je veux dire, je devrais changer le message d'erreur et ne pas toucher les composants select.
Quelques options, inspirées de vos réponses:
- 1 est actuel.
- 2 regarde Nice
- 3 bizarre
- 4 (plus sombre) et 5 (plus clair), similaires, mais l'ombre est différente
Merci à tous pour vos commentaires !!
J'irais avec une couleur qui conservera toujours un contraste saisissant. J'éviterais également de m'aventurer trop loin en dehors des styles que les utilisateurs connaissent généralement. Parce que vous travaillez dans un style atypique, si vous déviez et utilisez des éléments inconnus, vous risquez de confondre un pourcentage de vos utilisateurs. Voici ce que je pense que je recommanderais. 
J'irais avec quelque chose dans l'ombre de l'arrière-plan, mais j'aurais un texte plus rouge dans l'alerte. Vous pouvez également ajouter une bordure à l'ombre du texte pour la faire ressortir davantage comme une erreur.
Un fond jaune vif avec du texte noir fonctionnerait bien.
Convient à la palette de couleurs d'un panneau d'avertissement.
La couleur standard pour les messages d'erreur est le rouge, voir cette question :
Un point important à comprendre est que l'utilisation de couleurs conventionnelles pour les erreurs est importante car elles rendent les erreurs plus visibles. L'utilisateur ennuyé par la couleur du message d'erreur pose beaucoup moins de problèmes que l'utilisateur ne pouvant pas remplir le formulaire car il n'a pas remarqué l'erreur. Du moins dans la plupart des cas.
Puisque le rouge sera perdu dans votre arrière-plan, la meilleure chose à faire est d'utiliser du jaune avec un symbole d'erreur rouge.
Le jaune attire l'attention et présente également un très bon contraste avec le fond. Le symbole d'erreur rouge indique à l'utilisateur qu'il s'agit d'un message d'erreur, car il s'agit d'un symbole standard bien accepté.
Vous pouvez essayer d'ajouter une bordure blanche, puis jouer avec la couleur d'arrière-plan.
La seule couleur qui communique " quelque chose ne va pas " plus fort que le rouge est la couleur de la mort, le noir.
C'est un cauchemar pour l'accessibilité!
Essayez d'inverser les styles de vos messages d'erreur: texte rouge sur fond blanc.
À partir de plusieurs autres réponses: 
Ne vous fiez jamais qu'à la couleur. L'ajout d'une icône ou d'un texte ou d'une texture aide non seulement les personnes daltoniennes, mais facilite également les choses pour les personnes qui voient régulièrement.
L'utilisation d'une barre gris foncé ou noire donne un fort contraste avec l'arrière-plan. Il est également neutre en couleurs afin que vous puissiez mettre d'autres types/couleurs de notifications dans ces cases.
L'utilisation d'un orange ou d'un jaune au lieu du rouge évite de regarder trop près de l'arrière-plan. Et il a toujours une connotation utile de panneaux d'avertissement .
La question fournissait en fait beaucoup d'autres options disponibles, mais pour plus de clarté, j'ai pensé qu'il serait bon de résumer certaines des réponses fournies:
- Trouvez une couleur complémentaire à utiliser qui se démarquera - il existe de nombreux outils pour cela, et vous pouvez également consulter les directives de marque comme vérification secondaire; cela peut être pour l'interface utilisateur, la couleur de la police ou une combinaison des deux.
- Créer un calque différent pour attirer l'attention de l'utilisateur - le meilleur exemple est l'utilisation d'ombres pour faire ressortir le composant de message du reste de l'interface, créant ainsi un effet 3D dans un espace de conception plat
- Personnalisez le composant de message d'une manière qui crée le focus d'une manière différente du reste de l'interface; l'exemple donné dans la réponse avec la rayure minimale sur le côté gauche avec un fond noir est une belle mise en œuvre de l'idée
- Appliquer une interaction ou un modèle comportemental - celui-ci est différent du reste car il ne s'agit pas de style visuel mais de conception comportementale ou de modèle, donc un exemple serait une animation pour le composant de message qui dure un peu plus longtemps, il est plus facile de le remarquer ou de créer un composant persistant que l'utilisateur doit fermer, etc.