Charles-Édouard Coste

Bien choisir ses couleurs pour le web

4th May 2012 Accessibilté

Plus d'un européen sur 8 présente des déficiences de perception des couleurs⁽¹⁾⁽²⁾. Les daltoniens, qui en ont sûrement ras-le-bol que l'on se serve d'un film de Walt Disney comme moyen mnémotechnique⁽³⁾, représentent en France un homme sur 12.

Oui mesdames! J'ai bien dit "un homme sur 12". Car en ce qui concerne les femmes, vous n'êtes que 0,4% en Europe a présenter ce genre de limite visuelle.

Rendez votre site lisible pour le plus grand nombre

Choisir la palette de couleurs de votre site n'est donc pas si anodin et ne comptez pas sur Piwik ou Google Analytics pour indiquer le pourcentage de vos visiteurs atteints de dyschromatopsies ou d'achromatopsies. Ce genre d'informations n'est pas récupérable via Javascript.

A part proposer une alternative en noir et blanc, le seul moyen de s'assurer que le plus grand nombre puisse lire le contenu de votre site web est de vérifier que votre choix de couleurs propose un contraste suffisant.

Dans la recommandation n°2 de "Techniques For Accessibility Evaluation And Repair Tools" , le W3C propose un mode de calcul à ce sujet que nous allons étudier ci-après et utiliser dans un exemple.

Un peu de théorie

Considérons deux couleurs au format RVB dont les composantes sont R1, V1 et B1 pour la première couleur et R2, V2, B2 pour la seconde (R pour rouge, V pour vert et B pour bleu).

On peut calculer:

• La différence de luminosité (notée ici dL)⁽⁴⁾:

  dL = |(299 x (R1-R2) + 587 x (G1-G2) + 114 x (B1-B2))/ 1000|

• La différence de tonalités (notée ici dT)⁽⁴⁾:

  dT = |R1-R2| + |V1-V2| + |B1-B2|

Au final, la majorité des gens seront capables de distinguer les deux couleurs si dL est supérieure à 125 et si dT est supérieure à 500⁽⁵⁾.

Un peu de pratique

Pour notre exemple, nous allons choisir des couleurs bien énervantes à lire, comme du rouge sur du violet.

Sur le web, on note généralement ces valeurs en hexadécimal comme ceci : #80AB23 mais comme nous devons faire des calculs, nous les noterons ici sous la forme rgb(R,V,B) chaque composante étant un nombre décimal allant de 0 à 255.

Couleur n°1 : rvb(128, 0, 0) Couleur n°2 : rvb(128, 0, 128)

dL = |( 299 x (R1-R2)   + 587 x (G1-G2) + 114 x (B1-B2) ) / 1000|
dL = |( 299 x (128-128) + 587 x (0 - 0) + 114 x (0-128) ) / 1000|
dL = |( 299 x 0 + 587 x 0 - 114 x 128 ) / 1000|
dL = |( 0 + 0 - 14 592 ) / 1000|
dL = |-14 592 / 1000|
dL = |-14,592|
dL = 14,592

Donc dL < 125

dT = |R1-R2| + |V1-V2| + |B1-B2|
dT = |128-128| + |0-0| + |0-128|
dT = |0| + |0| + |-128|
dT = 0 + 0 + 128
dT = 128

Donc dT < 500

Au vu du faible score, que ce soit au niveau du contraste ou de la différence de luminosité, même une personne ayant une très bonne perception des couleurs risque d'avoir des difficultés à distinguer ces deux-ci.

En revanche, voici un exemple totalement arbitraire de deux couleurs assez faciles à distinguer:

Couleur n°2 : rvb(10, 20, 40) Couleur n°1 : rvb(210, 220, 140)

Si l'on refait les mêmes calculs on obtient alors : dL = 188,6 et dT = 500. Ce qui est bien plus facile à lire

Conclusion

Si le choix des couleurs d'un site est en grande partie dirigé par la recherche esthétique du graphiste qui est le garant d'un bon équilibre visuel, ce dernier ne doit pas oublier la finalité d'un site web qui est avant tout de transmettre de l'information non pas pour qu'elle soit écrite mais pour qu'elle soit lue. Et contrairement aux idées reçues, prendre en compte l'incapacité de certains internautes à distinguer certaines couleurs ne représente pas un investissement colossal : une simple calculatrice suffit!

Cependant, si les calculatrices vous donnent des boutons, sachez qu'il existe des outils plus perfectionnés et gratuits tels que checkmycolours.com ou l'extension WCAG Contrast checker pour Firefox

---

(1) <a title=""Différents troubles de la vision des couleurs" sur le site de l'association française du Lasik" href="http://www.lasik.asso.fr/maladies-oculaires/differents-troubles-de-la-vision-des-couleurs?page=0,0">http://www.lasik.asso.fr/maladies-oculaires/differents-troubles-de-la-vision-des-couleurs?page=0,0 (2) <a title=""La vision des couleurs et le daltonisme" sur Ophtasurf" href="http://ophtasurf.free.fr/lavision.htm">http://ophtasurf.free.fr/lavision.htm (3) http://fr.answers.yahoo.com/question/index?qid=20080222062926AAx5FXv (4) Petit rappel: |x| se lit "valeur absolue de x" (5) Ces formules ne sont que des propositions du W3C et elles peuvent être amenées à changer au gré des découvertes sur le sujet

---

Bien choisir ses couleurs pour le web par Charles-Édouard Coste est mis à disposition selon les termes de la Licence Creative Commons Paternité - Pas de Modification 3.0 France