Accessibilité Web : choix des contrastes, couleurs et typographie

Ressource Plume
Mots clés

 

Le choix de la conformité d'un site Web

Pour que toute personne puisse consulter un site web confortablement, le consortium W3C/WAI a rédigé plusieurs directives dont l'une est destinée à spécifier l'accessibilité des contenus Web pour tous ;  la WCAG 2.0. S'adressant en particulier aux concepteurs web, cette directive prend en compte les difficultés de perception visuelle des internautes, en caractérisant les contrastes colorimétriques associés à une taille minimum de caractères. Cependant, comment un concepteur web peut-il respecter ces critères de conformité et quelle méthode adopter pour répondre aux différentes déficiences visuelles des internautes ?

Les outils de conception

Choix du contraste

Pour aider les concepteurs graphiques à élaborer une charte graphique web conforme aux directives, le web fournit de nombreux outils très visuels. Pour mesurer les rapports de contrastes théoriques entre une couleur de police et un arrière plan, le concepteur peut recourir au site Colour Contrast Check. Ce site propose 3 palettes ; la 1ère fixe une couleur de texte, la 2ème fixe la couleur d'arrière plan, une 3ème palette de contrôle permet de vérifier le niveau de luminosité, de contraste et le niveau d'accessibilité WCAG.
En complément, le site Color contrast verification tool permet de mesurer le niveau de contraste pour une taille de caractères donnée.
RQ : Si un contraste élevé facilite la perception, un contraste trop élevé fatigue aussi l'œil, ces outils facilitent  le dosage en fonction des critères objectifs et subjectifs.

Ex : Pour prétendre au niveau AAA d'accessibilité, la directive WCAG impose un rapport de contraste de 7:1 pour des caractères inférieurs à 18 points.

Choix colorimétrique, pour un site bien vu

Pour concevoir sa charte graphique, le concepteur web peut s'appuyer sur le site colorschemedesigner.
A partir d'une roue de couleurs, il choisit une ou plusieurs teintes majoritaires pour son site. Puis ajuste la luminosité, la saturation et le contraste pour obtenir sa palette de couleurs en valeurs hexadécimales. Des outils de simulation permettent de visualiser instantanément le résultat d'une page web sur fond blanc ou noir. D'autres outils simulent des déficiences visuelles incitant le concepteur à revoir éventuellement ses choix pour une meilleure perception des nuances. Après validation des choix, le concepteur peut mémoriser la palette couleurs en différents formats.

Choix typographique

Pour effectuer des choix typographiques sur une page web, le concepteur peut s'appuyer sur le site typetester. Ce site propose 3 colonnes comparatives pour effectuer des choix de polices, de tailles de caractères, de couleurs et de mise en page. Le résultat s'affiche en-dessous où se déclinent toutes les formes d'affichage de la police choisie.
Rq : Avant de valider ses préférences typographiques, le concepteur web doit aussi prévoir dans les feuilles de styles (CSS) des polices alternatives installées systématiquement dans les navigateurs.

Fiches Plume connexes

Autre ressources