Catégories
Blogs à lire
Archives
Blog
mar
13
Contraste: couleur du texte
Catégorie: Typographie | Commentaires fermés | 1 010 lectures
Le contraste du texte et du fond est un élément important de la lisibilité. Le texte doit se détacher facilement de son fond pour faciliter la lecture. En photographie, le contraste est la différence entre les parties claires de l'image et les parties sombres. Pour un texte, c'est à peu près la même chose si ce n'est qu'il est difficile de distinguer le niveau de clarté dans les couleurs.
Dans l'exemple ci-dessous, le choix des couleurs est problématique d'un point de vue du contraste. Pour s'en rendre compte, j'ai passé la capture en noir et blanc. Le titre de section (1: luminosité 20 %) a du mal à se détacher du fond en raison de sa faible luminosité. Par contre, le texte (2: luminosité 100 %) obtient un contraste maximum. La teinte du lien visité (3: luminosité 40 %) est d'une meilleure lisibilité. Inversement, la couleur de l'hypertexte (4: luminosité 20 %) est problématique pour la lecture. Le dernier lien (5: luminosité 40 %) est de la même couleur mais avec un niveau d'éclairage doublé.
Capture Études photographiques
Capture en niveaux de gris
On remarque une évidence: plus la différence de luminosité est importante et plus le contraste est fort. Sur cette base, on pourrait en déduire une théorie bête et méchante. On aurait donc automatiquement du noir à 0 % de luminosité et une autre couleur à 100 % de luminosité. Avec un fond coloré et un texte noir, cela fonctionne relativement bien sauf avec des couleurs très saturées. Dans le cas inverse (fond noir et texte coloré), les résultats sont satisfaisants à l'exception des tons bleus.
Outre les accords de goût discutables et les problèmes de lisibilité flagrants cités précédemment, un fort contraste agresse l'œil, diminue le confort de lecture et augmente la fatigue oculaire. À cela, il faut ajouter l'impact négatif de la luminosité sur écran. Sur ce type de support, la couleur n'est pas la combinaison de pigments mais le mélange d'une lumière plus ou moins forte. L'absence de lumière affiche du noir et la projection des trois faisceaux à leur maximum donne du blanc. Cette intensité lumineuse influence la rapidité de lecture et la fatigue de l'œil. Qu'on se le dise une fois pour toutes: à l'écran, le texte noir sur fond blanc n'est pas le meilleur choix. Un fond faiblement assombri ou coloré est une solution mais souvent un inconvénient par rapport à l'intégration d'images. Le mieux pour un fond clair c'est d'utiliser une couleur de texte foncée légèrement éclaircie.
Peter Gabor est le seul blogueur - à ma connaissance - à écrire ses longs paragraphes dans différents coloris. On pourrait croire à une méconnaissance de la chose mais il se fait que Peter est passionné de typographie et expert dans la discipline. « Ces changements de couleurs permettent à l'œil de se reposer un peu des contrastes trop violents du noir & lumière et aussi de faire des relances de lecture d'un paragraphe sur l'autre ».
Capture paris.blog.lemonde.fr
Outils en ligne
Colour constrast check — Très simple, il suffit d'ajouter les valeurs de la couleur du texte et la couleur d'arrière plan. Ensuite, le système calcule la luminosité et la différence de tonalité. Selon l'outil, vous devriez avoir une luminosité supérieure ou égale à 125 et une différence de tonalité supérieure ou égale à 500.
Colour contrast analyser — Logiciel à télécharger (existe en français) et réagit comme le précédent: il calcule la différence entre les deux couleurs d'avant et d'arrière plan selon des algorithmes proposés par le W3C.
Web accessibility Toolbar — Barre d'outils qui s'ajoute à Internet Explorer et permet d'analyser les contrastes, de passer toute la page en niveaux de gris et de simuler le rendu de la page comme si elle était présentée à un daltonien.
Graybit — Entrez l'adresse d'un site et Graybit se charge de le passer en niveaux de gris (texte, images). Très pratique pour avoir un aperçu général.
À lire également: « Daltonisme dans la conception web »
