Sommaire
Chers et chères camarades, trichromates ou pas, bonsoir,
Depuis assez longtemps je cherche un moyen de tester l'accessibilité de sites ou de graphiques aux daltoniens. Il existe un certain nombre de sites qui proposent ce genre de service, mais aucun qui m'ait convaincu. J'avais déjà tenté de mettre en place moi-même un tel service il y a des années, mais les technologies du web ne permettaient pas à l'époque de faire ce la. Les choses ont changé aujourd'hui, en particulier grâce à CSS3.
Bon… je vois que c'est bien long, alors si vous avez la flemme allez directement à la fin ou bien allez juste faire un test sur le site en question, colortest.it
Ce qui existe
Etre Colsim http://www.colsim.com
Pour commencer le service est payant, et 1,20€ la page web ou l'image testée, ça fait un peu cher.
Il fonctionne avec un form à soumettre, et on reçoit les images simulées par email, autant dire que c'est râpé pour tester un site avec des éléments interactifs, et j'imagine qu'il faut oublier tout le contenu généré en JavaScript. Je ne l'ai pas testé, parce que je ne veux pas payer.Coblis http://www.color-blindness.com/coblis-color-blindness-simulator/
Ce simulateur est assez bon, il semble reproduire précisément les couleurs perçues et fournit même un lien vers les matrices de transformation des couleurs (dommage que le lien soit down depuis longtemps maintenant).
Malheureusement, il ne fonctionne qu'avec les images, et de moins de 600 ko. Impossible donc de tester un site facilement.Chromatic Vision Simulator http://asada.tukusi.ne.jp/cvsimulator/e/
Une application Android/iOS. Si j'ai bien compris, elle applique la simulation à ce que voit la caméra de l'appareil, ou éventuellement à une image statique. Une version web est disponible, et c'est ce qu'elle propose (le navigateur doit supporter WebGL).
Toujours pas de support des sites web dynamiques, à moins de filmer un écran d'ordinateur pendant qu'on utilise le site.ColorBlindness SimulateCorrect https://play.google.com/store/apps/details?id=com.SeewaldSolutions.ColorBlindnessSimulator
Une application Android qui fait la même chose, mais qui propose aussi de corriger les couleurs pour les daltoniens (je reste dubitatif devant la possibilité technologique de faire ça, mais n'étant pas daltonien moi-même je ne peux pas réellement juger).L'extension Firefox que j'avais testée a semble-t-il été supprimée par son auteur.
Vischeck http://www.vischeck.com/vischeck/vischeckURL.php
Le seul service gratuit permettant la simulation d'un site, mais apparemment il est maintenant down.
Je ne me souviens plus trop à quel point il fonctionnait, mais il ne supportait pas la simulation sur les<canvas>
Ce que je cherche
Peut-être n'êtes-vous pas sans savoir qu'un de mes loisirs est la création de graphiques divers, en voici une petite sélection :
* http://ssz.fr/bac/ Résultats du Bac 2013, moyenne par département
* http://ssz.fr/subventions/ Utilisation de la réserve parlementaire 2011
* http://ssz.fr/finances/ Résultat comptable 2011 par commune, en euros par habitant
* http://ssz.fr/presidents/ Chefs de l'état et chefs du gouvernement français depuis 1800
* http://ssz.fr/vaches/ Population de la France en porcs, vaches, humains, moutons et chèvres
* http://ssz.fr/eez/ Rapport ZEE/superficie des pays du monde
Voilà donc des graphiques qui sont pour certains en SVG, pour d'autres en canvas, tous générés en JavaScript (je ne suis pas responsable de l'éventuel plantage de votre navigateur /o/). Certains dépendent directement de la vision des couleurs pour être lisibles, d'autres non grâce à plusieurs techniques.
Dans tous les cas, il est rapidement évident que les services précédemment cités ne sont d'aucune utilité pour tester l'accessibilité de ce type de graphiques.
L'autre possibilité est de montrer les graphiques sur la tribune et d'attendre les retours, mais les daltoniens eux-mêmes ne sont pas les mieux placés pour tester l'accessibilité d'un site puisqu'ils ne savent justement pas forcément ce qu'ils ne peuvent pas distinguer !
Ce qui est possible
Je me suis donc mis en quête d'un système qui permettrait de tester tout ça facilement, rapidement, en même temps que je développerais mes sites ou graphiques.
La façon la plus courante de modifier les couleurs d'un site semble être de le proxyfier et de modifier au passage les valeurs de couleurs dans les styles, mais cela pose problème à plusieurs égards :
Il est impossible par cette méthode de toucher aux couleurs des <canvas> à moins de modifier sans discrimination toutes les références à des couleurs dans le code - et même là, difficile de remplacer "red" ou "teal" sans risquer de modifier du texte important, sans compter les couleurs générées à partir d'échelles dans d3js.
L'autre façon est évidemment de faire un rendu de la page et d'appliquer les modifications idoines à l'image résultante, au prix de la perte de l'interactivité. Même si les sites qui tentent de faire ça échouent souvent lamentablement, il suffirait d'utiliser PhantomJS pour avoir un rendu tout à fait correct, y compris des canvas et du SVG. Seulement, c'est lourd et très peu pratique pendant le développement.
Je me suis donc tourné vers les filtres CSS SVG :
Parmi les filtres SVG se trouve le filtre feColorMatrix qui permet d'appliquer une matrice de transformation aux couleurs. Exactement ce que je veux !
Après avoir créé la matrice, il suffit d'appliquer le style filter: url(#id-du-filtre) à l'élément dont je veux ajuster les couleurs. Contre toute attente, aucun navigateur ne restreint l'application d'un tel filtre à une <iframe>, il ne reste donc qu'à afficher dans une iframe le site à tester, et tout se passe tout seul.
Il y a bien deux ou trois inconvénients :
- Le plus important, une matrice de transformation n'est pas vraiment assez puissante pour simuler précisément le daltonisme. La vision humaine est plus complexe qu'une simple transformation linéaire de valeurs RVB, les capteurs ont des plages de réception complexes, qui se chevauchent. Des méthodes existent pour faire ces calculs de manière précise, mais d'après ce que je comprends des résultats que j'ai eus les navigateurs ne calculent pas les couleurs avec une précision suffisante pour les mettre en application.
- Les performances, bien qu'acceptables, ne sont pas exceptionnelles. Elles dépendent beaucoup du site affiché, par exemple on peut tester des vidéos mais elles rament un petit peu, ou du SVG interactif mais là aussi les performances ne sont pas au top.
- Certains sites refusent de s'afficher dans une
<iframe>, en particulier les sites de Google. C'est légitime, il y a même un header HTTP spécifique pour ça (x-frame-options: SAMEORIGIN) et je ne peux rien y faire (bien qu'il reste possible de passer par un deuxième site servant de proxy, disons Proxfree par exemple, pour tester une vidéo sur Youtube). - L'iframe empêche le site de savoir ce qu'il se passe à l'intérieur de l'iframe, impossible de donc de mettre à jour l'url comme dans une vraie barre d'adresse lorsqu'on clique sur des liens à l'intérieur.
Au final, la solution des filtres CSS SVG reste satisfaisante malgré ces petits défauts (et c'est surtout la seule solution viable).
L'autre option, qui me semblait prometeuse, se basait sur les WebGL custom filters, mais WebGL a l'inconvénient de ne pas fonctionner partout, et de toute façon… après une courte période de test sur Chromium, ces filtres ne sont plus supportés par aucun navigateur aujourd'hui.
Ma solution
Bref, après ce pâté de texte, que j'espère vous avez lu sans rien sauter, vous avez le droit au lien vers mon site de simulation de daltonisme, et n'hésitez pas sur les rapports de bug :
En plus de simuler les trois types de daltonisme les plus courants, le menu à gauche de la barre d'adresse propose deux entrées, "enhance green" et "enhance red", qui peuvent aider les daltonien à distinguer les dégradés ou autres graphiques qui vont du vert au rouge. Ces filtres transforment respectivement le vert ou le rouge en bleu, que la plupart des daltoniens voient distinctement, en laissant l'autre canal tel qu'il est.
# Bravo
Posté par Effraie (site web personnel) . Évalué à 10. Dernière modification le 05 décembre 2014 à 22:47.
Juste bravo, voila un truc vraiment utile!
\Ö<
[^] # Re: Bravo
Posté par djabal . Évalué à 8.
Pareillement, bravo !
J'aime ce genre de projet !
# Petite suggestion
Posté par ǝpɐןƃu∀ nǝıɥʇʇɐW-ǝɹɹǝıԀ (site web personnel) . Évalué à 3.
Pourquoi se concentrer ainsi sur les couleurs ? Pourquoi ne pas utiliser aussi des textures : hachures, points… ?
« IRAFURORBREVISESTANIMUMREGEQUINISIPARETIMPERAT » — Odes — Horace
[^] # Re: Petite suggestion
Posté par 못 옷 홋 ♨ (site web personnel) . Évalué à 4.
Mais justement !
Tu noteras que pour http://ssz.fr/vaches/ j'ai utilisé des textures différentes pour chaque catégorie. J'ai aussi http://ssz.fr/compass/ (qui n'est pas trop fini et qui met un peu de temps à charger) qui utilise des textures, par exemple. Par contre c'est bien plus compliqué à faire. Et bien sûr, dans le cadre de colortest.it ce n'est pas possible d'ajouter automatiquement de telles textures aux couleurs (les filtres SVG ne le permettent pas, et je ne connais rien d'autre qui le pourrait).
Et puis dès que l'on sort de grands aplats de couleurs, quand il s'agit de photos, de dessins, les textures n'ont plus beaucoup de sens.
[^] # Re: Petite suggestion
Posté par claudex . Évalué à 5.
Et puis, une texture, ça peu aussi être illisible pou un daltonien. Genre, si on utilise du vert sur du rouge.
« Rappelez-vous toujours que si la Gestapo avait les moyens de vous faire parler, les politiciens ont, eux, les moyens de vous faire taire. » Coluche
# Proxi ?
Posté par bolikahult . Évalué à 3.
Bonjour,
Votre site est-il un proxi ou laisse-t-il une connexion intacte entre ma machine et internet ? Pourquoi ne pas faire un plugin firefox ? (comme il a déjà existé)
Je précise que je ne suis pas daltonien, mais c'est un chouette projet.
Et j'aime aussi ton site web, même si en effet certaines animations sont lourdes !
Bonus : mise en abyme (expire au bout d'un mois)
À noter que après avoir appliquer tous les filtres, les images deviennent grises. Mais ce que je dis là ne sert sûrement à rien !
[^] # Re: Proxi ?
Posté par 못 옷 홋 ♨ (site web personnel) . Évalué à 7.
Le site n'est pas un proxy, ce n'est rien de plus qu'un bandeau au-dessus du site affiché avec un filtre qui en modifie les couleurs à l'affichage. Et un plugin Firefox, ça ne fonctionne que sous Firefox donc ça m'intéresse peu à côté d'un site qui fonctionne partout, en plus il faut l'installer sur chaque navigateur qu'on veut utiliser.
Ça permet aussi de tester les sites en HTTPS sans aucun problème, ou ceux sur lesquels on doit s'identifier. La politique des navigateurs en matière d'iframes est très stricte, le site "hôte" (le mien en l'occurrence) n'a absolument aucun accès à ce qui se passe dans l'iframe (même pas faire une capture d'écran ou y exécuter du javascript).
Quand on applique les filtres en série les images deviennent grises simplement à cause du filtre monochrome :)
[^] # Re: Proxi ?
Posté par bolikahult . Évalué à 1.
Ok, ce n'est pas pas un proxy, même si je ne comprends pas vraiment comment ça marche.
Et sinon oui, en effet, ton filtre monochrome est bien un filtre monochrome, au temps pour moi ! :)
[^] # Re: Proxi ?
Posté par 못 옷 홋 ♨ (site web personnel) . Évalué à 4.
Au lieu de passer par mon serveur, c'est le navigateur qui télécharge directement le site comme lui indique la balise
<iframe src="http://linuxfr.org" />et l'affiche à l'intérieur du cadre de cette balise "iframe" (qui sur mon site, fait toute la largeur de l'écran et presque toute la hauteur à l'exception du bandeau).Donc rien n'est passé par mon serveur, et quand on clique sur un lien dans l'iframe le navigateur fait directement la requête sans même en informer ma page. Après ça, mon CSS indique au navigateur de transformer 43% du vert en rouge, 56% du rouge en vert, 24% du bleu en vert, etc, mais sans avoir eu accès à aucun moment à ce qui est sur le site.
En plus d'être mieux pour des raisons de sécurité, ça réduit aussi surtout largement la bande passante dont mon serveur a besoin (puisqu'au final, mon serveur ne fait rien d'autre que servir une petite page statique).
[^] # Re: Proxi ?
Posté par Jehan (site web personnel, Mastodon) . Évalué à 5.
Salut,
Je sais que tu n'aimes pas l'idée d'un plugin (tu l'as écrit plus haut), mais ça aurait les avantages suivants tout de même:
- marche sur les sites qui n'autorisent pas les iframes (tu cites flickr dans ton about);
- vire le bandeau en haut, qui certes est très fin, mais serait encore mieux si inexistant (à remplacer par un bouton-menu par exemple, dans le navigateur, et on pourrait même assigner des raccourcis pour voir un site en mode "daltonisme" d'une touche).
- impacterait encore moins ton serveur, puisqu'il n'a rien à servir. :-)
- ne disparaîtrait pas si un jour tu décides que cela ne t'intéresse plus (sans pour autant le retirer explicitement comme l'a apparemment fait un autre auteur de plugin), ou tout autre raison (dont certaines fatales que je ne te souhaite pas, mais on sait bien qu'on y passera tous au final…).
Enfin je dis ça car je préfèrerais aussi pour sûr avoir une version plugin plutôt que web.
Ensuite chacun est libre de faire comme il lui plaît. Ce site me paraît déjà génial comme cela (même si je n'y connais rien et ne suis pas en mesure de confirmer ou infirmer que ton site donne des simulations réalistes). Je donne juste mon vote au cas où un jour tu décides de faire aussi un plugin. :-)
À propos, le code du site est-il sous licence Libre? Si oui, laquelle et où est le code. Si non, y a-t-il projet de passer sous Licence Libre?
Merci!
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
[^] # Re: Proxi ?
Posté par 못 옷 홋 ♨ (site web personnel) . Évalué à 2.
Le site est sous WTFPL et le code est simplement dans la source.
Pour le plugin… moui, enfin je dois avouer que je n'utilise pas souvent Firefox, je suis plutôt sous Chromium, et puis je n'ai encore jamais fait de plugin (ni Firefox ni autre chose).
Mais je vais regarder un peu comment faire, quand même.
[^] # Re: Proxi ?
Posté par bolikahult . Évalué à 2.
Merci pour tes explications, je comprends bien mieux !!
# Bookmarklet
Posté par bonnaud frederic (site web personnel) . Évalué à 4.
Pour que cela puisse être vraiment utilisable partout, pourquoi ne pas proposer 4 bookmarklets qui collerait le filtre svg approprié au du document en cours ? Y'a quelque chose qui empêche cela ?
[^] # Re: Bookmarklet
Posté par Cyril Pascal (site web personnel) . Évalué à 0.
+1 pour le bookmarklet!
Je suis "daltonien", et j'ai Firefox 3.5+ du coup le bookmarklet est aussi simple qu'une ligne de code :
javascript:(function(){document.body.style.filter='url("data:image/svg+xml;utf8,<svg%20xmlns=\'http://www.w3.org/2000/svg\'><filter%20id=\'protanopia\'><feColorMatrix%20type=\'matrix\'%20values=\'0.56667%200.43333%200.00000%200%200%200.55833%200.44167%200.00000%200%200%200.00000%200.24167%200.75833%200%200%200%200%200%201%200\'/></filter></svg>#protanopia")';})();
# Ceci est une...
Posté par cosmocat . Évalué à 2.
mise en abîme
[^] # Re: Ceci est une...
Posté par Enzo Bricolo 🛠⚙🛠 . Évalué à 1.
inception
# Upload
Posté par François (site web personnel) . Évalué à 1.
Excellente idée. La seule chose qui me manquerait serait la posibilité de faire le même traitement à un fichier (pdf, png…) que j'uploaderais. Ce serit utile pour les rapports, présentations etc.
Merci.
[^] # Re: Upload
Posté par Jehan (site web personnel, Mastodon) . Évalué à 3.
Ce serait en fait un autre bon point pour un plugin: pouvoir tester un fichier local sans uploader sur un serveur distant (déjà pour le temps que ça prend pour un gros fichier, mais aussi pour la confiance qu'on peut accorder à un site tiers). :p
Ceci dit, pour les fichiers locaux, il existe un programme qui fait très bien l'affaire: Scribus. Ça permet de visionner un fichier avec vision normale, mais aussi avec les différentes formes de daltonisme.
Pour cela il suffit de se mettre en mode "preview" et en bas à droite, vous avez une liste pour choisir le type de vision de prévisualisation ("Normal Vision", "Protanopia", etc. Enfin la même liste que colortest.it).
Et bien entendu Scribus lit parfaitement les PDFs (c'est d'ailleurs probablement le meilleur logiciel sous Linux qui permet d'éditer des PDFs. En tous cas, de ceux que je connais).
Donc de ce côté là, ce site et Scribus sont complémentaires (l'un pour les pages web, l'autre pour les fichiers locaux).
Film d'animation libre en CC by-sa/Art Libre, fait avec GIMP et autre logiciels libres: ZeMarmot [ http://film.zemarmot.net ]
[^] # Re: Upload
Posté par François (site web personnel) . Évalué à 0.
Pour la confidentialité, je prévoyais d'installer l'appli sur mon serveur.
Pour ce qui est de scribus, merci, je ne savais pas, je n'utilise pas ce logiciel. Je vais y jeter un coup d'oeil, ça me sera très utile.
# "enhance green" et "enhance red" , pas top
Posté par didg . Évalué à 1.
Bonjour,
sympa mais "enhance green" et "enhance red" ça marche pas trop :(, si je charge la page de wikipedia sur le daltonisme même avec ces modes pour moi l'image c'est toujours 21 pas 74 et je ne suis pas complètement daltonien, enfin assez pour m'être fait bouler à la visite marmar…
[^] # Re: "enhance green" et "enhance red" , pas top
Posté par 못 옷 홋 ♨ (site web personnel) . Évalué à 1.
Hello,
Alors le problème c'est que je peux difficilement tester ça par moi-même :)
J'ai surtout supposé que théoriquement ça devrait aider, mais je pense que j'avais mal approché le problème. J'ai révisé un peu la matrice et d'après mes tests (avec de la récursion) ça devrait marcher mieux.
Si jamais tu as le temps, tu peux me dire si ça peut te servir à quelque chose, du coup ?
[^] # Re: "enhance green" et "enhance red" , pas top
Posté par didg . Évalué à 1.
Hi,
C'est mieux pour le 21/74 mais c'est violent et cela flingue toutes les couleurs, la vie en rose ou plutôt en violet.
Par exemple les drapeaux US sur la même page, sans correction je vois les différences mais plus pour I,III et IV avec "enhance " , bon l'écran doit jouer aussi.
# Tester local
Posté par MCMic (site web personnel) . Évalué à 2.
C’est chouette, ça fonctionne pour tester les sites sur localhost.
Par contre, ça ne fonctionne pas avec une adresse type file:///path, qui pourtant ouvre bien les fichiers locaux dans mon navigateur. C’est une limitation des iframes ou de ton site? (si on pouvait faire ça ça répondrait à la question sur l’upload posée plus haut, il suffirait ensuite d’implémenter le copier/coller)
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.