Modo oscuro: el titular de «Noticias de Alcance» en portada no contrasta (color en línea, fea-homepage.php:1403) #219

New Issue

2026-08-26T18:27:52Z

inma commented

2026-08-26 18:27:52 +00:00

Qué se ve

En la portada, en modo oscuro, el titular de la noticia que va bajo la imagen de "Noticias de Alcance" sale en azul oscuro sobre fondo casi negro. Prácticamente no se lee. Detectado hoy por Inma con la portada en oscuro; ahora mismo el titular es "Las iglesias de méxico se abren a las familias que buscan a sus desaparecidos".

Dónde está

mu-plugins/fea-homepage.php, línea 1403:

. '<a href="' . esc_url($url) . '" style="color:#0000cc;">'

El color va en línea, dentro de la etiqueta. Por eso ninguna regla del tema lo corrige: un estilo en línea gana a cualquier hoja de estilos, incluidas las variantes de html[data-fea-theme="dark"] que ya existen.

Medición

Fondo	Contraste	WCAG AA (4.5:1)
Modo oscuro	1,68 : 1	❌
Modo claro (blanco)	11,22 : 1	✔

De ahí que llevara tiempo sin detectarse: en claro se ve perfectamente.

Propuesta

Quitar el estilo en línea y dejar que lo gobierne el CSS, que ya sabe distinguir los dos modos. No sirve cambiar el azul por otro azul: ningún color fijo vale para ambos fondos. Un azul claro legible en oscuro (#8ab4f8, 8,96:1) se queda en 2,11:1 sobre blanco y rompería el modo claro.

La referencia está en la misma página: ese mismo titular, en la tarjeta de artículo de arriba, se ve bien, porque usa clase y no estilo en línea:

.fea-card-title a { color: #2a2320; }
html[data-fea-theme="dark"] .fea-card-title a { color: #ececec; }

Bastaría con darle a este enlace una clase equivalente.

De paso, una pista para barrer

En ese mismo fichero hay otros colores escritos en línea. Los listo por si vienen bien, con la advertencia de que no están comprobados: mi cálculo supone fondo oscuro, y varios de ellos pueden estar sobre tarjetas de fondo claro que no cambian con el tema, en cuyo caso no hay problema alguno. El único confirmado a ojo es el de la línea 1403.

Color	Líneas	Contraste si el fondo fuera oscuro
`#0000cc`	1403	1,68 : 1 ← confirmado
`#2a2320`	491, 503, 530, 608, 619	1,22 : 1
`#8b1a2e`	490, 507, 528, 620, 622, 1073	2,05 : 1
`#6f655c`	492, 623, 1077	3,32 : 1
`#046bd2`	1713, 1965, 2142	3,63 : 1

Los otros tres (#caa9b0, #e2cdd2, #e89a1a) pasan de sobra sobre oscuro.

Enlaza con el trabajo de accesibilidad de #196 y #205.

## Qué se ve En la portada, en modo oscuro, el titular de la noticia que va bajo la imagen de **"Noticias de Alcance"** sale en azul oscuro sobre fondo casi negro. Prácticamente no se lee. Detectado hoy por Inma con la portada en oscuro; ahora mismo el titular es "Las iglesias de méxico se abren a las familias que buscan a sus desaparecidos". ## Dónde está `mu-plugins/fea-homepage.php`, **línea 1403**: ```php . '<a href="' . esc_url($url) . '" style="color:#0000cc;">' ``` El color va **en línea, dentro de la etiqueta**. Por eso ninguna regla del tema lo corrige: un estilo en línea gana a cualquier hoja de estilos, incluidas las variantes de `html[data-fea-theme="dark"]` que ya existen. ## Medición | Fondo | Contraste | WCAG AA (4.5:1) | |---|---:|---| | Modo oscuro | **1,68 : 1** | ❌ | | Modo claro (blanco) | 11,22 : 1 | ✔ | De ahí que llevara tiempo sin detectarse: en claro se ve perfectamente. ## Propuesta **Quitar el estilo en línea** y dejar que lo gobierne el CSS, que ya sabe distinguir los dos modos. No sirve cambiar el azul por otro azul: ningún color fijo vale para ambos fondos. Un azul claro legible en oscuro (`#8ab4f8`, 8,96:1) se queda en 2,11:1 sobre blanco y rompería el modo claro. La referencia está en la misma página: **ese mismo titular, en la tarjeta de artículo de arriba, se ve bien**, porque usa clase y no estilo en línea: ```css .fea-card-title a { color: #2a2320; } html[data-fea-theme="dark"] .fea-card-title a { color: #ececec; } ``` Bastaría con darle a este enlace una clase equivalente. ## De paso, una pista para barrer En ese mismo fichero hay otros colores escritos en línea. Los listo por si vienen bien, **con la advertencia de que no están comprobados**: mi cálculo supone fondo oscuro, y varios de ellos pueden estar sobre tarjetas de fondo claro que no cambian con el tema, en cuyo caso no hay problema alguno. El único confirmado a ojo es el de la línea 1403. | Color | Líneas | Contraste si el fondo fuera oscuro | |---|---|---:| | `#0000cc` | 1403 | 1,68 : 1 ← **confirmado** | | `#2a2320` | 491, 503, 530, 608, 619 | 1,22 : 1 | | `#8b1a2e` | 490, 507, 528, 620, 622, 1073 | 2,05 : 1 | | `#6f655c` | 492, 623, 1077 | 3,32 : 1 | | `#046bd2` | 1713, 1965, 2142 | 3,63 : 1 | Los otros tres (`#caa9b0`, `#e2cdd2`, `#e89a1a`) pasan de sobra sobre oscuro. Enlaza con el trabajo de accesibilidad de #196 y #205.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rafa/feadulta#219