Accessibilité visuelle numérique : comment créer des images accessibles avec Canva ?

Canva permet de créer des visuels rapidement et simplement. Cependant, savez-vous quels éléments prendre en compte pour créer des visuels respectueux des critères du RGAA⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre) (Référentiel Général de l’Amélioration de l’Accessibilité) sur Canva ?

Revenons ensemble sur les éléments clés pour créer des visuels accessibles avec Canva.

Qui est impacté par vos choix de couleur de visuels ?

• Les utilisateurs aveugles ou malvoyants peuvent perdre l’accès à l’information si celle-ci est uniquement signalée par la couleur.
• Les utilisateurs déficients visuels peuvent ne pas bien percevoir les couleurs de vos visuels.

Les contrastes de couleurs sur vos visuels

En créant des éléments visuels, le premier critère à respecter pour l’accessibilité numérique est celui des contrastes de couleurs.

Lorsque vous créez votre visuel, veillez à avoir un ratio de contraste suffisant entre vos éléments de premier plan et d’arrière-plan. En effet les utilisateurs non-voyants ou ayant des difficultés à percevoir les couleurs auront du mal à lire vos textes.

Ici nous parlons de visuel réalisé avec un outil graphique, mais ces mêmes préconisations s’appliquent pour une interface web et ses composants (boutons, éléments graphiques).

Le RGAA préconise un rapport de contraste attendu est de 4,5:1 au moins. Cependant deux exceptions à cette règle sont possibles :

• Si le texte fait plus de 24px, alors le contraste exigé est de 3:1
• Si le texte est écrit en gras et qu’il fait plus de 18,5px, alors le contraste exigé est de 3:1

Remarque : Ces recommandations s’appliquent également aux textes (porteurs d’une information) présents dans les images ou incrustés dans les vidéos (comme les sous-titres⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre) ou les bandeaux d’informations).

Cas particuliers : les liens et les composants graphiques

Si vous choisissez d’intégrer des liens cliquables dans vos visuels, attention à bien les rendre visibles dans votre contenu avec un ratio de contraste suffisant et en les soulignant.

Concernant les composants graphiques comme des pictogrammes⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre) porteurs d’information, veillez au bon contraste du pictogramme par rapport à sa couleur d’arrière-plan.

Ici le pictogramme est conforme avec un ratio de contraste de 3,4.1

Le choix des typographies

Les ratios de contrastes de couleurs sont exigés pour s’assurer que l’utilisateur puisse lire la plupart des typographies.

Attention : même si vous suivez les préconisations du RGAA, veillez à choisir des polices lisibles qui ne sont pas trop fines, avec des graisses qui facilitent la lecture.

À droite, la typographie est fine et complexe, avec un niveau de graisse trop faible. À gauche, le ratio de contraste et de police de caractère sont clairs et visibles.

Prévoir des légendes complémentaires

Selon les visuels que vous réalisez, vous pouvez avoir envie d’utiliser la couleur pour organiser ou donner des informations.

Attention : votre visuel ne doit pas donner l’information uniquement par la couleur. Pour les personnes daltoniennes par exemple, votre belle infographie colorée sera vue en niveaux de gris. Difficile dès lors d’avoir accès à l’information ! Si l’information est uniquement donnée par la couleur, c’est une vraie perte d’accès au contenu pour les personnes malvoyantes.

Pour remédier à cela, prévoyez de relier vos légendes à la couleur concernée.

Dans ce premier exemple (inaccessible), il suffit de changer la mise en page de votre graphique sur Canva. La plateforme active d’office le champ étiquette qui vous permet d’ajouter la légende sur les éléments concernés et de changer les couleurs du graphique peu contrastées entre elles.

Lorsque que vous ne pouvez pas ajouter l’information directement sur votre image, ajoutez là dans une texte adjacent à l’image (comme sur le second exemple)

Comment vérifier les ratios de contrastes et la lisibilité de vos typographies ?

Vérifier avec l’outil de Canva

Il existe un vérificateur d’accessibilité dans Canva.

Vous pouvez y accéder lorsque vous travaillez sur votre visuel ou votre document pour vérifier de manière automatique certains critères : ratios de contrastes, taille de la typographie…

Attention, ajouter un « bouton » ajoute en fait un lien, soyez prudent quant à l’utilisation de l’outil.

Le vérificateur vous indique les éventuelles corrections à apporter sur vos visuels pour résoudre certaines erreurs d’accessibilité les plus courantes.

Vérifier avec des outils externes

Pour vérifier vos ratios de contrastes sur les couleurs mais aussi la lisibilité de vos typographies, vous pouvez utiliser un outil comme Color Contrast Analyzer⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre).

L’outil vous permet de tester vos couleurs de premier plan et d’arrière-plan pour vous assurer d’être conforme aux préconisations du RGAA. Vous pouvez également vérifier la conformité des typographies choisies (exemple ci-dessous).

Si vous devez changer votre palette de couleur, l’outil Contrast Finder⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre) peut vous aider à trouver des combinaisons de couleurs accessibles.

En résumé, pour veiller à l’accessibilité numérique de vos créations visuelles sur Canva :

• N’utilisez pas la couleur uniquement pour porter une information, donnez un moyen complémentaire pour rendre l’information accessible à tous.
• Si vous ne pouvez pas mentionner l’information sur votre visuel, faites-le dans le texte adjacent.
• Veillez à vos ratios de contraste sur vos visuels entre votre arrière-plan et vos typographies et éléments visuels.
• Choisissez des typographies avec des graisses visibles et pas trop fines pour simplifier la lecture.

Les alternatives d’images sur Canva

Avant de parler du contexte d’utilisation de l’alternative d’une image, il faut différencier deux types d’images : les images décoratives et les images porteuses d’information.

• Les images décoratives : c’est le type d’image le plus présent sur internet. Comme son nom l’indique, une image décorative décore une page, un article ou un paragraphe. Comme elle est décorative, le contenu textuel peut être compris avec ou sans la présence de l’image. Les images décoratives doivent donc être ignorées par les technologies d’assistance des personnes en situation de handicap.
• Les images porteuses d’information : contrairement aux images décoratives, les images porteuses d’informations donnent une information à l’utilisateur. Sans cette information, le contenu de la page peut ne pas être compris ou mener à des contre-sens. Dans ce cas précis, il faudra fournir l’information portée aux utilisateurs.

Les alternatives pour les images décoratives

Les images décoratives peuvent être de deux types sur une même page :

• Les images uniquement utilisées pour des questions de style visuel
• Les images dont l’information portée est retranscrite dans le texte environnant

Dans ces deux cas, il faut laisser l’alternative vide, car l’image doit être ignorée par les technologies d’assistance.

Les alternatives pour les images porteuses d’informations

Les images porteuses d’informations sont indispensables à la compréhension d’une page. Dans ce cas, l’information portée doit être donnée aux utilisateurs.

Pour choisir quelle alternative mettre, il faut prendre en compte le contexte d’utilisation de l’image. Si l’information n’est pas reprise dans le texte adjacent et est uniquement portée par l’image, l’alternative devra reprendre les informations sur l’image.

Par exemple, si vous mettez un logo⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre) sur votre visuel et qu’il comporte des informations non reprises dans le texte, vous devez les faire figurer dans l’alternative.

Conseil : limitez la taille de votre alternative à environ 80 caractères pour être lu par les utilisateurs de plage Braille.

Canva permet de mettre des alternatives ou d’indiquer des images comme décoratives.

À propos de l’auteur

Clément Fresneau est expert en accessibilité numérique chez Boscop⁠(s’ouvre dans un nouvel onglet ou une nouvelle fenêtre). Il audite les sites de ses clients et forme les communicants et les profils techniques à l’accessibilité web.