Comment déterminer si les liens ont suffisamment de contraste?
Je trouve très difficile de distinguer les liens du texte normal sur Programmers Stack Exchange , en particulier les liens visités sur les messages muraux. Le schéma de couleurs utilisé est le suivant:
Background #fafafa (there's a background image, that's mostly #fafafa)
Normal text #333333
Normal Link #B64D27
Visited Link #7F3A21
Un exemple de mur de texte est cette réponse , l'un des miens. Lors de la relecture, je n'ai pas vu le lien (visité) vers l'article Wikipédia sur le premier paragraphe - en fait, j'ai pensé que j'avais oublié de l'ajouter!
Est-ce juste moi ou ce problème est-il susceptible d'être partagé par un nombre important d'utilisateurs? Je ne sais pas comment aborder cela du point de vue de l'expérience utilisateur, du jargon approprié et tout, je recherche des réponses qui font référence à des pratiques établies et/ou à des études qui permettent de savoir si les couleurs doivent être révisées. Je présenterai ces résultats sur Méta des programmeurs .
Il n'y a pas de règles , du moins pas de règles dures et rapides. Suivre les recherches à la lettre peut conduire à faire un site laid - les liens bleus fonctionnent mieux, mais les liens bleus sur fond rouge sont difficiles à lire! Cependant, la recherche peut vous guider vers les "meilleures pratiques" et maintenir votre sens de la bonne esthétique afin que vous sachiez quand rompre avec les conventions.
Bien qu'il n'y ait pas de règles, il existe de nombreuses directives; certains dépassés et certains très bons.
Le passé
L'ancien mode veille pour l'apparence des liens est les messages Alertbox de Nielson:
Visualisation des liens et Changer la couleur de Liens visités
Les gens se perdent et tournent en rond lorsque les sites Web utilisent la même couleur de lien pour les destinations visitées et nouvelles. Pour réduire la confusion de navigation, sélectionnez différentes couleurs pour les deux types de liens.
Ces messages donnent un bon résumé de base, mais ils sont assez anciens. La grande chose à retenir est que les liens doivent être une couleur unique, choisie de manière cohérente et les liens visités doivent être une couleur clairement différente et choisie de manière cohérente. Ne mettez pas trop de stock dans les statistiques cependant car le web a beaucoup changé en 7 courtes années. Nous reviendrons aux statistiques actuelles ensuite.
Le présent
La pièce de recherche la plus importante sur les liens est probablement l'expérience Google montrant que les liens bleus sont davantage cliqués . Les liens non bleus sont moins cliqués, donc la palette de couleurs doit en tenir compte. Le bleu doit être évité pour la copie du corps pour cette raison, tout comme le soulignement.
En ce qui concerne les liens visités, voici un excellent article à jour sur l'état des liens visités sur le Web par Kevin Simons; Où sont passés tous les liens visités?
Simons note que l'utilisation des couleurs des liens visités a fortement chuté - j'irais jusqu'à dire qu'en 2004, la plupart des sites n'ont probablement jamais pris la peine de styliser leurs liens, entraînant le changement de couleur par défaut des liens visités. Simons souligne que l'utilisation principale des liens visités est d'aider un utilisateur à savoir où vous êtes allé:
Plus précisément, faites attention à l'effort cognitif que vous devez consacrer aux sites sans couleur de lien visitée, juste pour garder une trace de l'endroit où vous vous êtes rendu. Vous êtes sûr de développer une appréciation renouvelée pour le lien visité.
L'utilisateur a-t-il besoin d'un rappel qu'il a déjà navigué vers ce lien? Sinon, le style de lien ne devrait probablement pas changer à = tous. Notez que pour les éléments de navigation de niveau supérieur, une couleur de lien visitée peut être inutile et visuellement laide (ai-je vraiment besoin de VOIR visuellement que je n'ai jamais utilisé la section Contactez-nous?).
Pour les pages dynamiques, une couleur de lien visitée peut être carrément trompeuse; de nombreuses applications Web ont aujourd'hui abandonné la convention des liens visités, car "visité" ne signifie pas grand-chose dans le contexte d'une application ou de pages dynamiques.
Si vous devez faire une distinction entre les liens visités et non visités, Le contraste est roi .
Contraste
Comme le note Leslie Jensen-Inman de A List Apart:
L'utilisation efficace du contraste ne différencie pas seulement votre conception des autres, c'est l'ingrédient essentiel qui rend le contenu accessible à chaque spectateur.
L'article explique en détail l'importance du contraste et comment l'utiliser efficacement; Je vous suggère fortement de le lire attentivement.
Ils notent que pour des raisons d'accessibilité, vous devez vérifier vos couleurs par rapport aux simulateurs de daltonisme courants pour vous assurer que le contraste convient aux utilisateurs daltoniens ainsi qu'aux utilisateurs non daltoniens. Pensez à daltoniser vos couleurs pour voir si elles fonctionnent mieux.
Ils font également apparaître CheckMyColors.com , un excellent site qui vous permettra de vérifier le contraste d'arrière-plan/de premier plan de tous les éléments de votre site à la fois.
Notez que le contraste de premier plan/arrière-plan pas vous indiquera si deux bits de texte de premier plan ont suffisamment de contraste! C'est pourquoi vous ne pouvez pas simplement utiliser le Color Contrast Checker comme certains l'ont suggéré et l'appeler une affaire terminée.
Voici un excellent guide sur Contraste typographique qui vous aidera à rassembler toutes les formes de contraste pour faire un site agréable et fluide.
En fin de compte, le contraste est idéal pour différencier les choses, mais il doit être utilisé de manière appropriée. S'il n'y a vraiment aucune raison de différencier les liens qui sont visités et non visités, ne le faites pas. Si le contraste maximum ou les couleurs de lien standard sont trop moches avec votre conception actuelle, essayez quelque chose de différent.
Seuls les vrais utilisateurs peuvent vérifier si vos liens sont distincts et fonctionnels.
Je suis sûr que c'est une partie intentionnelle de l'UX Exchange Stack.
Les réponses sont censées être autonomes, car les sites externes peuvent se déconnecter ou renommer/supprimer la page liée. Si le contenu principal de la réponse était un lien vers un autre site, cette réponse est maintenant inutile.
Les liens ne sont pas soulignés, afin de ne pas détourner l'attention de la réponse, car ils sont censés aller uniquement vers des documents supplémentaires. Un raisonnement similaire existe pour l'utilisation de couleurs moins contrastées avec le texte que le Web en général.
Les WCAG fournissent des directives pour un contraste de couleur minimum entre le premier plan (texte) et l'arrière-plan. Le texte de lien normal ci-dessus ne répond pas aux exigences de contraste des couleurs. Je recommanderais d'augmenter le contraste.
Sachez également que trop de contraste peut causer des problèmes à certains utilisateurs (tels que les utilisateurs souffrant de dyslexie). WCAG n'en tient pas compte. Il y avait également un vérificateur de différence de couleur HP qui avait un seuil de contraste légèrement inférieur avec une limite supérieure.
Je me souviens avoir lu un article qui affirmait que le bleu n'était pas une bonne couleur pour distinguer le texte du lien car avec l'âge les cônes dans l'œil qui enregistrent la teinte bleue se détériorent. Toutes mes excuses que je ne peux pas fournir un lien!
Quant à savoir si d'autres souffriront du même problème que vous, je n'ai pas de chiffres pour le confirmer, mais imaginez qu'il puisse y en avoir d'autres qui ont des problèmes similaires.
Soyez cohérent avec vos liens sur votre site et différenciez-les toujours du texte standard. Il existe différentes façons de le faire, qui ont toutes leurs propres avantages et inconvénients (tels que les liens de soulignement, etc.).
Liens utiles:
http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
http://www.lighthouse.org/accessibility/design/accessible-print-design/effective-color-contrast
http://www.useit.com/alertbox/20040510.html
http://www.stcsig.org/usability/topics/colorblind.html
Analyseur de contraste de couleur en ligne:
Contraste des couleurs est une excellente ressource pour tester si vos couleurs sont ou non conformes à diverses normes. Il fournit un moyen aussi simple de tester le contraste.
Si vous avez des difficultés à distinguer les liens visités du reste du texte, il y a un problème de convivialité. Vous n'avez pas à prouver qu'il y a un problème. Partagez simplement votre expérience sur le méta site.
Personnellement, je souligne toujours les liens lorsqu'ils sont intégrés dans des paragraphes de texte. Il est plus facile de les repérer. S'appuyer uniquement sur les couleurs peut être problématique en raison des différents paramètres d'écran.
J'aime position de Lebedev à ce sujet (désolé pour l'article traduit). Fondamentalement, c'est comme ça:
- Les liens doivent être soulignés;
- Rien sauf les liens ne peut être souligné;
- Rien sur la page ne peut être de la même couleur que les liens (généralement, bleu, noir ou gris foncé);
- Il est très logique de mettre en évidence le lien survolé en changeant sa couleur ou son arrière-plan;
- Le soulignement en pointillés peut être utilisé pour les liens qui ne permettent pas à l'utilisateur d'accéder à une autre page (par exemple, l'ouverture d'une calculatrice, plus d'informations, etc.). Un clic répété sur un tel lien devrait ramener la page à son état précédent;
Il est facile de vérifier si vous avez bien fait: si l'utilisateur peut dire où se trouve le lien sur votre page sans toucher à sa souris ou à son clavier - vous avez bien fait.
Personnellement, je crois que Stack Exchange a cette large gamme de sous-succursales avec des sites sœurs, toutes avec leur propre codage couleur/polices/icônes/etc., certains raccourcis quand il s'agit de choisir les couleurs se produiront inévitablement. Je ne serais pas surpris si une couleur appropriée pour les liens cliqués est négligée en raison du fait qu'elle est utilisée dans un autre site sœur de Stack Exchange et qu'ils veulent que l'apparence de ce site soit distincte des autres sites Stack Exchange.
Oui, le choix de la couleur du lien est assez mauvais chez Programmers Stack Exchange. Outre le faible contraste et les soulignements manquants, la couleur des liens visités n'est pas très loin de la couleur des liens non visités. Cela dit, à mon avis, tous les sites Stack Exchange auraient dû souligner des liens au moins dans le corps du texte des questions et réponses.
Vous pouvez toujours utiliser la colonne classique Jakob Nielsen Guidelines for Visualizing Links comme référence.