Contraste des hyperliens en mode sombre

Publication ici car le sujet source a été fermé.

Bonjour @sam et @chapoi. Merci pour la réponse rapide au rapport de @hugovk sur la coloration du code en mode sombre. L’équipe de Python Discourse avait également noté la couleur de premier plan sombre pour les hyperliens, mais cela a été omis du sujet Coloration du code presque illisible ici.


Vous pouvez voir que l’hyperlien non gras s’enfonce un peu dans un trou…

Pourriez-vous revoir la coloration du texte des hyperliens en mode sombre ?

La même teinte que celle utilisée pour hljs-builtin-names fonctionnerait probablement bien. La couleur d’arrière-plan du corps du message lui donnera une teinte différente de celle du schéma de texte du bloc de code et la couleur contrastera plus fortement avec l’arrière-plan plus sombre du corps du message.

Merci ! - Leland

S’il vous plaît, ne faites pas ça !

Tout le monde ne semble pas aveugle !

En mode sombre, le texte normal est blanc et les hyperliens sont bleus.
Quel est le problème avec ça ?

1 « J'aime »

Je n’ai pas exactement la même nuance que vous. Le bleu que j’ai est un peu plus vif et fonctionne parfaitement.

2 « J'aime »

Il s’agit juste d’ajuster la teinte pour obtenir plus de contraste, Alex. Les hyperliens sont légèrement sombres, ils s’enfoncent donc dans l’arrière-plan comme le montre la capture d’écran. Une ou deux nuances suffiront.

Gardez à l’esprit que les développeurs de Discourse et la plupart de l’équipe de Python.org sont des professionnels expérimentés en conception d’interfaces utilisateur. Il s’agit d’ajustements subtils. Aucune modification radicale n’est proposée ou demandée ici.

1 « J'aime »

Vous pouvez facilement changer les couleurs des hyperliens pour vous-même dans les paramètres du thème avec CSS.

1 « J'aime »

J’obtiens la même chose que @Jonathan_Poyer, où les hyperliens ici/sur mon écran sont déjà d’un bleu légèrement plus clair que ceux de votre capture d’écran :

Cela pourrait-il être un choix de couleur sur le thème que vous utilisez ?

2 « J'aime »

Merci pour les comparaisons, @Jonathan_Poyer et @JammyDodger. C’est très utile. Oui, mes hyperliens s’affichent aussi mieux ici. Je dirais que c’est à peu près le réglage exact que j’avais en tête. Voici une capture d’écran montrant l’hyperlien et la capture d’écran de l’OP ici.

Pour autant que je sache, nous utilisons la configuration CSS par défaut. Le groupe d’administration est l’équipe de développement principale de Python, donc ils préfèrent logiquement se concentrer sur l’administration de Python plutôt que sur l’administration de Discourse.

Ils ont eu une discussion sur la coloration du code à laquelle Sam Saffron a participé et Charlie ‘Chapoi’ a effectué le réglage pour la prochaine version. Nous avons juste oublié d’inclure le sujet des hyperliens. (Fait intéressant, la coloration du code est maintenant meilleure là-bas même si la version ajustée est en attente. Peut-être que quelqu’un a trouvé l’affectation des couleurs et l’a modifiée.)

Au début, j’ai pensé que discuss.python.org utilisait une version différente de Discourse. Cependant, nous utilisons actuellement la version 2.9.0.beta4 et l’inspecteur d’éléments de page montre la même chose ici :

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

Savez-vous par hasard où se trouve la spécification de la couleur des hyperliens ?

1 « J'aime »

Pourquoi la publication est-elle en attente ? La plupart des forums utilisent « test-passed » et non « beta » pour les mises à jour. Le nom de la version n’est pas la seule information que vous obtenez

1 « J'aime »

En consultant votre numéro de version, il semble que vous ayez été mis à jour le 4 juin, vous devriez donc avoir ces mises à jour. :+1:

Je pense qu’il s’agit de la couleur tertiaire, que vous pouvez trouver à l’adresse /admin/customize/colors et sélectionner le thème sombre. Meta et mon site de test ont tous deux 0f82af comme code couleur.

1 « J'aime »

Nous expédions désormais une palette de couleurs sombres à contraste élevé supplémentaire dans le noyau, ce qui résoudra probablement votre problème. Vous pouvez essayer cette palette ici sur meta, elle s’appelle WCAG Dark.

Je constate que cette palette n’est pas disponible sur la communauté Python (très probablement parce que la communauté a été créée avant que nous ajoutions les palettes WCAG au noyau). Par conséquent, votre meilleure option est de contacter les administrateurs de ce site et de leur demander d’activer les palettes de couleurs WCAG.

4 « J'aime »

C’est un peu mieux ici sur Discourse Meta, mais je suis à peu près certain que nous utilisons les couleurs par défaut sur le Discourse Python.

Liens hypertextes

Sur le Discourse Python, les liens hypertextes sont bleu #306897 sur gris #222222, ce qui a un ratio de contraste de 2.69:1, et est inférieur aux directives d’accessibilité du contenu Web du W3C (niveau AA : 4.5:1, niveau AAA : 7:1).

(Ici sur Discourse Meta, c’est un peu mieux : bleu #0F82AF sur le même gris #222222, ratio 3.61:1, mais toujours en dessous des niveaux AA et AAA.)

Blocs de code

Sur le Discourse Python, le correctif des blocs de code a maintenant été déployé, et c’est vraiment une grande amélioration.

Mais bleu #4288C3 sur gris #3F3F3F à 2.77:1 est toujours inférieur aux directives WCAG, il y a donc une marge d’amélioration.

(Ici sur Discourse Meta, bleu #4288C3 sur gris #3F3F3F à 4.34:1 est de même mieux mais en dessous des niveaux AA et AAA.)

3 « J'aime »

Merci pour cela. Wow ! C’est assez magistral. Tout est si visible que j’ai baissé ma luminosité ! L’éditeur de publication actif en bas se manifeste vraiment. Il n’est pas aussi proéminent dans le thème sombre normal.

L’éditeur a un peu un sous-éclairage « néon de rue », cependant. Vous pourriez envisager de le réduire d’un cran ou deux (soit assombrir la teinte, soit ajouter plus de rouge/vert). Affiner la bordure colorée d’un pixel serait peut-être idéal, mais je suppose que l’épaisseur de cette bordure ne fait pas partie des paramètres du thème.

J’aime vraiment le sombre à contraste élevé.

2 « J'aime »

Je dirais que les niveaux de contraste ici sont plutôt bien équilibrés. Les différents éléments de l’interface utilisateur doivent également contraster les uns avec les autres.

Par exemple, si les hyperliens sont trop rapprochés du ratio de contraste premier plan/arrière-plan du W3C, ils commenceront à se fondre dans le texte du corps. Le contraste entre les couleurs du texte du corps et des hyperliens est donc tout aussi important, surtout lorsqu’il s’agit de texte d’hyperlien court au centre d’un paragraphe de texte du corps.

@sam et @chapoi, savez-vous si les couleurs des hyperliens et de la mise en évidence du code de Discourse Meta ont été ajustées par rapport aux valeurs par défaut ici ?

1 « J'aime »

Avertissement : Je ne suis ni Sam ni Chapoi :slightly_smiling_face:, mais voici les couleurs par défaut du schéma sombre de mon site de test (qui sont également celles de Meta) :


Ce site de test particulier a été créé fin octobre 21.

2 « J'aime »

La couleur tertiaire par défaut actuelle pour le thème sombre est-elle 0f82af ?

1 « J'aime »

Je crois bien. Je n’ai pas touché à mes palettes de couleurs sur mon site de test, donc je pense que c’est une supposition raisonnable. Cependant, quelqu’un de plus compétent pourrait avoir plus d’informations. :slightly_smiling_face:

2 « J'aime »

Et votre version ?

<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">

1 « J'aime »

C’était sur 17227e9e53 quand j’ai vérifié les palettes de couleurs, mais j’ai remarqué qu’il était quelques commits derrière vous, alors j’ai pensé le mettre à jour juste pour être sûr. Il est maintenant sur 42683d4874 et a toujours le même code couleur tertiaire du thème sombre (0f82af).

1 « J'aime »