Accessibilité Web : choix des contrastes, couleurs et typographie

Fiche ressource Article, événement, site web...
  • Création ou MAJ importante : 25/11/10
  • Correction mineure : 30/11/10
Mots-clés

Accessibilité Web : choix des contrastes, couleurs et typographie

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

  • Web Accessibility Initiative (WAI),
    - Groupe d'experts travaillant à l'élaboration des directives concernant l'accessibilité web, en savoir + En savoir plus
  • Référentiel Général d'Accessibilité pour les Administrations (RGAA),
    - La législation française a élaboré un référentiel d'accessibilité pour les administrations, en savoir + En savoir plus

Autre ressources

  • Guide accessibilité web :
    - Ce guide propose une méthode pour prendre en compte tous les critères d'accessibilité en vue d'obtenir une certification, en savoir + En savoir plus
  • Yellowpipe Internet Services :
    - Site facilitant la conversion des couleurs hexadécimales en RVB et vice versa, en savoir + En savoir plus
  • Améliorer l'accessibilité web par la typographie :
    - Site destiné aux concepteurs web pour les aider à faire des choix typographiques, en savoir + En savoir plus
  • Visionner le choix typographie avec différents navigateurs, en savoir + En savoir plus