Contraste d'une boîte de message
Je suis en train de mettre à jour les couleurs de notre application et de les rendre aussi cohérentes que possible, mais j'essaie également de les mettre en conformité avec la cote WCAG AA pour le contraste.
Un domaine pour lequel je ne sais pas si je dois le faire est un message d'alerte/info qui s'affiche en haut d'un formulaire pour donner aux utilisateurs des informations sur les avertissements ou les erreurs par exemple.
Dans cet exemple, le texte a un contraste AA de 7.09:1, mais la boîte jaune elle-même n'est que 1.39:1 et échoue donc, mais la boîte contenant n'est pas un composant, ou quoi que ce soit avec lequel un utilisateur doit interagir directement, ai-je donc vraiment besoin de m'inquiéter du contraste ici? Du point de vue du design, je préférerais une couleur plus claire (et sur les autres types de messages également) mais je suis juste conscient du contraste
Cet exemple que vous avez donné est parfaitement acceptable.
Le contraste des couleurs s'applique aux étiquettes de contrôle, au texte, etc. Le contraste des parties décoratives n'est pas important (sauf si vous placez du texte dans une image comme un garçon fou, auquel cas le contraste est important ici.)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
Les informations ici devraient vous guider à travers ce que vous devez considérer, quelques scénarios en bas.
La règle d'or est la suivante: si vous pouvez le lire, augmentez le contraste, si le texte et les images ont du sens sans couleur d'arrière-plan, le contraste n'a pas d'importance pour l'arrière-plan (c'est-à-dire que si vous supprimez entièrement l'arrière-plan, le texte et l'image toujours logique).
Vous pouvez avoir un trait de bordure autour de la boîte dans une couleur sombre pour augmenter le contraste à 3: 1 (Exigence minimale pour SC 1.4.11 https: //www.w3. org/WAI/WCAG21/Comprendre/non-text-contrast.html )
De plus, si vous avez des icônes interactives dans la boîte, comme l'icône de rejet ou l'icône de développement/réduction, assurez-vous qu'elle présente également un contraste minimum de 3: 1. Bonne chance avec votre refonte de conception.