afup / barometre

site public pour le baromètre des salaires
34 stars 30 forks source link

Graphiques non lisibles pour des daltoniens (au rouge ou au vert) #354

Open samy opened 3 years ago

samy commented 3 years ago

On m'a remonté le fait que les deux graphes de la page d'accueil (mais sans doute d'autres graphes s'ils utilisent le même principe de lignes colorées) sont illisibles pour des daltoniens (qui ne voient pas le rouge ou le vert).

Exemple de rendu avec l'extension Colorblinding pour simuler un daltonisme au rouge image

Il pourrait être pratique d'avoir par exemple des pictogrammes différents pour chaque ligne.

Merci !

JulioPotier commented 3 years ago

Bonjour, je suis le reporter, alors c'est pas que rouge/vert, les 2 premières lignes du haut sont de même couleur pour moi, leur teinte est trop proches, je dois user d'un addon qui modifie les couleurs pour que ça passe ce que je vous conseille c'est de créer vos graph en noir et blanc (niveau de gris) et là vous vous direz "mince je capte pas la différence", donc il faut faire autrement en plus des couleurs : des patterns donc pour ça, des lignes pointillées, des dash, des dash puis points, etc le but étant de pouvoir différencier les lignes autrement que la couleur autre possibilité, sur le graph, avant que la ligne ne démarre, vous ajoutez une icone genre rond/carré/triangle/étoile etc (pa de penta, octo qui vont commencer à ressembler à un rond à cause des nombreux angles) et dans la légende ces icônes sont reprise. voilà !

BenoitLeveque commented 3 years ago

je vais essayer de voir ce que la lib utilisé propose (on utilise highcharts) mais ça devrait être faisable

samy commented 3 years ago

je vais essayer de voir ce que la lib utilisé propose (on utilise highcharts) mais ça devrait être faisable

Oui HighCharts le permet :) https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-marker-symbol/

BenoitLeveque commented 3 years ago

je vais mettre un truc comme ça, il faut que je regarde aussi les autres type de graphique pour voir ce que je peux faire pour améliorer le rendu.

Capture d’écran 2021-03-25 à 12 57 17
JulioPotier commented 3 years ago

top ça :)

BenoitLeveque commented 3 years ago

c'est en ligne, il me reste a corriger les rapport comme celui-ci : https://barometre.afup.org/report/speciality_salary?filter%5Bcampaign%5D%5B0%5D=8 il faut que je trouve comment changer ça