Skip to content

Calcul le contraste du texte dans l'agenda

Yannick François requested to merge palette-de-couleurs into master

https://trello.com/c/F0LCArHS/1116-probl%C3%A8me-de-contrastes-sur-lagenda-et-les-couleurs-de-motifs

Dans un premier temps, j'ai exploré la possibilité, comme évoqué dans le ticket, de proposer une palette de couleur prédéfini au moment de la configuration d'un motif.

Définition d'une palette à partir du figma, puis déclinaison pour trouver 22 couleurs de fond et de texte en accord avec le référentiel d'accessibilité en utilisant le site a11yrocks/colorPalette

Puis je me suis demandé s'il fallait proposer la palette à la façon de trello

Capture d’écran de 2020-12-29 18-16-49

Mais j'ai trouvé que ça faisait un composant très complexe pour un usage un peu limité.

J'ai donc exploré le fait de proposer une couleur par hasard, avec possibilité de relancer le choix, à la manière de github

Capture d’écran de 2020-12-29 18-19-08

Composant nécessitant du javascript. Problématique similaire au premier choix d'implémentation : composant complexe pour un intérêt limité.

En reprenant le problème à la base « le contraste dans l'agenda », je me suis demandé s'il n'y avait pas une autre approche : calculer la couleur du texte assez contrasté à partir d'un couleur de fonds.

Ça voudrait dire garder le color picker sur les motifs. J'ai envie de me demander si c'est ok vis à vis d'un contexte d'éco-conception. Est-ce l'input type color est compatible avec les vieilles versions de navigateur ? Je vais faire l'hypothèse que c'est ok pour le moment

En cherchant un peu, je suis tombé sur l'article Calculating Color Contrast. L'implémentation est plus simple. Cette PR implémente cette fonctionnalité dans un helper.

Merge request reports