contraste des couleurs des liens avec le texte sans lien
J'ai beaucoup lu sur le contraste des couleurs en ce qui concerne la couleur du texte et de l'arrière-plan ( outil de snook ), mais existe-t-il un outil similaire pour valider le contraste du texte lié et non lié?
Il y a bien sûr le débat sur la façon de distinguer visuellement entre le texte du lien et le texte sans lien en utilisant des soulignements, cependant, il est généralement dit que SI vous choisissez de n'utiliser que la couleur pour distinguer les liens, puis le contraste entre le lien et le texte sans lien doit être suffisamment grand pour que vos utilisateurs puissent facilement identifier lequel est lequel.
Existe-t-il une sorte de formule qui évalue cela de manière similaire à l'arrière-plan?
modifier: je veux essentiellement évaluer deux couleurs de premier plan en plus de l'arrière-plan. Ainsi, non seulement les deux couleurs de premier plan nécessitent un contraste suffisant sur l'arrière-plan pour être lisibles, mais elles doivent également fournir un contraste suffisant l'une avec l'autre pour être distinguées.
J'ai fait quelques lectures supplémentaires et il semble que la réponse est que le texte du lien doit avoir un rapport de contraste de 3: 1 par rapport au texte environnant.
Ainsi, vous pouvez, par exemple, utiliser le Analyseur de rapport de contraste de couleur de luminosité juteuse pour mesurer le contraste du texte du lien et de la couleur du texte sans lien pour voir si leur contraste est supérieur à 3: 1.
Vous pouvez ensuite utiliser l'analyseur de rapport de contraste pour déterminer si les deux couleurs contrastent également suffisamment avec l'arrière-plan.
Avec cette technique, une différence de luminance relative (légèreté) de 3: 1 ou plus avec le texte qui l'entoure peut être utilisée si une confirmation visuelle supplémentaire est disponible lorsque un utilisateur pointe ou tabule vers le lien. Les reflets visuels peuvent, par exemple, prendre la forme d'un soulignement, d'un changement de style de police tel que le gras ou l'italique, ou d'une augmentation de la taille de la police.
Bien que l'utilisation de cette technique soit suffisante pour répondre à ces critères de réussite, ce n'est pas la technique préférée pour différencier le texte du lien. En effet, les liens qui utilisent uniquement la luminance relative de la couleur peuvent ne pas être évidents pour les personnes atteintes de daltonisme noir/blanc. S'il n'y a pas un grand nombre de liens dans le bloc de texte, des soulignements sont recommandés pour les liens.
Le lien ci-dessous présente un exemple de ce à quoi cela ressemblerait pour les personnes atteintes de daltonisme de différents types. Ils vous donnent également 26 couleurs qui fonctionnent à la fois sur un fond blanc pur et un fond noir pur.
Pour tout autre arrière-plan de couleur, vous devez utiliser l'idée de test itératif que j'ai publiée ci-dessus.
Liens avec un rapport de contraste de 3: 1 avec le texte environnant - Ces 26 couleurs Web sécurisées passent à 3: 1 vs noir et 5: 1 vs blanc
En ce qui concerne un outil, il suffit de calculer le rapport de contraste du texte du lien au texte sans lien plus le contraste des deux couleurs sur une troisième couleur d'arrière-plan et si les trois dépassent les limites définies dans les différentes ressources sur cette page, alors je pense que vous auriez la boîte magique que je cherchais.
Question interessante. Je ne connais pas d'outil qui teste à la fois SC 1.4.1 (contraste entre le texte lié et non lié) et SC 1.4.3 et 1.4.6 (contraste de premier plan et d'arrière-plan) Ce serait certainement utile!
Vous pouvez toutefois toujours utiliser l'outil de Snook (ou tout autre outil conçu pour vérifier le contraste de premier plan/arrière-plan) pour vérifier le contraste du texte lié/non lié tant qu'il affiche le rapport de contraste.
EDIT: Pour clarifier, dans mon propre flux de travail, je teste les rapports de contraste de premier plan et d'arrière-plan pour m'assurer qu'ils sont conformes et ensuite, si j'ai besoin de compter sur le contraste entre les liens (le soulignement est toujours le meilleur) je teste le contraste entre lié et non lié texte. Cela peut impliquer un peu de va-et-vient, donc je comprends vraiment à quel point un outil intégré serait utile.
Il existe une formule appelée "Rapport de contraste de luminosité", qui analyse la couleur du lien par rapport à la couleur d'arrière-plan.
http://juicystudio.com/services/luminositycontrastratio.php
Selon WCAG 2.0, vous devez avoir un rapport minimum de 4,5: 1. Pour vous donner un exemple, les liens noirs (# 000000) et les arrière-plans blancs (#FFFFFF) donnent un rapport de 21,00: 1. La formule pour travailler cela est sur le lien fourni, avec une calculatrice pratique.
Je ne connais pas de défenseur de l'accessibilité qui parle de contraste lien/non lien sans indices visuels supplémentaires. Le W3 WAI recommande un rapport de contraste de 3: 1 mais c'est avec des repères visuels (souligné).
Il n'y a pas de niveau spécifique de contraste ou de combinaisons de couleurs spéciales qui "fonctionnent" sans les repères visuels. Cela dépend simplement du pourcentage de personnes qui ne peuvent pas déterminer visuellement ce qu'est un lien, et il n'y a pas de formule simple pour cela car il existe de nombreux différents types de daltonisme et différents degrés d'entre eux.
Jetez un œil à cet outil: Accesskey Malheureusement, vous devez avoir le site Web en ligne!