Técnica CSS WCAG 2.2
C40Crear un indicador del foco de dos colores para garantizar un contraste suficiente con todos los componentes
En resumen
Esta técnica propone dibujar el indicador del foco del teclado con dos bandas de color muy contrastadas entre sí (una clara y otra oscura, con relación de contraste 9:1 o más), de modo que al menos una de ellas tenga siempre contraste 3:1 con cualquier fondo liso. Así se evita definir estilos de foco distintos por sección y beneficia a quienes navegan con teclado o tienen baja visión (criterios 1.4.11 y 2.4.13).
Ejemplo práctico
Sirve para webs con franjas de distintos colores (portadas de ayuntamientos, páginas de producto, landings): un único estilo de foco de dos colores que se ve sobre fondos claros, de color y oscuros sin crear una clase para cada sección.
Así no: Foco de un solo color que desaparece en algunas franjas
Se usa un contorno de 3 px en lila #744E9A para todos los enlaces. Sobre la franja blanca se ve (6,4:1), pero sobre la franja lila tiene un contraste de 1:1 y sobre la oscura #0B2239 de 2,5:1, por lo que el foco no se distingue en dos de las tres secciones.
<style>
.franja { padding: 16px; }
.clara { background: #FFFFFF; color: #412c56; }
.lila { background: #744E9A; color: #FFFFFF; }
.oscura { background: #0B2239; color: #FFFFFF; }
.franja a { color: inherit; font-weight: bold; }
a:focus-visible { outline: 3px solid #744E9A; outline-offset: 3px; }
</style>
<div class="franja clara"><a href="#">Ver trámites en línea</a></div>
<div class="franja lila"><a href="#">Pedir cita previa</a></div>
<div class="franja oscura"><a href="#">Contactar con el ayuntamiento</a></div>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Foco de dos colores con outline y box-shadow
El indicador combina una banda interior blanca de 2 px (outline) y una exterior #0B2239 de 2 px (box-shadow). Entre sí tienen un contraste de 16,1:1, mayor que 9:1, así que una de las dos bandas alcanza siempre 3:1 con cualquier fondo liso. Al mantener el outline, el foco sigue viéndose en el modo de colores forzados, que elimina las sombras.
<style>
.franja { padding: 16px; }
.clara { background: #FFFFFF; color: #412c56; }
.lila { background: #744E9A; color: #FFFFFF; }
.oscura { background: #0B2239; color: #FFFFFF; }
.franja a { color: inherit; font-weight: bold; }
a:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 0; box-shadow: 0 0 0 4px #0B2239; }
</style>
<div class="franja clara"><a href="#">Ver trámites en línea</a></div>
<div class="franja lila"><a href="#">Pedir cita previa</a></div>
<div class="franja oscura"><a href="#">Contactar con el ayuntamiento</a></div>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Usar solo
box-shadowconoutline: none: en el modo de colores forzados de Windows la sombra desaparece y no queda indicador. - Elegir dos colores con poco contraste entre sí (por ejemplo, lila y azul corporativos), lo que no garantiza el 3:1 sobre cualquier fondo.
- Bandas de 1 px que no alcanzan el grosor mínimo, o un
outline-offsetnegativo que dibuja el indicador dentro del componente, sobre una imagen o un degradado. - Indicadores recortados por
overflow: hiddenen carruseles y tarjetas, donde solo queda visible una de las bandas en parte del perímetro.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
CSS.
Descripción
El objetivo de esta técnica es crear un indicador del foco de dos colores que tenga un contraste suficiente con cualquier color de fondo liso. Esta técnica puede evitar la necesidad de usar varias clases para garantizar un contraste suficiente del indicador del foco cuando se muestra sobre fondos distintos.
Los autores pueden aplicar esta técnica en sitios que usan diversos colores de fondo. Aunque es posible crear indicadores del foco de distintos colores para distintas partes de una página, esto puede llevar mucho tiempo y es fácil pasar por alto algunos componentes. Sin embargo, si el indicador del foco utiliza dos colores muy contrastados entre sí (un color claro y un color oscuro), puede reutilizarse el mismo indicador, ya que al menos uno de los dos colores tendrá siempre contraste suficiente con cualquier color de fondo.
Siempre que los dos colores del indicador tengan entre sí una relación de contraste de al menos 9:1, se garantiza que al menos uno de los dos colores alcanzará un contraste de 3:1 con cualquier color de fondo liso.
Esta técnica solo garantiza que el indicador superará la comprobación si todo el indicador se dibuja sobre el fondo, no dentro del contorno del componente enfocado, y si todo el fondo situado detrás del indicador es un único color liso. Por ejemplo, si el fondo es una imagen o un degradado, o si el indicador se superpone parcialmente a otro componente de la interfaz de usuario, puede que siga siendo necesario comparar el indicador píxel a píxel con el fondo.
En CSS, los indicadores de dos colores pueden implementarse combinando las propiedades outline y box-shadow con las pseudoclases :focus o :focus-visible.
Evite establecer outline: none para usar box-shadow por sí solo. Los agentes de usuario suelen suprimir la propiedad box-shadow en los modos de colores forzados, por lo que los autores deberían evitar depender únicamente de box-shadow para implementar los indicadores del foco. Si se necesita un estilo basado solo en box-shadow, considere combinarlo con una propiedad outline: 2px transparent solid para garantizar la compatibilidad con los modos de colores forzados.
Ejemplos
Este ejemplo muestra una implementación sencilla en la que los estilos de foco se aplican a todos los componentes enfocables. Al usarlo en un sitio web más complejo, habría que asegurarse de que estos estilos no quedan anulados por otros estilos más específicos.
Un indicador grueso de dos colores
En este ejemplo, el indicador consta de dos bandas de color liso. Como cada banda de color tiene 2 píxeles CSS de grosor, cualquiera de las dos bandas es lo bastante grande para cumplir por sí sola el requisito de tamaño mínimo del indicador. Siempre que uno de los dos colores tenga un contraste de cambio de 3:1 con los píxeles situados detrás y alrededor del indicador del foco, el indicador cumplirá tanto el criterio de conformidad Aspecto del Enfoque como el de Contraste no textual.
*:focus {
/* inner indicator */
outline: 2px #F9F9F9 solid;
outline-offset: 0;
/* outer indicator */
box-shadow: 0 0 0 4px #193146;
}Pruebas
Procedimiento
Para cada componente de la interfaz de usuario enfocable:
- Comprobar que los dos colores del indicador del foco tienen entre sí una relación de contraste de 9:1 o mayor.
- Comprobar que cada banda de color tiene al menos 2 píxeles CSS de grosor.
- Comprobar que el indicador solo aparece sobre un único color de fondo liso a la vez.
Resultados esperados
- Las comprobaciones n.º 1, n.º 2 y n.º 3 son verdaderas.
Recursos
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica C40 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
