Cómo se evalúa el contraste del indicador de foco
Cuando recorres una página con el teclado, cada elemento interactivo debería mostrar un indicador de foco visible que se despegue con claridad de lo que lo rodea. La herramienta comprueba ese indicador contra el mínimo de 3:1 de WCAG — y, algo importante, lo mide contra el fondo correcto según dónde esté dibujado el indicador.
Indicadores internos y externos
La herramienta mira primero cómo se pinta el indicador de foco respecto al control.
Los indicadores internos se sitúan encima del control, o dentro de él:
- un borde que aparece o cambia de color al recibir foco
- un anillo interior pegado al borde interno
- un subrayado que aparece al recibir foco
- un cambio de color de fondo del control
- un cambio de color del texto de la etiqueta del control
Los indicadores externos se dibujan alrededor del control, en el espacio contiguo:
- un contorno — el clásico anillo de foco por fuera del elemento
- un anillo exterior que rodea el borde externo
Esta clasificación decide contra qué se compara el indicador.
Qué estilos visuales se evalúan
La herramienta inspecciona el elemento antes y después de recibir el foco y busca un cambio en alguno de estos:
| Estilo | Se trata como |
|---|---|
| Contorno | Externo |
| Contorno dibujado por dentro del elemento | Interno |
| Borde | Interno |
| Anillo de sombra interior | Interno |
| Anillo de sombra exterior | Externo |
| Decoración de texto (subrayado / suprarrayado) | Interno |
| Cambio de color de fondo | Se compara con el fondo circundante |
| Cambio de color del texto de la etiqueta | Interno |
Solo se consideran indicador de foco los estilos que aparecen o cambian al recibir foco. Un estilo que ya está presente cuando el elemento no tiene foco —un borde permanente, por ejemplo— no se trata como el indicador. Hay una excepción: algunos componentes muestran un anillo permanente sobre un elemento envolvente como señal de foco, y ese anillo también se evalúa.
Las sombras cosméticas —las que tienen desplazamiento o desenfoque visible y se usan para dar profundidad— se ignoran. Son decorativas, no anillos de foco.
Contra qué se compara el indicador
Este es el núcleo de la lógica de interno frente a externo.
Indicador interno → se compara con el fondo propio del control. Un anillo interior o un borde se miden contra el color de relleno del propio botón. Si el fondo del botón cambia al recibir foco, se usa el fondo con foco, porque es lo que el usuario ve realmente detrás del indicador.
Indicador externo → se compara con el fondo circundante. Un contorno o un anillo exterior se miden contra el fondo que tienen justo detrás — el contenedor más cercano con un fondo sólido y no transparente.
Cambio de color de fondo → se compara con el fondo circundante. Cuando el control entero cambia de color al recibir foco, el color nuevo rellena el control, así que se compara con el fondo de la página o de la sección que lo rodea.
La herramienta prefiere los valores de color exactos de la hoja de estilos cuando puede leerlos, y recurre a muestrear los píxeles dibujados de los estados con y sin foco cuando no puede.
Cómo se decide si pasa o falla
- El elemento debe tener, para empezar, algún indicador de foco visible. Si al enfocarlo no se produce ningún cambio visual perceptible —y no aparece un cursor de texto en un campo— se reporta como foco no visible.
- Si hay un indicador, su color se compara con el fondo que corresponde y se calcula el ratio de contraste.
- 3:1 o más pasa. Por debajo de 3:1 se reporta como fallo de contraste, con los dos colores y el ratio medido.
Si un control tiene más de un indicador —un borde y un anillo, por ejemplo— el elemento pasa en cuanto alguno de ellos llega a 3:1. Al usuario le basta con una señal suficientemente visible. Ver Indicadores de foco con múltiples estilos.
Ejemplos
Pasan
- Un botón sobre una página oscura que gana un contorno claro al recibir foco — anillo claro contra página oscura, ≥ 3:1.
- Un control con interior claro que muestra un anillo interior oscuro al recibir foco — anillo oscuro contra control claro, ≥ 3:1.
- Un enlace que gana un subrayado que contrasta con fuerza contra el fondo de la página.
- Un elemento que usa el anillo de foco nativo del navegador (ver más abajo).
Fallan
- Un anillo exterior gris claro alrededor de un control sobre una página blanca — anillo y página son casi iguales, por debajo de 3:1.
- Un anillo interior apenas más oscuro que el propio relleno del control.
- Un color de foco que solo contrasta contra el fondo equivocado — un anillo exterior que pasaría contra el control pero falla contra la página que tiene realmente detrás.
Limitaciones y exclusiones intencionadas
- El anillo de foco nativo del navegador. Cuando un elemento se apoya en el anillo por defecto del propio navegador, la revisión de contraste se omite. El navegador adapta ese anillo en el momento de pintar y está exento de los requisitos de contraste definidos por el autor, así que se da por visible y no se falla.
- Campos de texto que muestran cursor. Si al enfocar un campo aparece un cursor de texto parpadeante, eso cuenta como señal de foco visible y el elemento no se marca por falta de visibilidad. Si hay un anillo en un elemento envolvente, su contraste sí se sigue revisando.
- Fondos con gradiente o imagen. Cuando el fondo relevante es un gradiente o una imagen en vez de un color sólido, no se puede calcular un ratio exacto con fiabilidad. La herramienta omite esos fondos y busca hacia arriba el sólido más cercano; si no hay ninguno, el resultado puede ser aproximado.
- Formatos de color no soportados. Las notaciones de color modernas que la herramienta no puede interpretar se omiten en lugar de adivinarse.
- Controles duplicados. Los controles repetidos que comparten etiqueta y estilos —varios botones "Ver" idénticos, por ejemplo— pueden agruparse, de modo que el issue se reporta una vez y no por cada aparición.
- Elementos con solo los estilos por defecto del navegador. Los controles que no reciben ningún estilo de foco del sitio los maneja la lógica de visibilidad y pueden no entrar siquiera en la comparación de contraste.
- Colores aproximados. En algunos casos el color del indicador o del fondo se muestrea de la página dibujada en lugar de leerse exacto de la hoja de estilos. Esos valores pueden diferir ligeramente del color escrito y en el reporte se señalan como aproximados.
En resumen
La herramienta decide si un indicador de foco es interno o externo, mide su color contra el fondo propio del control (interno) o contra el fondo circundante (externo), y da por bueno el resultado cuando el contraste es de 3:1 o más — con el anillo de foco nativo del navegador y los fondos no sólidos tratados como las excepciones documentadas.
Referencia WCAG
Criterio de conformidad 1.4.11 Contraste no textual (Nivel AA)