Vert rassurant, jaune chaleureux, rouge fougueux… Le choix des couleurs sur une interface digitale n’est plus une simple question de goût ou de symbolique marketing. En France, depuis 2018, il est préférable de respecter certaines normes légales, sous peine de sanctions. Objectif : permettre à tous les utilisateurs d’une plate-forme web, qu’ils soient valides, seniors ou en situation de handicap, d’accéder à son contenu.
Que dit la loi à ce sujet ? Comment rendre une interface web lisible et accessible à tous ? Quels bénéfices connexes tirer du bon usage des couleurs sur une page web ? Décryptage et conseils.

RGAA et W3C : les référentiels d’accessibilité du web

Tous deux définissent quelles sont les normes à respecter pour permettre à tous les utilisateurs d’accéder aux contenus et aux services digitaux, quels que soient leurs facultés, leurs interfaces (desktop, mobile, tablettes) et leur environnement (niveau sonore, éclairage…).

En matière de handicap, le champ d’application est vaste. Déficiences visuelles (cécité, daltonisme…), auditives, motrices, cognitives, neurologiques, ou liées au vieillissement, sont concernées.

En France, le RGAA (Référentiel Général d’Amélioration de l’Accessibilité) découle de l’obligation d’accessibilité imposée par l’article 47 de la loi du 11 février 2005 pour « l’égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées ».
Depuis septembre 2019, son champ d’application ne se limite plus aux seules administrations d’État et collectivités. Il concerne, également, tout organisme privé, chargé d’une mission de service public ou d’intérêt général, ainsi que toute entreprise réalisant un chiffre d’affaires annuel, en France, de 250 millions d’euros minimum. Autre nouveauté : il est désormais obligatoire de rendre compte, en ligne, du niveau d’accessibilité d’un service numérique, sous peine de sanctions financières.
Rassurez-vous : certaines dérogations sont, toutefois, accordées, par exemple, en cas de « charges disproportionnées » pour l’organisme concerné. Délivrée au cas par cas, cette « charge disproportionnée » peut être invoquée lorsqu’il est raisonnablement impossible de produire un contenu ou une fonctionnalité accessible. Autre cas de figure : si une entreprise est en attente d’un audit, elle peut, temporairement, faire l’économie de ces obligations.

A l’échelle internationale, le W3C (World Wide Web Consortium), définit une liste exhaustive de standards  techniques, relatifs à la conception graphique des sites web. Les plus importants concernent, notamment, les couleurs, la lisibilité et le contraste.

Couleurs et textes : les règles à respecter pour rendre votre site accessible

  1. La couleur ne doit pas porter, seule, l’information
    Certains internautes ne la perçoivent pas. D’autres la perçoivent mal. La couleur ne doit donc, jamais, porter à elle seule toute l’information nécessaire à la compréhension de vos contenus et à la navigation sur vos interfaces.
    Titres de pages ou d’articles, liens de navigation ne doivent, par exemple, jamais apparaître en couleur uniquement, sous peine d’échapper à bon nombre de vos utilisateurs.
  2. Soigner le contraste texte/fond
    Le contraste de couleurs permet à une teinte de ressortir par rapport à une autre. Sur une interface digitale, il s’agit de distinguer un texte ou une icône par rapport à la couleur de fond d’une page. Cet élément est crucial pour les 4% de Français atteints de daltonisme. Soyez-y particulièrement attentifs si votre cible est masculine : cette déficience visuelle touche 8% des hommes contre 0,5% des femmes, en moyenne.
    De manière générale, soigner le contraste sur vos pages apporte un véritable confort de navigation à vos utilisateurs, quels qu’ils soient. Exit donc les textes jaunes sur fond blanc (ou icônes bleues sur fond vert), même si vous êtes fans de ces duos chromatiques. Optez plutôt pour le tandem classique fond blanc / texte noir, ou fond rouge / texte blanc. Vos visiteurs (et vos KPI) vous en seront éternellement reconnaissants.
  3. Accroître la lisibilité des textes
    Là encore, plusieurs règles sont à suivre pour rendre vos textes accessibles et attractifs.

    • Optez, tout d’abord, pour une police suffisamment grande, adaptée à chacune de vos interfaces (desktop, mobile, tablette).
      De quoi permettre aux internautes souffrant d’une déficience visuelle d’accéder à vos contenus, et aux autres, de ne pas être contraints d’activer le zoom de leur navigateur pour surfer sur vos pages. Soyons réalistes : flemmards ou peu avertis, bon nombre d’entre eux ne le feront pas, préférant aller voir ailleurs… en deux clics.
    • N’abusez pas des textes en gras.
      La tentation est grande. Elle est pourtant contre-productive. Sur une typo « bold », l’espace interne des lettres est réduit. Celles-ci sont donc moins faciles à déchiffrer.
    • Evitez les typographies exotiques.
      Deux raisons à cela. Les polices sans empattement (ou « sans serif ») telles Arial, Comic sansMS, Tahoma ou Verdana sont plus faciles à lire pour les dyslexiques, qui confondent le « d » et le « p » ou le « m » et le « n ». Les autres internautes, quant à eux, seront plus à l’aise sur un site utilisant des polices qui leur sont familières. En terrain connu, ils navigueront de manière plus intuitive et passeront plus de temps sur vos interfaces.
    • Evitez les lettres capitales.
      Formant des blocs visuels de même hauteur, les majuscules diminuent le contraste. A l’inverse, les minuscules, aux contours irréguliers, marquent plus de différences avec le fond de la page et offrent donc une meilleure lisibilité.
    • Aérez… sans justifier !
      Rebutant, rébarbatif, indigeste : tels sont quelques-uns des adjectifs accolés d’emblée à un bloc de texte compact, aussi pertinent soit-il. Pensez donc à aérer vos contenus via de simples sauts de ligne, ou des listes à puces. Vous donnerez du rythme à vos propos, vous offrirez des repères visuels à vos visiteurs et vous trouverez grâce aux yeux de Google.
      Oubliez, en revanche, les textes justifiés. Leurs espacements, trop importants, provoquent des difficultés voire des incohérences de lecture. Un texte justifié entraîne, également, des décalages d’affichage sur certaines interfaces (mobiles, notamment). A l’inverse, un texte aligné à gauche est plus homogène d’une interface à l’autre et donne des repères aux internautes souffrant, notamment, de troubles « dys ».

L’accessibilité numérique : une opportunité marketing, aussi   

  1. Toucher une cible plus large
    En vous adressant à tous, vous augmentez le rayonnement de vos interfaces web. Une démarche loin d’être anecdotique. Selon l’INSEE, 9,6 millions de personnes âgées de 15 à 64 ans et vivant à domicile sont considérées comme handicapées[1]. En respectant les normes RGAA, vous étendez donc votre visibilité potentielle d’autant, tout en agissant en faveur du développement d’un web plus inclusif.
  2. Progresser en SEO
    Certaines normes connexes à l’utilisation des couleurs contribuent à améliorer votre SEO. Parmi elles, la nécessité d’inclure une balise « alt » sur vos images. Objectif : permettre aux personnes souffrant de déficiences visuelles de connaître leur contenu via un navigateur textuel ou une synthèse vocale. En matière de SEO, cette balise vous permet d’accoler, à chaque image, des mots-clés reconnus et appréciés de Google.
    Dernier exemple, et non des moindres : le titre des pages, pour lequel le RGAA impose une hiérarchie croissante (H1, puis H2, H3…), facilite la compréhension de vos textes, tout en optimisant vos performances SEO.
  3. Améliorer votre UX
    De manière générale, la quasi-totalité des normes imposées par le RGAA sont faciles à mettre en œuvre et utiles à la mise en place d’un parcours utilisateur simple et intuitif.
    Ne prenez donc pas ces normes sous leur seul aspect juridique. Elles constituent, en réalité, une liste exhaustive de « best practices » à suivre pour offrir à vos visiteurs une expérience fluide et adaptée à chacun d’entre eux, qu’ils soient débutants ou avertis. De quoi joindre l’utile à l’efficace, en somme.

Unicorp vous accompagne dans la création, la refonte et l’optimisation de vos interfaces web :

  • Recueil de vos besoins en atelier et recommandations
  • Spécifications fonctionnelles / UX Design
  • Création et UI design
  • Recommandations techniques
  • Recommandations de contenu
  • Rapports de statistiques et suivi SEO
  • Marketing online et animation de réseaux sociaux

[1] Source : Les Tableaux de l’économie française, Edition 2011, INSEE et L’Enquête Handicap-Santé 2008-2009, volet ménages, INSEE.