Un texte accessible, c’est quoi ?
Un texte est accessible s’il peut être lu par n’importe quelle personne et notamment celles disposant de troubles de la vue tel que le daltonisme, etc….
Pour qu’un texte soit accessible, il est important que la couleur entre le fond d’écran et celle du texte ait un contraste suffisant. Ces deux exemples sont assez parlants, non ?
Quelles couleurs choisir ?
La couleur du texte et celle du fond d’écran doivent avoir un niveau de contraste suffisant.
1- ce niveau de contraste dépend de la différence de luminance entre les couleurs choisies. Si tu veux approfondir ces notions et savoir sa méthode de calcul, nous te conseillons cet article w3.org.
2- Niveau suffisant au sens des normes d’accessibilité numérique. Voici les règles;
- Pour toute personne sans déficit visuel, le niveau de contraste de couleur minimum requis pour du texte classique est de 4.5.
Pour des personnes ayant un déficit visuel, ce niveau de contraste mini doit être au moins de 7.
En dessous d’un ratio de 3, votre texte sera difficilement perceptible.
Testez manuellement vos couleurs ?
Pour la plupart des outils disponibles sur le web, le taux de contraste est automatiquement calculé à partir soit de votre CSS (Webaim – Check Your accessibility) soit des couleurs que vous saisissez manuellement (Coolors – Contrast Checker).
Votre ratio n’est pas suffisant, que faites-vous ? Vous testez manuellement différentes tonalités de vos couleurs afin de trouver celles qui présentent un contraste suffisant.
UXvizer +
Il extrait la couleur de tous vos textes sur votre interface web et propose des couleurs alternatives pour monter votre niveau de contraste respectivement à 4,5 et 7 au cas où celui-ci serait insuffisant selon les normes d’accessibilité web.
2 minutes chrono pour commencer
Comme tout dans UXvizer 
, vérifier le ratio de contraste de vos interfaces est facile d’accès. En moins de deux minutes, vous pouvez créer un compte, un projet et uploader un enregistrement de l’écran à analyser ou une image (.png, .jpeg).
À partir de là, choisissez le test du “Visual Design Checker” et patientez, le temps que nos algos tournent.
Quand ils ont terminé leur travail, il suffit d’aller directement dans l’onglet “visual design checker”, de cliquer dans le menu principal sur Ratio de Contraste pour voir apparaître l’analyse détaillée.
Voici une démonstration rapide :
Commencez aujourd’hui à tester vos visuels pour découvrir si votre site est accessible !
👀 Et voici un peu de lecture sur l’accessibilité site web :
