Nouvel outil de vérification du contraste des couleurs
Par Victor Brito, le mardi 18 novembre 2008, à 17h14 - Catégorie Accessibilité - Lien permanent
Parmi les outils proposés sur Britoweb, un nouvel outil vient d'être mis en ligne, qui permet de vérifier le contraste des couleurs.
Le principe est simple : vous saisissez le code hexadécimal à six chiffres (sans le dièse initial) respectif de la couleur de premier-plan et de celle d'arrière-plan que vous souhaitez utiliser dans vos feuilles de style ou dans vos maquettes graphiques réalisées sous Photoshop ou sous un autre logiciel de graphisme. Une fois le formulaire soumis, le verdict tombe, qui indique si vous pouvez ou non utiliser les deux couleurs en question.
Les notations raccourcies du code hexadécimal, lorsqu'elles existent (par exemple, #369 pour #336699), sont autorisées. En revanche, les mots-clés de couleur utilisés en CSS ne peuvent être utilisés, ni le code décimal (par exemple : 128, 128, 255). Pour rappel, les mots-clés de couleur en CSS correspondent aux codes hexadécimaux suivants :
maroon:#800000,red:#ff0000(ou#f00),orange:#ffa500,yellow:#ffff00(ou#ff0),olive:#808000,purple:#800080,fuchsia:#ff00ff(ou#f0f),white:#ffffff(ou#fff),lime:#00ff00(ou#0f0),green:#008000,navy:#000080,blue:#0000ff(ou#00f),aqua:#00ffff(ou#0ff),teal:#008080,black:#000000(ou#000),silver:#c0c0c0,gray:#808080.
L'intérêt de cet outil est, évidemment, lié à l'accessibilité, en ce sens qu'il faut s'assurer que l'association des couleurs de premier-plan et d'arrière-plan offre suffisamment de contraste pour que le contenu baigné dans ladite association soit accessible sans qu'on ait trop mal aux yeux ou qu'on éprouve des difficultés à cause de troubles visuels liés à la perception des couleurs, comme le daltonisme. Autrement dit, ceux qui doutent de l'intérêt de vérifier le contraste des couleurs pourront voir que noir et blanc sont en parfaite harmonie, mais que blanc sur blanc tout fout le camp.
J'ose espérer que vous n'aurez pas trop mal aux yeux. 
Édition du 12 décembre 2009 : pour vérifier le contraste des couleurs dans l'esprit des WCAG 2.0, un autre outil est à votre disposition, dont je parle dans un billet intitulé Nouvel outil de vérification du contraste des couleurs selon les WCAG 2.0.
Commentaires
Quel algorithme as-tu utilisé ? Un texte en gris clair 777 sur fond blanc passe ton test alors que je trouve personnellement le contraste insuffisant.
Pour la luminosité : 299 fois le niveau de rouge plus 587 fois le niveau de vert plus 114 fois le niveau de bleu, le tout divisé par 1000. L'opération est répétée pour chacune des couleurs et on effectue la différence entre les deux résultats trouvés.
Pour la tonalité : le niveau le plus élevé de rouge moins le niveau le plus bas de rouge plus la même soustraction pour le niveau de vert plus la même soustraction pour le niveau de bleu.
D'ailleurs, après vérification, pour la tonalité, le W3C fixe le seuil de la différence de tonalité des couleurs à 500, et non 400. J'ai donc corrigé mon script.
OK, c'est bien l'algorithme du W3C. C'est la même chose mais en français que sur http://juicystudio.com/services/col...
Hey
,
Tu t'es basé sur cet algorithme : http://www.w3.org/TR/AERT#color-con... ?
Effectivement, Frank, mon objectif principal était de fournir un outil en ligne dans notre langue.
Ben oui, Ivan. Si jamais il y a d'autres algorithmes dans ce domaine, je suis preneur.
Cet algorithme est pas parfait non plus, et on peut très bien se retrouver avec des contrastes suffisants malgré le fait qu'on soit en dessous de 4 avec du orange sur du blanc par exemple, cela reste néanmoins un bon moyen de vérifier en cas de doute sur un contraste.