Contraste de hipervínculos en modo oscuro

Publicando aquí porque el tema original ha sido cerrado.

Hola @sam y @chapoi. Gracias por la rápida respuesta al informe de @hugovk sobre el resaltado de código en modo oscuro. El equipo de Python Discourse también había notado el color de fondo oscuro para los hipervínculos, pero esto se omitió en el tema Resaltado de código casi ilegible aquí.


Puedes ver que el hipervínculo sin negrita se hunde un poco en un agujero…

¿Podrían revisar el color del texto de los hipervínculos en modo oscuro?

La misma tonalidad utilizada para hljs-builtin-names probablemente funcionará bien. El color de fondo del cuerpo del mensaje le dará una tonalidad diferente al esquema de texto del bloque de código y el color contrastará más con el fondo más oscuro del cuerpo del mensaje.

¡Gracias! -Leland

¡Por favor, no!

¡No todo el mundo parece ser ciego!

En modo oscuro, el texto normal es blanco y los hipervínculos son azules.
Entonces, ¿cuál es el problema con eso?

1 me gusta

No tengo el mismo tono que tú. El azul que tengo es un poco más brillante y funciona perfectamente.

2 Me gusta

Es solo cuestión de ajustar el tono para obtener más contraste, Alex. Los hipervínculos son un poco oscuros, por lo que se hunden en el fondo como se muestra en la captura de pantalla. Un nivel o dos de tono es todo lo que se necesitará.

Tenga en cuenta que los desarrolladores de Discourse y la mayor parte del equipo de Python.org son profesionales con mucha experiencia en diseño de interfaces de usuario. Estos son ajustes sutiles. No se proponen ni se solicitan modificaciones drásticas aquí.

1 me gusta

Puedes cambiar fácilmente los colores de los hipervínculos para ti en la configuración del tema con CSS.

1 me gusta

Estoy obteniendo lo mismo que @Jonathan_Poyer, donde los hipervínculos aquí/en mi pantalla son de un azul ligeramente más brillante que los de tu captura de pantalla:

¿Podría ser una elección de color en el tema que estás usando?

2 Me gusta

Gracias por las comparaciones, @Jonathan_Poyer y @JammyDodger. Es muy útil. Sí, mis hipervínculos también se ven mejor aquí. Diría que es la cantidad exacta de ajuste que tenía en mente. Aquí hay una captura de pantalla que muestra el hipervínculo y la captura de pantalla del OP aquí.

Hasta donde sé, estamos ejecutando la configuración CSS predeterminada. El grupo de administradores es el equipo de desarrollo principal de Python, por lo que comprensiblemente prefieren centrarse en administrar Python en lugar de administrar Discourse.

Tuvieron una discusión sobre el resaltado de código en la que participó Sam Saffron y Charlie ‘Chapoi’ hizo el ajuste para la próxima versión. Simplemente olvidamos incluir el tema de los hipervínculos. (Curiosamente, el resaltado del código es ahora mejor allí, aunque la versión ajustada está pendiente. Quizás alguien encontró la asignación de color y la modificó).

Al principio pensé que discuss.python.org estaba ejecutando una compilación diferente de Discourse. Sin embargo, actualmente estamos ejecutando 2.9.0.beta4 y el visor de elementos de página muestra lo mismo aquí:

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

¿Sabes dónde está la especificación del color del hipervínculo, por casualidad?

1 me gusta

¿Por qué está pendiente la versión? La mayoría de los foros usan “test-passed” y no “beta” para actualizar. El nombre de la versión no es la única información que obtienes

1 me gusta

Revisando tu número de versión, parece que te actualizaste el 4 de junio, así que deberías tener esas actualizaciones. :+1:

Creo que es el color terciario, que puedes encontrar en /admin/customize/colors y seleccionar el tema oscuro. Meta y mi sitio de prueba tienen 0f82af como código de color.

1 me gusta

Ahora enviamos un esquema de color oscuro adicional de alto contraste en el núcleo que probablemente resolverá su problema. Puede probar ese esquema aquí en meta, se llama WCAG Dark.

Veo que ese esquema no está disponible en la comunidad de Python (lo más probable es que la comunidad se estableciera antes de que agregáramos los esquemas WCAG al núcleo). Por lo tanto, su mejor opción aquí es comunicarse con los administradores de ese sitio y pedirles que habiliten los esquemas de color WCAG.

4 Me gusta

Aquí en Discourse Meta está un poco mejor, pero estoy bastante seguro de que estamos usando los colores predeterminados en Python Discourse.

Hipervínculos

En Python Discourse, los hipervínculos son azul #306897 sobre gris #222222, que tiene una relación de contraste de 2.69:1, y está por debajo de las Pautas de Accesibilidad para el Contenido Web (nivel AA: 4.5:1, nivel AAA: 7:1) del W3C.

(Aquí en Discourse Meta es un poco mejor: azul #0F82AF sobre el mismo gris #222222, relación 3.61:1, pero todavía por debajo de AA y AAA.)

Bloques de código

En Python Discourse, la corrección de los bloques de código ya se ha implementado y definitivamente es una gran mejora.

Pero azul #4288C3 sobre gris #3F3F3F con 2.77:1 todavía está por debajo de las pautas de WCAG, por lo que hay margen de mejora.

(Aquí en Discourse Meta, azul #4288C3 sobre gris #3F3F3F con 4.34:1 es de manera similar mejor pero por debajo de AA y AAA.)

3 Me gusta

Gracias por esto. ¡Vaya! Eso es bastante magistral. Todo es tan visible que en realidad bajé el brillo. El editor de publicaciones activo en la parte inferior realmente se hace evidente. No es tan prominente en el tema oscuro normal.

Sin embargo, el editor tiene un poco de un brillo “neón callejero”. Podrías considerar atenuarlo uno o dos puntos (oscurecer el tono o agregar más rojo/verde). Adelgazar el borde de color en un píxel sería posiblemente ideal, pero supongo que el grosor del borde no es uno de los parámetros del tema.

Realmente me gusta el oscuro de alto contraste.

2 Me gusta

Diría que los niveles de contraste aquí están bastante bien equilibrados. Los diversos elementos de la interfaz de usuario también deben contrastar entre sí.

Por ejemplo, si los hipervínculos se acercan demasiado a la relación de contraste de primer plano/fondo de W3C, comenzarán a fusionarse con el texto del cuerpo. Por lo tanto, el contraste entre los colores del texto del cuerpo y los hipervínculos es igualmente importante, especialmente cuando se trata de texto de hipervínculo corto en el centro de un párrafo de texto del cuerpo.

@sam y @chapoi, ¿saben si los colores de resaltado de hipervínculos y código de Discourse Meta se han ajustado respecto a los predeterminados aquí?

1 me gusta

Descargo de responsabilidad: No soy Sam ni Chapoi :slightly_smiling_face:, pero estos son los colores predeterminados del esquema oscuro de mi sitio de prueba (que también son los de Meta):


Este sitio de prueba en particular se creó a finales de octubre de 2021.

2 Me gusta

¿Es 0f82af el color terciario predeterminado actual para el tema oscuro?

1 me gusta

Creo que sí. No he tocado mis paletas de colores en mi sitio de prueba, así que creo que es una suposición justa. Sin embargo, alguien con más conocimientos puede tener más información. :slightly_smiling_face:

2 Me gusta

¿Qué tal tu versión?

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

1 me gusta

Estaba en 17227e9e53 cuando revisé las paletas de colores, pero noté que estaba unos commits por detrás de ti, así que pensé en actualizar solo para estar seguro. Ahora está en 42683d4874 y todavía tiene el mismo código de color terciario del tema oscuro (0f82af).

1 me gusta