Beaucoup de vos lecteurs ne voient pas votre wiki de la même manière que vous. Ils peuvent avoir une sensibilité au contraste — avoir du mal à lire un texte qui présente un « faible contraste » avec la « couleur de fond » en arrière-plan. S'ils sont capables de distinguer des lettres noires sur un fond blanc, d'autres combinaisons de couleurs sont beaucoup plus difficiles à lire et peuvent même provoquer des maux de tête.

Heureusement, vous pouvez les aider. Respectez les normes de contraste du web et plus de personnes pourront rester sur votre wiki plus longtemps.

Bien que ce soit un exemple parfait de contraste élevé, vous pouvez obtenir de bons niveaux de contraste pour vos lecteurs avec des dizaines de milliers de combinaisons de couleurs.

Un problème pour tous vos lecteurs[modifier le wikicode]

Il existe de nombreuses maladies oculaires qui peuvent éloigner les gens de votre wiki. Glaucome, rétinopathie[1] et astigmatisme n'en sont que quelques-uns. Bien que certaines d'entre elles soient généralement contractées par des personnes âgées, elles peuvent frapper tout le monde, quel que soit l'âge.

Pourtant, les malvoyants ne sont pas les seuls à tirer avantage des conceptions visuelles à contraste élevé. Les mauvaises combinaisons de couleurs peuvent, à elles seules, provoquer une fatigue oculaire et un malaise, ce qui fait que même les personnes ayant une bonne vue se détournent de votre wiki[2].

Rapports de contraste[modifier le wikicode]

Alors comment obtenir un contraste plus élevé sur votre wiki ? Facile : les rapports de contraste. Il y a un peu de calculs plutôt fantaisistes derrière ces rapports de contraste standard du web, mais vous n'avez pas besoin de comprendre tout cela pour améliorer votre wiki.

Tout ce dont vous avez besoin, c'est d'un outil facile à utiliser appelé analyseur de contraste. Il en existe une tonne pour vous aider — des extensions de navigateur aux sites web. Un excellent outil est présenté à gauche, mais il y en a sûrement d'autres.

Il existe deux standards du web : AA et AAA. Tous les analyseurs de contraste vous le feront remarquer lorsque vous atteindrez ces cibles. N'acceptez pas moins que le rapport de contraste AA entre la couleur de votre arrière-plan et celle du texte. Mais essayez la norme plus élevée AAA afin de pouvoir aider un plus grand nombre de lecteurs.

La taille est importante[modifier le wikicode]

Les lettres plus grandes n'ont pas besoin d'un rapport de contraste très élevé pour être facilement lisibles. Pour cette raison, vous pouvez généralement exprimer un peu plus de liberté créative avec les en-têtes de section qu'avec le texte normal de l'article.

Cette combinaison ne passe qu'à peine à AA, et ensuite seulement pour les textes de grande taille. Vous ne devez pas utiliser de telles combinaisons pour le texte normal de votre article.

En général, les analyseurs de contraste vous diront si votre RC obtenu ne s'applique qu'aux textes de grande taille. S'il n'y a pas la mention grand, cela signifie généralement que le RC s'applique à la fois aux textes de grande taille et aux textes ordinaires.

Mais votre symbole n'a généralement pas de RC minimum, il est trop gros et trop stylisé. Cela ne veut pas dire que vous devez oublier le contraste. Un logo qui est blanc se perdra sur un fond blanc. Mais si vous voulez vraiment utiliser du blanc sur blanc, il suffit de placer des bordures ou des ombres plus sombres autour.

Bonnes pratiques[modifier le wikicode]

La meilleure façon d'offrir un contraste aux lecteurs fait l'objet de nombreux débats, notamment lorsqu'il s'agit de savoir si un texte sombre sur un fond clair est préférable à l'inverse[3]. Mais il n'y a pratiquement aucun débat sur l'importance d'adhérer aux normes du W3C. Voici quelques bonnes pratiques qui vous aideront à atteindre cet objectif.

  • Veuillez au moins atteindre AA pour votre maquette normale de page — mais essayez d'atteindre AAA si vous le pouvez.
  • Assurez-vous que vous lisez correctement votre analyseur de RC. Faites correspondre le ratio avec la taille du texte qui vous intéresse. Il ne sert à rien à vos lecteurs d'avoir une combinaison de couleurs qui fonctionne à 18px alors que vous examinez le résultat à 11px.
  • Ne pas combiner des couleurs qui sont (même presque) opposées les unes aux autres sur la cercle chromatique. Des combinaisons particulièrement mauvaises ? Rouge sur vert, cyan sur rouge, vert sur magenta, rouge sur bleu, bleu sur jaune, et leurs inverses[4].

En suivant ces conseils, vous aiderez davantage de personnes à voir confortablement votre wiki — et donc à y rester plus longtemps !

Références[modifier le wikicode]

  1. Shaver, Kelli. "5 Ways to Ensure Your Site Is Accessible to the Visually Impaired". mashable.com. 20 April 2011.
  2. Sheedy, Jim and Kevin Larson Monitor. "Blink: the stress of reading". eyemagazine.com. Spring 2008.
  3. anthony. "When to Use White Text on a Dark Background". uxmovement.com. 28 April 2011. Read in particular the many comments at the bottom of the article.
  4. Gabriel-Petit, Pabini. "Applying Color Theory to Digital Displays". 20 January 2007. uxmatters.com Notez qu'une grande partie de cet article est obsolète, car il concerne des types d'affichage qui ne sont plus largement utilisés en 2018. Néanmoins, ce point, au moins, est toujours d'actualité.

Voir aussi[modifier le wikicode]

Sujets connexes ici sur Fandom[modifier le wikicode]

Sur le web[modifier le wikicode]

Plus d'aide

Sauf mention contraire, le contenu de la communauté est disponible sous licence CC-BY-SA.