{"id":451,"date":"2022-02-28T12:38:47","date_gmt":"2022-02-28T11:38:47","guid":{"rendered":"https:\/\/leon-communication.com\/leblog\/?p=451"},"modified":"2022-02-28T12:38:49","modified_gmt":"2022-02-28T11:38:49","slug":"accessibilite-et-graphisme","status":"publish","type":"post","link":"https:\/\/leon-communication.com\/leblog\/accessibilite-et-graphisme\/","title":{"rendered":"Accessibilit\u00e9 et graphisme, les clefs \ud83d\udd0d"},"content":{"rendered":"\n

Par d\u00e9finition, le graphisme favorise l\u2019accessibilit\u00e9. Le travail du. de la graphiste est de rendre un message plus clair, plus assimilable gr\u00e2ce \u00e0 des \u00e9l\u00e9ments visuels et de notions s\u00e9mantiques pr\u00e9cises. <\/p>\n\n\n\n

Aujourd\u2019hui, je vais vous parler de quelques techniques qui permettent de rendre un projet graphique accessible<\/strong> au plus grand nombre : personnes atteintes de d\u00e9ficiences visuelles, auditives ou cognitives. En effet, chaque individu est en droit d\u2019avoir acc\u00e8s \u00e0 une exp\u00e9rience adapt\u00e9e \u00e0 ses besoins. <\/p>\n\n\n\n

Accessibilit\u00e9 et graphisme, OUI, c’est possible !<\/strong><\/p>\n\n\n\n

1- Bien structurer son projet graphique :<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\"Exemple
Exemple de lecture instinctive.<\/figcaption><\/figure><\/div>\n\n\n\n

Utiliser une grille de mise en page pour structurer votre contenu.<\/h3>\n\n\n\n

Que ce soit sur un support imprim\u00e9<\/a> ou un support digital<\/a>, utiliser une grille de mise en page (ensembles de rep\u00e8res qui aident le. la graphiste \/ webdesigner dans son travail de composition), va permettre de cr\u00e9er une coh\u00e9rence visuelle et une structure visuelle<\/strong>. Celle-ci va apporter du confort de lecture<\/strong> et de la facilit\u00e9 d\u2019appr\u00e9hension et de compr\u00e9hension des informations.<\/p>\n\n\n\n

Hi\u00e9rarchiser vos \u00e9l\u00e9ments textuels et graphiques.<\/h3>\n\n\n\n

Chaque document, qu\u2019il s\u2019agisse d\u2019un site web, d\u2019un catalogue ou d\u2019une simple lettre, doit contenir une hi\u00e9rarchie. Quel \u00e9l\u00e9ment dois-je voir et lire en premier<\/strong> pour comprendre facilement le texte, ce que je dois faire, comment \u2026 ? Gr\u00e2ce \u00e0 des principes de mise en page, tels que la lecture en Z<\/strong> (spontan\u00e9it\u00e9 de lecture dans les pays occidentaux) et la mise en valeur des \u00e9l\u00e9ments importants (titres plus gros, blocs visuels, gris typographiques\u2026), un chemin de lecture se dessinera automatiquement pour une compr\u00e9hension optimale.<\/p>\n\n\n\n

Jouer avec le vide, pour augmenter l\u2019attrait vers le plein.<\/h3>\n\n\n\n

Spontan\u00e9ment, votre \u0153il sera toujours attir\u00e9 par le vide<\/strong>, fa\u00eetes le test ! C\u2019est pourquoi il est tr\u00e8s important de savoir s\u2019en servir \u00e0 bon escient.\u00a0<\/p>\n\n\n\n

Une bonne utilisation du vide dans une mise en page graphique permettra d\u2019am\u00e9liorer encore une fois la compr\u00e9hension du document. Ce vide permettra de cr\u00e9er des d\u00e9marcations entre chaque \u00e9l\u00e9ment graphique ou textuel. Autre atout du vide, il permet d\u2019apaiser l\u2019esprit et d\u2019augmenter la concentration<\/strong> et donc, la compr\u00e9hension.<\/p>\n\n\n\n

2- Une bonne perception des \u00e9l\u00e9ments graphiques :<\/h2>\n\n\n\n
<\/div>\n\n\n\n
\"Deux
Exemples de choix de couleurs et de contrastes.<\/figcaption><\/figure><\/div>\n\n\n\n

Les jeux de couleurs et de contrastes.<\/h3>\n\n\n\n

Toutes les personnes ne voient pas les m\u00eames couleurs, les m\u00eames contrastes.<\/p>\n\n\n\n

Le daltonisme est l\u2019exemple parfait d\u2019une anomalie de perception des couleurs qui peut entra\u00eener de gros probl\u00e8mes de lisibilit\u00e9 des documents. Le test d’Ishihara confirme \u00e0 lui seul, les difficult\u00e9s que peuvent engendrer un mauvais choix de couleurs.<\/p>\n\n\n\n

Le daltonisme n’est qu\u2019un exemple, mais toutes les d\u00e9ficiences visuelles peuvent plus ou moins toucher la lisibilit\u00e9 des documents.<\/p>\n\n\n\n

C\u2019est pourquoi le choix des couleurs et des contrastes est primordial. <\/p>\n\n\n\n

En r\u00e8gle g\u00e9n\u00e9rale, selon la norme d\u2019accessibilit\u00e9 web WCAG, il faut \u00e0 minima un contraste de 45 %<\/strong> (pour la norme AA) tout en favorisant au maximum un contraste sup\u00e9rieur \u00e0 70 %<\/strong> (norme AAA). Outre les contrastes, le choix des couleurs peut aussi \u00eatre adapt\u00e9 \u00e0 la vision daltonienne. L\u2019outil sur l\u2019accessibilit\u00e9 d\u2019Adobe Color<\/a> est d\u2019ailleurs id\u00e9al pour v\u00e9rifier l\u2019ensemble de ces param\u00e8tres. <\/p>\n\n\n\n

Sans outil particulier il est n\u00e9anmoins possible de ne pas\/peu se tromper. On peut, par exemple, choisir des couleurs compl\u00e9mentaires (contraste maximal) et en passant son document en niveaux de gris (cf visuel ci-dessus) ; si des \u00e9l\u00e9ments disparaissent ou ne se voient plus convenablement, c\u2019est que vos contrastes sont trop faibles.<\/p>\n\n\n\n

Des caract\u00e8res lisibles.<\/h3>\n\n\n\n

Il ne suffit pas d\u2019avoir de belles couleurs pour avoir un document lisible et compr\u00e9hensible. Le choix et l\u2019utilisation des typographies (ou polices d\u2019\u00e9critures) sont \u00e9galement \u00e0 prendre en compte. Une typographie manuscrite sera par exemple illisible dans le cas d\u2019une toute petite taille et \u00e7a sans d\u00e9ficience visuelle. Imaginez avec !<\/p>\n\n\n\n

Pour un paragraphe, il est important de choisir une police de caract\u00e8res o\u00f9 le \u00ab\u00a0plein\u00a0\u00bb et le \u00ab\u00a0vide\u00a0\u00bb sont \u00e9quilibr\u00e9s. (On parle aussi de trait et contreforme.) Pour cela, on privil\u00e9giera donc, un texte en \u201cregular\u201d plut\u00f4t qu\u2019un texte en \u201cgras\u201d ou en \u201clight\u201d.<\/p>\n\n\n\n

Un autre facteur \u00e0 prendre en compte sera la hauteur d\u2019x (rapport entre la taille des minuscules et des capitales d\u2019une typographie). Plus la hauteur d\u2019x est \u00e9lev\u00e9e, plus la typographie sera lisible.<\/p>\n\n\n\n

La lisibilit\u00e9 du texte.<\/h3>\n\n\n\n

Une fois notre typographie optimale trouv\u00e9e, quelques r\u00e8gles de mise en page des textes sont \u00e0 privil\u00e9gier pour ne pas annuler sa lisibilit\u00e9. <\/p>\n\n\n\n

On va alors privil\u00e9gier des colonnes, ni trop larges (au risque de fatiguer l’\u0153il trop rapidement), ni trop courtes (qui risqueraient de trop couper les phrases, les mots et de favoriser la difficult\u00e9 de lecture, ni trop longues (de trop gros paragraphes de textes peuvent \u00eatre difficiles \u00e0 lire pour les personnes dyslexiques par exemples). <\/p>\n\n\n\n

Les divers \u00e9quilibres d\u2019espacements sont aussi tr\u00e8s importants. Avec un interlignage trop serr\u00e9, les jambages et hampes des caract\u00e8res \u201chauts\u201d (p,j,f,l\u2026) se chevaucheront et le texte sera peu lisible. Sur un interlettrage trop grand, les lettres \u201cflotteront\u201d et les mots seront moins facilement identifiables. <\/p>\n\n\n\n

Pour obtenir un paragraphe au summum de sa lisibilit\u00e9, l\u2019alignement des textes est \u00e9galement important :<\/p>\n\n\n\n

Le texte centr\u00e9 ou align\u00e9 \u00e0 droite compliquent la lecture. L’\u0153il, a, en effet, besoin d’un \u201cpoint de d\u00e9part\u201d pour chaque nouvelle ligne. En impression, on utilisera donc, plus largement, un texte justifi\u00e9 (\u00e0 condition qu\u2019il soit bien \u201cfait\u201d et qu\u2019il n\u2019y ai pas de grands espaces entre les mots) ou un alignement \u00e0 gauche. En digital, l\u2019alignement \u00e0 gauche, offre la meilleure option de lecture, gr\u00e2ce \u00e0 sa barre visuelle en d\u00e9but de colonne.<\/p>\n\n\n\n

Derni\u00e8re chose, et non des moindres, on laissera le fond du paragraphe uni<\/strong> pour ne pas interf\u00e9rer la lecture avec d\u2019autres \u00e9l\u00e9ments graphiques.<\/p>\n\n\n\n

3- L\u2019accessibilit\u00e9 \u201cautour\u201d du graphisme : les indispensables :<\/h2>\n\n\n\n

Pour finir, je vais vous parler des \u201castuces\u201d compl\u00e9mentaires au graphisme pour faciliter la compr\u00e9hension et l\u2019accessibilit\u00e9 de vos documents :<\/p>\n\n\n\n