Contraste de elementos activos
Esta revisión recorre la página buscando controles de formulario interactivos —radio buttons, checkboxes, campos de texto, desplegables, sliders, barras de progreso— y verifica que cada uno se distinga visualmente de su fondo. Todo lo que mida por debajo de 3:1 se reporta.
Para el detalle de cómo se calcula el contraste de estos controles y dónde ese cálculo es frágil, ver Cálculo de contraste en radio buttons y checkboxes.
Por qué importa
Las personas con baja visión, con deficiencias en la percepción del color, o cualquiera que trabaje con mucha luz ambiental dependen del contraste para localizar y operar los controles de formulario. Un checkbox que se funde con un fondo blanco es, en la práctica, invisible para ellas: no pueden saber si el campo existe, y mucho menos si está marcado.
Qué comprueba la herramienta
Controles nativos
| Control | Cuándo se incluye |
|---|---|
input[type="radio"] | Siempre; en estado marcado y sin marcar |
input[type="checkbox"] | Siempre; en estado marcado y sin marcar |
input[type="range"] | Siempre — la barra y el control deslizante |
input[type="text"] | Solo cuando el campo no tiene placeholder ni valor previo |
input[type="email"] | Solo cuando está vacío |
input[type="password"] | Solo cuando está vacío |
textarea | Solo cuando está vacío |
select | Solo cuando no se ve el texto de la opción seleccionada |
Controles personalizados
Los componentes construidos con otros elementos se incluyen cuando llevan el rol correspondiente: un radio personalizado, un checkbox personalizado, un indicador de progreso, un slider, o cualquier elemento que exponga un estado de marcado.
Qué no cubre
| Excluido | Motivo |
|---|---|
| Controles con estilos solo del navegador | La responsabilidad del contraste de un control nativo sin estilizar es del navegador, no del sitio |
| Controles ocultos o fuera de pantalla | Todo lo que esté dentro de un acordeón cerrado, una pestaña oculta o un modal sin abrir |
| Controles deshabilitados o inactivos | WCAG los exime explícitamente |
| El texto dentro de los controles | El placeholder y las etiquetas pertenecen a la revisión de contraste de texto |
| Indicadores de foco | Los cubre la revisión de Foco visible |
| Íconos y gráficos dentro de los controles | Los cubre la revisión de Contraste no textual |
| Controles detrás de un login | Hay que apuntar la herramienta al estado ya autenticado |
| Controles que solo aparecen tras una interacción | La herramienta mide la página tal como carga |
Qué dice el reporte
Cada control que falla es una entrada aparte, con el elemento al que se refiere, los dos colores, el ratio medido y una corrección sugerida.
Título: The border of the
<input type="radio">control fails to achieve sufficient contrast with the backgroundResultado actual: The light gray (#d1d5db) of the "radio" control border fails color contrast against the white (#ffffff) background with a ratio of 1.61:1.
Cómo corregirlo: Change the border color from #d1d5db to at least #767676 to achieve a 3:1 contrast ratio against #ffffff.
Los tres patrones de fallo
Falla el borde — el contorno del control no se despega de la página. Es con diferencia el más común; típicamente un borde gris claro sobre fondo blanco.
Falla el fondo — el relleno del control no se despega del área que lo rodea.
Falla el estado marcado — la marca, el punto o el relleno que indica que el control está seleccionado no se despega del interior del control.
Resultados globales
| Resultado | Qué significa |
|---|---|
| Pasa | Todos los controles encontrados alcanzaron el mínimo de 3:1 |
| Falla | Al menos un control quedó por debajo |
| Indeterminado | No se encontró ningún control, así que la revisión no pudo ejecutarse |
Cómo leer "approx." en un reporte
Cuando el reporte dice the white (approx.) (#ffffff) background, el color de fondo se estimó a partir del elemento contenedor más cercano que tiene un fondo sólido. Es fiable en la mayoría de los casos, pero puede desviarse en páginas con capas complejas o fondos desenfocados.
Ejemplo: del reporte a la corrección
Un formulario de registro reporta seis fallos, todos con la misma causa:
/* Antes — falla con 1.61:1 contra #ffffff */
.form-radio {
border: 2px solid #d1d5db;
}
/* Después — pasa con 4.62:1 contra #ffffff */
.form-radio {
border: 2px solid #6b7280;
}Volver a ejecutar la revisión confirma la corrección.
Falsos positivos y falsos negativos habituales
Se reporta un control nativo estilizado a medias. El sitio sobrescribe parte de la apariencia del control pero deja el borde intacto, así que la herramienta lo trata como estilizado por el autor y mide un contraste que falla. O se define un color de borde explícito que pase 3:1, o se quita la sobrescritura parcial para que el navegador se haga cargo de toda la apariencia.
Un control sobre un gradiente se reporta de forma inconsistente. La herramienta muestrea un punto del gradiente. Un control puede pasar sobre una parte y fallar sobre otra; en el reporte solo aparece el punto muestreado. Conviene revisar el control a lo largo de todo el gradiente y elegir un color de borde que pase en cualquier posición.
Se pierden los controles en estados ocultos. Los acordeones cerrados, las pestañas ocultas y los modales sin abrir no se recorren. Hay que navegar hasta el estado correspondiente antes de ejecutar la revisión.
La página entera vuelve como Indeterminado. Todos los controles usan únicamente los estilos por defecto del navegador, así que se omitieron todos. Es el comportamiento correcto, aunque resulte inesperado. Añadir colores explícitos de borde o fondo los mete dentro de la revisión — y bajo el control del propio sitio.
Se pierden los controles añadidos dinámicamente. Los controles que aparecen tras pulsar un botón o un "Cargar más" no se descubren. No hay soporte incorporado para esto; hay que navegar hasta ese estado manualmente.
Nota sobre la cobertura
Una versión anterior de esta revisión cubría menos tipos de control. Las barras de progreso, los sliders personalizados, los elementos con estado de marcado y los desplegables vacíos se añadieron después. Si ves más issues que antes en la misma página, eso es más cobertura, no una regresión.
Referencia WCAG
Criterio de conformidad 1.4.11 Contraste no textual (Nivel AA)
"La presentación visual de lo siguiente tiene un ratio de contraste de al menos 3:1 contra los colores adyacentes: componentes de interfaz de usuario — la información visual necesaria para identificar los componentes de interfaz y sus estados, excepto en componentes inactivos o cuando la apariencia del componente la determina el agente de usuario y no la modifica el autor."