Quelle est la meilleure façon d'afficher le champ et le texte désactivés pour la prise en charge du contraste des couleurs
Je travaille sur un projet qui doit prendre en charge l'accessibilité au contraste des couleurs.
Actuellement, sur notre système, les données désactivées sont présentées en grisé, mais nous devons maintenant prendre en charge le contraste des couleurs pour l'accessibilité, ce qui signifie qu'il devrait y avoir un très bon contraste entre les couleurs d'arrière-plan et de premier plan et le texte gris clair sur le fond blanc ne le fait pas. réussir le test de contraste.
De WCAG 2.0, qui est généralement accepté comme un moyen d'être conforme 508 dans votre produit:
1.4.3 Contraste (minimum): La présentation visuelle du texte et des images de texte a un rapport de contraste d'au moins 4,5: 1, à l'exception des éléments suivants: (Niveau AA)
Grand texte : Le texte à grande échelle et les images de texte à grande échelle ont un rapport de contraste d'au moins 3: 1;
Accessoire : texte ou images de texte qui font partie d'un composant d'interface utilisateur inactif, qui sont de la décoration pure, qui ne sont pas visibles par quiconque, ou faisant partie d'une image contenant un autre contenu visuel important, n'a pas d'exigence de contraste.
Logotypes : Le texte qui fait partie d'un logo ou d'une marque n'a pas d'exigence de contraste minimum.
Fondamentalement, cela signifie que si l'élément désactivé est accessoire, par exemple ne transmet pas d'informations importantes pour l'utilisateur qui ne sont pas transmises par un autre moyen, il n'est donc pas important qu'elles respectent la directive de contraste des couleurs.
Par exemple, les boutons qui sont désactivés car ils ne peuvent pas encore être utilisés (comme ceux ci-dessous) n'ont pas à passer le contraste de couleur car une fois qu'ils sont activés et donc actionnables, ils passent.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Cependant, si le contenu est important et n'est pas transmis d'une autre manière, vous pouvez utiliser Chrome Developer Accessibility Tools ou Color Contrast Checker qui vous indiquera ce dont vous avez besoin pour changer votre couleur pour le rendre accessible.
Par exemple, vous avez une série d'options que l'utilisateur peut sélectionner et l'une d'entre elles sera toujours vraie, mais vous devez toujours informer l'utilisateur de cette option, vous pouvez la désactiver.
Probablement pas le meilleur, mais quelques options pour améliorer la situation:
Couleur d'arrière-plan et de police.
Pointeur non autorisé en survol. (CSS => curseur: non autorisé;)
