Saviez-vous que l’accessibilité numérique est une obligation ?
En plus d’une obligation, c’est une nécessité pour les personnes en situation de handicap qui se retrouvent parfois bloquées sur des sites web.
J’ai eu la chance d’échanger avec des personnes qui m’ont expliqués comment elles se retrouvent parfois bloqués sur un site web, lors de visio ou autres. Je vais donc vous expliquer à travers différents articles ce que l’on peut mettre en place pour l’accessibilité numérique des sites web.
Aujourd’hui ZOOM sur les contrastes de couleurs.
Les contraste de couleurs
Sur les sites, on a tendance à regarder si les couleurs se marient bien ensemble, si le visuel est joli. Et c’est une très bonne idée de faire ça, c’est ce qui peut attirer l’œil des visiteurs. Cependant, il ne faut pas desservir le design à l’accessibilité. En effet, certains combos de couleurs ne sont pas assez lisibles.
Voici l’exemple de ces deux couleurs. Ensemble, elles sont très jolies. Pourtant, si l’on en utilise une pour le fond et l’autre pour le texte, cela rendra la lecture très difficile, voir illisible pour certaines personnes.
Pour savoir si les couleurs respectent les normes, vous pouvez utiliser le logiciel Colour Contraste Analyser.
Le fonctionnement de ce logiciel est très simple. Il suffit de choisir la couleur d’arrière-plan souhaitée (en la notant ou grâce à la pipette), et la couleur du premier plan (du texte, titre…).
Pour ces deux couleurs, voici le résultat :
On peut donc constater qu’aucun critère de la norme n’est respecté.
Comment allier visuel et accessibilité numérique ?
Je vais vous donner 2 outils en plus de Colour Contraste Analyser qui vont vous permettre de réussir la colorimétrie de votre site sans perdre en vue l’accessibilité.
Coolors.co
Coolors.co vous permet de générer une palette de couleurs. Vous pouvez actualiser pour générer une autre palette, modifier une couleur etc…
Htmlcolorcodes.com
Htmlcolorcodes.com vous permet de trouver une nuance à la couleur que vous avez repéré sur coolors.co mais qui n’est pas compatible pour l’accessibilité.
Comment on fait pour allier ces 3 outils ?
Pour mieux comprendre ces 3 outils, je vais vous expliquer comment je les utilise.
(Les outils ont d’autres fonctionnalités, dont des qui se ressemblent. Personnellement, je préfère le combo des 3 qui permet d’avoir plus de précision dans chaque fonctionnalité).
Par exemple, si je décide d’utiliser la palette de couleur de Coolors.co qui en en exemple juste au-dessus. En sélectionnant les couleurs #613F75 et #E5C3D1, je m’aperçois que presque tous les critères sont remplis. Seulement le contraste augmenté, lorsqu’il s’agit d’un texte normal (comme celui que je suis en train d’écrire), n’est pas validé.
Je décide donc de garder la couleur d’arrière-plan, et de trouver une autre couleur qui se rapproche de celle en premier plan. Pour cela, je vais sur htmlcolorcodes.com et je mets l’hexagonal de ma couleur #E5C3D1, puis je joue sur le sélecteur afin de trouver une couleur qui se rapproche et qui pourrait correspondre au norme d’accessibilité.
On retourne donc sur Colour Contraste Analyser afin de noter la nouvelle valeur de la couleur de Premier Plan. On peut alors voir que tous les critères sont validés. Cela reste joli visuellement tout en respectant l’accessibilité.
Désormais, vous avez toutes les cartes en mains pour que votre site soit accessible au niveau des contrastes.
Restez connecté, il y aura bientôt d’autres astuces sur l’accessibilité. (Je voulais le faire en un seul article au début, mais finalement, c’était trop long).
Est-ce-que cela vous a été utile ? N’hésitez pas à laisser votre avis en commentaire !
Retrouvez les autres articles sur la page blog !