Solo color en el estado de foco — Limitaciones conocidas
Cuando un control indica que tiene el foco del teclado cambiando de color y nada más, quien no distinga ese cambio de color no tiene forma de saber en qué punto de la página está. Esta revisión busca esa situación.
Esta página es la lista honesta de lo que la revisión no detecta hoy. Si estás revisando resultados y un caso cae en alguna de estas categorías, la herramienta nunca lo iba a reportar: es una limitación conocida, no un issue perdido.
Cómo se comporta la revisión
La revisión mira cada control que ya pasa 2.4.7 Foco visible — es decir, controles que reaccionan visiblemente al foco de alguna manera. Compara cómo se ve el control sin foco contra cómo se ve con foco.
Si la única diferencia perceptible es un cambio de color —fondo, borde, outline, color de texto o de ícono— y los dos colores están a menos de 3:1 de distancia, el control se reporta. Si el estado de foco además trae una señal que no es de color (aparece un anillo, se engrosa un borde, surge un subrayado), el control pasa.
Dos supuestos sostienen ese enfoque, y casi todas las limitaciones de abajo se derivan de alguno de ellos:
- El indicador de foco se dibuja sobre el control mismo, no sobre algo que está dentro.
- El color se puede leer como un color sólido en una sola imagen fija de la página.
Qué sí reporta la herramienta
Un cambio de color sólido en el propio control —fondo, borde, outline, color de texto, relleno o trazo del ícono— que mida menos de 3:1 contra el estado sin foco y que no venga con ninguna otra señal visual. Los colores semitransparentes se incluyen: la herramienta los compone sobre lo que tienen detrás antes de medir.
Si un caso se ve así y no sale en el reporte, es un issue perdido de verdad.
Qué no reporta la herramienta hoy
1. El indicador se dibuja sobre algo que está dentro del control
El efecto de foco se pinta sobre un elemento hijo en lugar de sobre el botón o el enlace. Este es el patrón estándar en Material Design, donde una capa de estado translúcida vive dentro del control.
La revisión solo mira el control que recibe el foco, así que un cambio que vive un nivel más abajo le resulta invisible.
Visto en: marinasmarlin.com/home/experiences (controles de Misión/Visión, login del header, ícono de búsqueda), tiendascaracol.com (ícono del carrito).
2. El indicador es una animación o un ripple
La señal de foco es un efecto en movimiento —un ripple que se expande desde el control— y normalmente además vive en un elemento hijo. La página se congela antes de medir para que las animaciones no distorsionen la comparación, lo que significa que el ripple no está ahí para ser visto.
Tomar "hay una animación" como motivo para saltarse el control no es una opción: casi todo componente moderno tiene transiciones decorativas, y esa regla apagaría la mayor parte de la revisión.
Visto en: avantstay.com (tarjetas del carrusel de colecciones), donde la herramienta hoy reporta un falso positivo de 1.22:1 sobre el slide activo.
3. El anillo de foco lo pone en parte el navegador y en parte el sitio
El outline toma el grosor del valor por defecto del navegador y solo el color de la hoja de estilos del sitio. Como aparece un anillo dibujado por el navegador, la herramienta considera que el control tiene una señal válida que no es de color y sigue adelante.
Los colores escritos con las notaciones nuevas de mezcla de color de CSS tampoco se resuelven.
Visto en: sercotelhoteles.com/es (controles del buscador de reservas — fechas, selector de huéspedes y habitaciones).
4. La opacidad, en casi todas sus formas
La opacidad se comporta de forma despareja aquí, y eso explica por qué el mismo tipo de caso a veces se detecta y a veces no:
| Cómo se aplica la opacidad | Resultado |
|---|---|
| Un color de fondo translúcido sobre el propio control que se intensifica un poco al recibir foco | Se reporta. Es un cambio genuino de color de fondo y se mide contra lo que tiene detrás |
| Un fondo que pasa de totalmente transparente a un relleno visible | No se reporta como 1.4.1 — está apareciendo un elemento nuevo en vez de cambiar el color de uno existente, así que se clasifica bajo 1.4.11 |
| La opacidad del propio control pasando de atenuado a sólido | No se reporta. Atenuar un botón también atenúa su texto y su ícono, así que cambia más de una cosa a la vez y el caso queda fuera de lo que evalúa la revisión |
| Opacidad en un contenedor padre, que afecta al control a través de él | No se reporta — la revisión mira el control, no sus ancestros |
| Opacidad dentro de un pseudo-elemento decorativo | No se reporta (ver §6) |
5. Colores translúcidos sobre un fondo desconocido — resuelto en parte
Los indicadores translúcidos antes producían un resultado sin sentido. Ahora la herramienta mezcla el color translúcido con lo que tenga detrás antes de medir, y el reporte muestra tanto el valor real como la aproximación compuesta.
Lo que queda: cuando cambia solo un borde o un outline, la herramienta no siempre puede determinar qué hay detrás y asume blanco. Eso es correcto cuando el control está sobre un fondo claro y equivocado cuando está sobre uno oscuro. Cuando el fondo es una imagen, el caso se omite en lugar de adivinarlo.
Visto en: acubaenvioscargo, que ahora mide 1.13:1 en lugar de un falso 1.00:1.
6. Gradientes y pseudo-elementos decorativos
Si el estilo de foco es un gradiente, no hay un color único que medir — muestrearlo da valores aproximados que pueden caer a un lado u otro del umbral de una ejecución a otra.
Si el estilo de foco se dibuja en un pseudo-elemento decorativo (::before / ::after), la comparación no llega hasta él.
Visto en: havanaship.net, que usa ambas cosas a la vez.
7. El fondo cambia al hacer scroll
Algunos controles están sobre un fondo que cambia según la posición del scroll — una imagen de portada arriba de la página que se vuelve blanca más abajo, o una barra fija que cambia de color.
Esto solo es una limitación cuando el veredicto depende de ese fondo. Los cambios de foco que afectan al color del texto o a un borde se miden color contra color y no dependen de lo que haya detrás; esos se reportan correctamente sin importar dónde esté el scroll. Son los colores translúcidos y los cambios de color de fondo los que se componen sobre el fondo, y ahí la herramienta captura un solo momento — y omite el caso por completo cuando el fondo es una imagen.
Visto en: havanaship.net — el enlace "Inicio" cambia el color del texto (1.29:1) y sí se reporta correctamente, mientras que el botón de la portada sobre imagen de fondo se omite.
8. Foco que solo aparece al pulsar Tab de verdad
Algunos controles revelan su estilo de foco únicamente cuando una persona pulsa Tab realmente, y no muestran nada cuando el foco se aplica de cualquier otra forma. Son difíciles de reproducir e inspeccionar a mano, y la herramienta tampoco los ve.
Visto en: transtur.net (control de flecha de Preguntas Frecuentes), tiendascaracol.com (ícono del carrito).
9. Páginas a las que la herramienta no llega bien
- Sitios que bloquean visitantes automatizados. Tab no mueve el foco, no se recoge ningún control y no hay nada que analizar. Ejemplo: grainger.com.
- Una capa fija tapando el control. Cuando un panel flotante se monta sobre el control durante el scroll, la captura recoge la capa en vez del control. Ejemplo: theknowledgeacademy.com ("Send enquiry") — el estilo de foco del control sí cambia; se confirmó a mano cerrando la capa.
10. Dos colores cambiando a la vez
Si el foco cambia dos propiedades de color en el mismo control —por ejemplo el borde y el texto, o el borde y un ícono— el caso queda fuera de lo que evalúa la revisión y no se reporta nada.
Esto aplica cuando ambos cambios forman parte del control y tienen significado. Un control cuyo único segundo cambio es una flecha decorativa de desplegable sí se analiza.
Casos que la herramienta reporta de más
Dos patrones producen falsos positivos hoy, y se están tratando por separado:
- Un solo cambio de color más una animación o ripple — el ripple es el indicador real, pero la herramienta no lo ve y reporta el color.
- Un solo cambio de color más contenido adicional que aparece (un desplegable, tooltip o popover) — el contenido nuevo es la señal real.
Referencia rápida para quien revisa
No reportes un issue perdido cuando el control cae en alguno de estos casos:
- El cambio de color vive en un elemento hijo (capa de estado de Material, span interno)
- El outline combina el grosor del navegador con un color del sitio, o usa mezcla de colores
- Opacidad en un ancestro o dentro de un pseudo-elemento
- Se usa un gradiente como estilo de foco
- El estilo de foco se dibuja en un pseudo-elemento
- El fondo detrás del control cambia con el scroll
- El sitio bloquea la automatización, o una capa tapó el control
- El indicador es una animación o ripple
- Cambian dos propiedades de color a la vez
Sí reporta un issue perdido cuando: cambia un color sólido en el propio control —fondo, borde, outline, texto, relleno o trazo del ícono—, incluidos los colores translúcidos, el contraste está por debajo de 3:1 y no hay ninguna señal que no sea de color.
Referencia WCAG
Criterio de conformidad 1.4.1 Uso del color (Nivel A)