Pages de connexion et d'inscription. Dans les boutons "Connexion" et "Inscription", le texte blanc n'est pas assez contrasté avec le fond bleu du bouton.

AnthonyBrunelli commented 3 years ago

Tout est dans le titre.

lucaa commented 3 years ago

@slauriere il s'agit du bleu pour les boutons "primary" du thème de couleur. Il faudrait tout foncer jusqu'à arriver au bon contraste. Faire aussi une vérification rapide de l'usage de ces variables modifiés dans les CSS spécifiques, ainsi qu'une inspection visuelle rapide pour des boutons "primaires" qui seraient utilisés ailleurs que sur la page de connexion et inscription.

slauriere commented 3 years ago

J'ai mis à jour la couleur de fond des boutons primary du thème en utilisant celle définie localement pour le bouton de sélection de date d'observatoire. Cela résout le problème de contraste sur les pages de connexion et d'inscription.

Suite à ce changement, j'ai supprimé les règles CSS spécifiques devenues redondantes avec cette couleur du thème : dans DashboardSheet (bouton de choix de date donc) et dans DemarchesSheet (bouton d'affichage / masquage des détails de la démarche). Les autres boutons primary du site hors formulaires standards XWiki apparaissent sur la page de soumission de nouvel avis, la recherche rapide (bouton d'ajout de démarche) et les pages d'administration du site (espace "Administratoin"), qui contiennent des formulaires standard du point des classes CSS. Tout est bien ok visuellement sur ces pages après cette mise à jour.

(Nous pourrions éventuellement uniformiser encore davantage et utiliser le style du bouton de sélection de date d'observatoire - sans bord ni gradient de couleur - pour tous les boutons primary, à voir...)

amezyane commented 3 years ago

C'est presque ça ! La couleur la plus claire du dégradé ne convient pas (capture écran console Firefox) :

slauriere commented 3 years ago

Salut @amezyane, Je ne connaissais pas cette possibilité d'évaluer le contraste directement depuis les outils intégrés de Firefox. J'utilisais l'extension WCAG contrast checker jusqu'ici. Bizarrement sur le staging je n'obtiens pas les mêmes scores que toi, cf capture ci-dessous... Pas d'explication pour l'instant, je vérifie...

contraste

amezyane commented 3 years ago

@lucaa bon l'outil de FF n'est pas 100% fiable apparemment, sur Windows, la console n'affiche pas d'erreur de contraste tandis que sur Mac oui...

Du coup en vérifiant avec la pipette, le bleu qui est au niveau des lettres du mot "Connexion" a un contraste suffisant, ouf !

amezyane commented 3 years ago

Ticket validé en staging du coup

lucaa commented 3 years ago

@lucaa bon l'outil de FF n'est pas 100% fiable apparemment, sur Windows, la console n'affiche pas d'erreur de contraste tandis que sur Mac oui...

le comportement sur Windows est une vérification que t'as fait de ton côté ou c'est à base de l'image de @slauriere ? (à priori sa capture vient d'un Linux - Ubuntu si je ne me trompe pas)

Sur mon Ubuntu j'ai aussi des contrastes annoncés valides. J'ai verifié sur un Mac et mon Windows 10 et j'ai eu un comportement relativement bizarre: sur Windows tout allait bien (contraste valide) avant que je fasse les mises à jour de Firefox. Après la mise à jour (88 -> 90) , j'ai commencé à avoir le même comportement que sur Mac, erreur de contraste. Sur mon Ubuntu je suis et toujours était en Firefox 90. Sur le Mac sur lequel j'ai testé il y avait la version 89.0.2 que j'ai ensuite mis à jour à 90, mais j'ai toujours eu le même comportement, erreur de contraste... C'est assez particulier...

Maintenant, si on veut être strictes, il faut savoir que le bouton utilise un gradient avec 3 couleurs (3 nuances de bleu), avec les proportions qu'on peut voir dans cette image:

les 3 bleus sont:

1A85FF - premier du haut - vert sur l'image - contraste 3.59 avec le blanc https://contrast-finder.tanaguru.com/result.html?foreground=%23ffffff&background=%231a85ff&ratio=4.5&isBackgroundTested=false&algo=Rgb , invalide
006be5 - deuxième du haut, bleu sur l'image, contraste 4.95 avec le blanc, https://contrast-finder.tanaguru.com/result.html?foreground=%23FFFFFF&background=%23006be5&ratio=4.5&isBackgroundTested=false&algo=Rgb , valide
005fcd - troisième du haut, rouge sur l'image, contraste 5.96856 avec le blanc, https://contrast-finder.tanaguru.com/result.html?foreground=%23FFFFFF&background=%23005fcd&ratio=4.5&isBackgroundTested=false&algo=Rgb , valide .

Donc, il y a, effectivement, une portion du bouton (maximmum 25%) qui utilise une nuance de bleu qui n'a pas de bon contraste avec le blanc. Maintenant, il est tout à fait possible que, avec les paddings et marges du bouton, aucune portion du texte blanc ne soit effectivement superposé sur cette zone du bouton, donc que le texte blanc soit complètement visible.

Tout est bon comme ça ou tu préfères qu'on choisit uniquement des nuances de bleu qui fonctionnent avec le blanc?

amezyane commented 3 years ago

@lucaa c'est une vérification faite de mon côté sur Windows (installé sur mon Mac)

Je pense qu'il vaut mieux privilégier des nuances de bleu ayant toutes un bon contraste, comme ça on est tranquille si jamais les styles sont modifiés/surchargé, ou le zoom texte sur Firefox est utilisé (je n'ai pas testé le rendu)

AnthonyBrunelli commented 3 years ago

@ugodtn On n'a pas un bleu "Design system" qui convienne?

AnthonyBrunelli commented 3 years ago

https://www.systeme-de-design.gouv.fr/

lucaa commented 3 years ago

@slauriere je pense que les couleurs des gradients sont calculées automatiquement par Bootstrap à base du bleu donné comme couleur pour les boutons. À verifier, par essais, quelle est la nuance de bleu "de base" qui générerait des dérivés qui valident les contrastes. Sinon, il faudrait surcharger les règles de gradient de bootstrap pour avoir le contrôle sur les nuances utilisées.

lucaa commented 3 years ago

@AnthonyBrunelli effectivement, tant qu'à travailler les nuances de bleu, on peut mettre en place les couleurs recommandées, s'il y en a.

AnthonyBrunelli commented 3 years ago

C'est le cas :) et c'est le bleu qu'ils utilisent.

AnthonyBrunelli commented 3 years ago

(et de toute manière, faudra qu'on y vienne au design system) Sur le lien, vous avez les panels de couleur et les différents éléments...

lucaa commented 3 years ago

@AnthonyBrunelli celles ci https://gouvfr.atlassian.net/wiki/spaces/DB/pages/217186370/Couleurs+-+palette+-+Color#Usage-et-correspondance-des-couleurs-(th%C3%A8me-clair-%2F-sombre) ?

si oui, il reste une question par rapport à ce bleu des boutons: normalement il est "assorti" au bleu de la page d'accueil (les "étages" sur fond bleu de la page d'accueil utilisent le même bleu, si je ne me trompe pas). Vous préférez qu'on change les 2 ou uniquement les boutons, pour l'instant? @ugodtn t'as un avis / une recommandation?

ugodtn commented 2 years ago

@lucaa oui autant utiliser le bleu France du système de design pour le bouton, car un jour on va devoir passer tout l'Observatoire sur le système de design. On parle donc de lui : # 000091. Mais du coup, pas de dégradé du tout dans le système de design, c'est interdit, donc il faut le retirer. Et au moins ça simplifie la conformité au RGAA.

lucaa commented 2 years ago

@ugodtn noté, mais il reste une question sur l'utilisation du bleu #000091 : uniquement pour les boutons ou pour les bandeaux de la page d'accueil et de la page observatoire aussi?

lucaa commented 2 years ago

Pour l'instant il n'y a pas de travail actif sur cette tâche, je la déplace en dehors de la colonne "en cours", pour la stabilisation de la version 4.8 avant installation.

lucaa commented 2 years ago

il reste une question par rapport à ce bleu des boutons: normalement il est "assorti" au bleu de la page d'accueil

@ugodtn noté, mais il reste une question sur l'utilisation du bleu #000091 : uniquement pour les boutons ou pour les bandeaux de la page d'accueil et de la page observatoire aussi?

en fait, effectivement, en y regardant maintenant plus attentivement, je me rends compte que c'est pas si assorti que ça, on peut donc changer uniquement la couleur des boutons, sans toucher aux autres écrans, pour l'instant.

ugodtn commented 2 years ago

il reste une question par rapport à ce bleu des boutons: normalement il est "assorti" au bleu de la page d'accueil

@ugodtn noté, mais il reste une question sur l'utilisation du bleu #000091 : uniquement pour les boutons ou pour les bandeaux de la page d'accueil et de la page observatoire aussi?

en fait, effectivement, en y regardant maintenant plus attentivement, je me rends compte que c'est pas si assorti que ça, on peut donc changer uniquement la couleur des boutons, sans toucher aux autres écrans, pour l'instant.

Oui, juste pour les boutons pour le moment, on verra pour le reste plus tard.

lucaa commented 2 years ago

Des modifications pour cette tâche, qui corrigent partiellement le problème, ont été faites et livrées dans 4.8.

Le changement de couleur du bouton pour le bleu DSFR, avec bon contraste, est prévu dans la tâche #1051, à priori planifiée pour 4.10. Je re-ferme cette tâche maintenant comme livrée et testée dans 4.8, pour marquer la version dans laquelle les modifications ont été livrées.

DISIC / observatoire

Pages de connexion et d'inscription. Dans les boutons "Connexion" et "Inscription", le texte blanc n'est pas assez contrasté avec le fond bleu du bouton. #991

1A85FF - premier du haut - vert sur l'image - contraste 3.59 avec le blanc https://contrast-finder.tanaguru.com/result.html?foreground=%23ffffff&background=%231a85ff&ratio=4.5&isBackgroundTested=false&algo=Rgb , invalide

006be5 - deuxième du haut, bleu sur l'image, contraste 4.95 avec le blanc, https://contrast-finder.tanaguru.com/result.html?foreground=%23FFFFFF&background=%23006be5&ratio=4.5&isBackgroundTested=false&algo=Rgb , valide

005fcd - troisième du haut, rouge sur l'image, contraste 5.96856 avec le blanc, https://contrast-finder.tanaguru.com/result.html?foreground=%23FFFFFF&background=%23005fcd&ratio=4.5&isBackgroundTested=false&algo=Rgb , valide .