Indicadores de foco con múltiples estilos
Algunos controles aplican más de un estilo de foco a la vez — un doble contorno, o un contorno combinado con un anillo de sombra. Esta página explica cómo trata la herramienta ese caso: qué estilos reconoce, contra qué compara cada uno y cuándo decide reportar.
Qué estilos de foco se reconocen
Cuando un elemento recibe el foco, la herramienta compara los estados con foco y sin foco y busca cualquier cambio visual que pueda funcionar como indicador de foco. Reconoce:
- Outline — incluidos los contornos dibujados por dentro del elemento
- Borde — cuando aparece un borde o cambia de color al recibir foco
- Anillos de sombra — incluidas varias capas con colores distintos, como un anillo de color más un anillo blanco desplazado
- Cambio de color de fondo del propio control
- Cambio de color del texto
- Decoración de texto — un subrayado o suprarrayado que aparece al recibir foco
Las sombras puramente decorativas —las que se usan para dar profundidad, con desplazamiento o desenfoque visible— no se tratan como indicadores de foco, así que nunca provocan por sí solas que un control pase o falle.
El anillo de foco nativo del navegador se detecta y la revisión se omite por completo para ese elemento. Su color de dibujo lo elige el navegador en el momento de pintar y está exento de los requisitos de contraste del autor del sitio.
¿Se evalúan todos los estilos, o gana uno?
Cada estilo de foco presente se evalúa de forma independiente. No se da por sentado de antemano que uno de ellos sea "el" indicador. Cada candidato —el contorno, el borde, cada capa de sombra, el cambio de fondo, el color del texto, la decoración de texto— se mide por su cuenta contra el fondo que le corresponde.
No hay un ganador fijo. Los estilos se evalúan en la práctica como un conjunto, y el resultado del elemento lo decide si alguno de ellos aporta contraste suficiente.
Cómo se decide si pasa o falla
El umbral es 3:1.
- Si al menos un estilo de foco alcanza 3:1 o más, el elemento pasa y no se reporta nada — aunque los demás estilos de foco de ese mismo elemento fallarían. Con un estilo suficiente basta para dar el control por bueno.
- Solo se reporta un issue cuando todos los estilos de foco candidatos quedan por debajo de 3:1.
Este es el comportamiento central que hay que entender: un control con dos o más estilos de foco no se marca mientras uno de ellos contraste adecuadamente con su entorno.
Cuando sí se reporta un fallo, los colores que se muestran corresponden al último par de indicador y fondo evaluado, así que el reporte siempre refleja una combinación genuinamente insuficiente.
Contra qué se compara cada estilo
Depende de dónde se dibuja el indicador:
| Estilo de foco | Se compara contra |
|---|---|
| Contorno dibujado por fuera del control | El fondo circundante — el contenedor más cercano con fondo sólido |
| Anillo de sombra dibujado por fuera | El fondo circundante |
| Cambio de color de fondo | El fondo circundante — el color nuevo rellena el control, así que debe contrastar con el área que lo rodea |
| Borde | El fondo propio del control |
| Anillo de sombra dibujado por dentro | El fondo propio del control |
| Contorno dibujado por dentro del control | El fondo propio del control |
| Cambio de color del texto | El fondo propio del control |
| Decoración de texto | El fondo propio del control |
Cuando el fondo propio del control cambia al recibir foco, la herramienta usa el fondo con foco para los indicadores dibujados por dentro, porque esos indicadores solo son visibles mientras hay foco y deben contrastar con lo que realmente tienen detrás en ese momento.
Escenarios habituales y resultado esperado
| Escenario | Resultado |
|---|---|
| Doble contorno; un anillo contrasta con el entorno y el otro no | Pasa — con un anillo suficiente basta |
| Contorno más anillo de sombra, al menos uno pasa | Pasa |
| Sombra de varias capas (anillo de color más anillo blanco desplazado); alguna capa pasa | Pasa |
| El foco cambia a la vez el color del texto y el del fondo, y el resultado se mide contra el área circundante | Pasa si es ≥ 3:1, si no falla |
| El anillo de foco nativo del navegador | Se omite — nunca se reporta |
| Un anillo de foco de color más una sombra puramente decorativa | Solo se evalúa el anillo; la sombra se ignora |
| Todos los estilos de foco quedan por debajo de 3:1 contra su fondo respectivo | Falla — se reporta |
Limitaciones y casos límite conocidos
- Separaciones muy pequeñas entre el indicador y un segundo fondo. Cuando el espacio entre el control y un bloque de color vecino es muy pequeño, el indicador acaba prácticamente pegado a ese segundo color. La herramienta puede entonces comparar contra el color más cercano disponible en lugar del previsto, lo que puede producir un fondo incorrecto en el reporte. Se sigue por separado.
- Formatos de color no soportados. Los fondos escritos con notaciones de color que la herramienta no puede interpretar se tratan como desconocidos, y recurre a un fondo circundante o a un valor neutro por defecto.
- Fondos con gradiente o imagen. Cuando un fondo es un gradiente o una imagen no hay un color exacto único, así que la herramienta busca hacia arriba el color de fondo sólido más cercano.
- Anillos de sombra translúcidos. Los anillos semitransparentes los suaviza el navegador al dibujarlos, así que el color resultante puede diferir ligeramente del que declara la hoja de estilos. La herramienta lo tiene en cuenta mezclando el color declarado con el fondo, o muestreando el anillo dibujado, para obtener un resultado estable.
En resumen
La herramienta trata cada estilo de foco de un control como un candidato independiente, mide cada uno contra el fondo que corresponde según dónde esté dibujado, y reporta un problema de contraste solo cuando ninguno llega a 3:1. Si un solo estilo de foco contrasta lo suficiente, el control no se reporta.
Relacionado
- Cómo se evalúa el contraste del indicador de foco — la distinción entre interno y externo con más detalle
Referencia WCAG
Criterio de conformidad 1.4.11 Contraste no textual (Nivel AA)