Les tips d'accessibilité 4
Les contrastes.
L’accessibilité est un sujet qui n’a pas encore tout à fait trouvé sa place dans la conception de sites web. Pourtant, 20% de la population a un handicap, ne pas faire en sorte que son site soit accessible à toutes ces personnes est une discrimination. Tous les mois, je partage avec vous des conseils d’accessibilité afin d’améliorer ensemble nos pratiques pour un web plus inclusif.
A quoi ça sert ?
Chaque site a son code couleur personnalisé. Les couleurs en design sont un des éléments les plus importants pour donner son identité à un site, à une marque. Mais un site n’est pas uniquement un décor visuel, il s’agit aussi d’un média sur lequel on retrouve du texte, du contenu, auquel toute personne doit pouvoir avoir accès si on veut atteindre le plus de monde possible.
Tout le monde ne voit pas les couleurs de la même façon. Tout le monde n’est pas sensible aux couleurs de la même façon. Et tous les yeux ne se fatiguent pas de la même façon lorsqu’ils sont confrontés à un contraste un peu léger. En prenant en compte ces trois faits, il paraît totalement impossible de créer un design avec des couleurs adaptées à tout le monde. (même le classique fond blanc et écriture noire peut être difficile à lire pour certaines personnes dont les yeux ne supportent pas la luminosité !).
Les spécialistes de l’accessibilité ont créé des normes permettant de savoir si on contraste est suffisant à rendre le texte lisible ou non.
La règle
La règle 3.2 du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) donne les règles de contrastes pour chaque types de texte :
- Pour les textes inférieurs à 24px (non gras) ou inférieurs à 18,5px (gras) : le ratio de contraste doit être 4.5:1 au moins.
- Pour les textes supérieurs à 24px (non gras) ou supérieurs à 18,5px (gras) : le ratio de contraste doit être de 3:1 au moins.
Alors, personnellement honnêtement ça ne me dit rien ces histoires de contraste. Mais la bonne nouvelle c’est qu’il y a des outils pour tester les contrastes, les fameux contrast checkers qui vont calculer ce ratio pour vous. Il y en a un très bien sur le site coolors (un site par ailleurs très sympa avec beaucoup d’inspiration sur les palettes de couleurs et pas mal de petits outils pratiques).
Moi j’ai téléchargé un logiciel qui permet d’avoir un constrast checker directement installé sur son ordinateur.
Pour aller plus loin
Le contrast finder vous aide à créer des codes couleurs adaptés en vous donnant des exemples de couleurs adaptées niveau contraste aux couleurs que vous entrez dans l’outil !
