1
There
is
a
better
way
OCTO Part of Accenture © 2020 - All rights reserved
Accessibilité
Les grandes lignes

2
There
is
a
better
way
OCTO Part of Accenture © 2020 - All rights reserved
Accessibilité
Pour permettre à nos supports
digitaux d’être accessibles au plus
grand nombre, certaines bonnes
pratiques sont à observer.
Choix
de typo
Principes
de mise
en page
Gestion
des couleurs

There
is
a
better
way
3
OCTO Part of Accenture © 2020 - All rights reserved
La typo
1

There
is
a
better
way
4
OCTO Part of Accenture © 2020 - All rights reserved
Plusieurs contraintes pèsent sur la lisibilité
d’une police sur le web :
- Une hauteur d’œil conséquente
- Un tracé ouvert (contreformes-ouvertures)
- De larges approches
- Des caractères aux formes distinctives
- Un hinting* et un crénage** de qualité
La typo
Notre Century Gothic répond à tous
ces critères, elle fait partie de la
courte liste de typos considérées
comme les plus accessibles et en
plus c’est une typo websafe***
#EcoResponsable !

There
is
a
better
way
5
OCTO Part of Accenture © 2020 - All rights reserved
La mise en page
2

There
is
a
better
way
6
OCTO Part of Accenture © 2020 - All rights reserved
Les bonnes pratiques de mise en page.
Le bon choix de typo ne fait pas tout, la manière de la mettre en page
est cruciale pour la bonne lisibilité de nos supports digitaux.
Interlignage Alignement Style de caractère Zone de texte
Respecter un interlignage
d’au minimum 1.5.
Cela facilite la lecture aux
myopes et aux Dys.
Éviter la justification et le centrage
des textes, préférer le ferrage à
gauche ou à droite.
Le décrochage de fin de ligne
permet de créer des repères dans le
texte et évitera aux Dys de se tromper
de ligne. La justification crée des
espacements non réguliers entre les
mots qui peuvent gêner certains
lecteurs.
Éviter d’écrire en majuscule et/
ou en italique, préférer le gras.
Réserver le soulignement aux
liens uniquement. De plus, le
soulignement, comme l’italique,
a un effet « Myopisant », préférer
l’encadrement ou le surlignement,
en utilisant des teintes
contrastées qui mettent en
valeur le texte.
Limiter la longueur des lignes
(pas plus de 80 caractères par
ligne) pour faciliter la lecture.
Préférer faire 2 colonnes de
textes plutôt qu’une.

There
is
a
better
way
7
OCTO Part of Accenture © 2020 - All rights reserved
Les couleurs
3

There
is
a
better
way
8
OCTO Part of Accenture © 2020 - All rights reserved
Tout le monde ne
distingue pas les
couleurs de la même
façon.
Certains utilisateurs peuvent être daltoniens,
d’autres utilisatrices peuvent être malvoyantes.
D’autres encore peuvent se trouver dans
différents environnements ou situations qui
rendent la perception des couleurs et des
contrastes complexes.

There
is
a
better
way
9
OCTO Part of Accenture © 2020 - All rights reserved
Deux points
d’attention sur
les couleurs
d’un support
digital.
Veiller à ce que le rapport
de contraste entre le
premier plan et le fond soit
suffisant.
Ne pas utiliser la
couleur comme seul
moyen visuel de
véhiculer une information,
une action, etc.

There
is
a
better
way
10
OCTO Part of Accenture © 2020 - All rights reserved
Plus en détail :
Une couleur n’est pas accessible en soit, c’est le contraste entre
elle et le fond sur lequel elle est utilisée qui détermine son degré
d'accessibilité.
D’après la norme WCAG, pour être dite lisible, un texte doit
présenter un ratio de contraste fort avec le fond sur lequel elle
est apposée (soit un ratio de 4,5 minimum pour un texte courant
et un ratio de 3 minimum pour un titre).
● Pour un ratio de contraste supérieur ou égal à 4,5 vous
pouvez écrire avec n’importe quelle taille de texte et de
graisse, cela considéré comme lisible.
● Pour un ratio de contraste de 3 à 4,4 vous devez écrire au
minimum en 14pt bold ou en 18pt regular pour être
considéré comme lisible.
● Pour un ratio de contraste inférieur à 3 (oubliez vous n’
êtes pas dans les clous,
le texte sera considéré comme non lisible).
Ratio de contraste

There
is
a
better
way
11
OCTO Part of Accenture © 2020 - All rights reserved
Calculer un ratios de contraste
pour des couleurs non OCTO
Le site contrast-ratio.com
Permet en quelques secondes de
calculer un ratio de contraste avec les
références hexadécimales de vos
couleurs.
https://contrast-ratio.com/#

There
is
a
better
way
12
OCTO Part of Accenture © 2020 - All rights reserved
Connaître la ref hexadécimale
d’une photo derrière un texte.
Le site html-color-codes.info
Permet en quelques secondes de
connaître la référence hexadécimale
d’une photo qui se trouve derrière
votre texte, et ainsi de vous permettre
de vérifier le ratio de contraste.
https://html-color-codes.info/colors-from-image/

There
is
a
better
way
13
OCTO Part of Accenture © 2020 - All rights reserved
Calcul d’un interligne
Uniquement pour les designers utilisant Indesign, Photoshop, Illustrator, Figma...
Texte 7 pt = interlignage 10,5
Texte 8 pt = interlignage 12
Texte 8,5 pt = interlignage 12,75
Texte 9 pt = interlignage 13,5
Texte 9,5 pt = interlignage 14,25
Texte 10 pt = interlignage 15
Texte 10,5 pt = interlignage 15,75
Texte 11 pt = interlignage 16,5
Texte 11,5 pt = interlignage 17,25
Texte 12 pt = interlignage 18
Texte 12,5 pt = interlignage 18,75
Texte 13 pt = interlignage 19,5
Texte 13,5 pt = interlignage 20,25
Texte 14 pt = interlignage 21
Si vous utilisez ces logiciels, l’unité de mesure de l'interligne est différent,
il nécessite de multiplier la taille de la typo par 1,5 pour obtenir l’interlignage minimum. ex
: 13 pt (taille de votre typo) x 1,5 = 19,5 pt (interlignage minimum à appliquer)
Texte 14,5 pt = interlignage 21,75
Texte 15 pt = interlignage 22,5
Texte 16 pt = interlignage 24
Texte 17 pt = interlignage 25,5
Texte 18 pt = interlignage 27
Texte 19 pt = interlignage 28,5
Texte 20 pt = interlignage 30

There
is
a
better
way
14
OCTO Part of Accenture © 2020 - All rights reserved
Normes et références
6

There
is
a
better
way
15
OCTO Part of Accenture © 2020 - All rights reserved
Les normes
1.4.3 Contraste (minimum) :
la présentation visuelle du texte et du texte sous
forme d'image a un rapport de contraste d'au moins
4,5:1, sauf dans les cas suivants : (Niveau AA)
Texte agrandi* (avec au minimum 18 points ou 14
points gras): le texte agrandi et le texte agrandi sous
forme d'image ont un rapport de contraste d'au
moins 3:1.
Texte décoratif : aucune exigence de contraste pour
le texte ou le texte sous forme d'image qui fait partie
d'un composant d'interface utilisateur inactif, qui est
purement décoratif, qui est invisible pour tous ou qui
est une partie d'une image contenant un autre
contenu significatif.
Logotypes : aucune exigence de contraste pour le
texte faisant partie d'un logo ou d'un nom de
marque.

There
is
a
better
way
16
OCTO Part of Accenture © 2020 - All rights reserved
Quelques articles
nous confirmant
ce constat
https://fr.calameo.com/read/0058343
7508d343b57cac
https://fr.calameo.com/books/00021
9963bb28f8dfbd41
Règles d’accessibilité
Livre Typo et web
https://www.webhostingsecretrevea
led.net/fr/blog/web-business-ideas/
25-gorgeous-web-safe-fonts-for-yo
ur-website/
Polices websafe