Bonjour
J’espère poster au bon endroit.
J’ai eu récemment une petite galère après avoir voté sur Congressus pour une formation, où j’ai eu du mal à avoir si j’avais voté, et pour quelle option j’avais voté. En effet, à l’heure actuelle, quand on vote, on juste le cadre autour des boutons qui change de couleur. J’ai mis un moment à m’en apercevoir. 
De plus, en creusant le sujet, j’ai fait quelques tests d’accessibilité, et j’ai constaté que cette idée du fond de couleur n’est pas systématiquement accessible.
Quelques idées :
- retirer le cadre de couleur
- mettre un symbole pour l’option choisie, typiquement une coche, qui confirme bien que c’est l’option choisie.
- accentuer l’option sélectionnée, en jouant sur la valeur de luminosité de la couleur des boutons entre eux (même si la notion de couleur dépend de ce qu’on voit)
- idéalement, mettre au même niveau toutes les options non-choisies (typiquement en gris, valeurs par défaut des boutons dans bootstrap).
Exemples :
Le fond des boutons colorés conserve l’utilisation du premier paramètre HSL comme variable, mais les autres valeurs sont changées pour accroître l’accessibilité: hsl($1, 100%, 80%)
Pour continuer sur l’accessibilité des éléments, il y a aussi les boutons « remettre à zéro » et « s’abstenir » qui ne passent pas les tests d’accessibilité, car ayant un texte blanc sur un fond de couleur. Ils gagneraient à voir leur texte être changé pour du noir.
Mon exemple prend aussi en compte quelques éléments annexes : séparation de la description, des instructions et modalités de vote, et des votes en eux-mêmes par l’utilisation d’un simple trait ; utilisation de titres pour les labels de vote, etc.
J’aurai bien suggéré les changements directement dans GitHub pour faire gagner du temps, mais je ne sais pas (encore) m’en servir. 
Dès fois que, les modifs CSS nécessaires (il faudrait ajouter une class off aux boutons judgement désactivés) :
.judgement {
filter: brightness(75%) !important;
}
.judgement.active {
filter: brightness(100%) !important;
}
.judgement.active::after {
content: " ✔️";
}
.judgement.off {
background: #BFBFBF !important;
filter: brightness(100%) !important;
border-color: #999;
}
