Cómo funciona la comprobación de contraste en los widgets de reserva
Una guía en lenguaje llano de lo que hace esta comprobación dentro de los widgets de reserva, qué tiene en cuenta y dónde se detiene. No hace falta base técnica.
Qué es y por qué existe
La mayor parte de una página de reserva hotelera se puede comprobar de contraste simplemente mirando la página tal como carga. Los widgets de reserva no — su contenido interesante solo aparece después de interactuar con ellos:
- La lista de Destinos solo aparece al hacer clic en el campo de destino.
- El Calendario solo aparece al hacer clic en la fecha de entrada o de salida.
- El panel de Huéspedes y habitaciones solo aparece al hacer clic en el campo de huéspedes.
Como esos paneles están ocultos hasta que se abren, un escaneo normal de la página nunca los ve, y el texto que contienen (nombres de ciudad, iniciales de los días, números, «Adultos», «+», «−», «Confirmar») nunca se medía. Esta lógica existe para cerrar esa brecha: abre cada widget de reserva como lo haría una persona y entonces mide los colores de lo que hay dentro.
El propósito es simple: asegurar que alguien con baja visión pueda leer realmente el formulario de reserva, no solo el texto promocional que lo rodea.
Cómo se comporta, paso a paso
Para cada widget de reserva que encuentra en la página hace lo siguiente:
- Encuentra el widget. Busca los campos y botones que abren paneles de reserva —destino, fechas, huéspedes, número de habitaciones—, incluidos los campos que solo muestran un número («2») o un rango de fechas («04 jul – 05 jul») en vez de una palabra.
- Despeja el camino. Si un aviso de cookies tapa el formulario, lo cierra primero.
- Abre el panel. Hace clic (o pulsa Enter) en el campo y espera a que el panel termine de aparecer. Esa espera importa: muchos sitios hacen aparecer sus paneles con un fundido, y medir demasiado pronto leería un color a medio transparentar en lugar del real.
- Mide todo el texto legible dentro del panel. Lee cada fragmento de texto, calcula su color y el color que tiene detrás, y los compara.
- Mide también las partes no textuales. Los iconos, flechas, bordes y separadores dentro del panel se miden contra su fondo.
- Repite para hover y para foco de teclado. Pasa el ratón por encima de los botones y enlaces del panel, y por separado mueve el foco del teclado por ellos, y vuelve a medir — pero solo donde el sitio cambia realmente de color en esas situaciones, para no perder tiempo con texto plano que nunca reacciona.
- Agrupa los resultados y reporta. Los elementos que se ven idénticos (mismo color, mismo fondo, mismo tamaño de texto) se agrupan, de modo que obtienes un hallazgo con ejemplos, no cincuenta copias del mismo problema.
Después cierra el panel y pasa al siguiente widget.
Qué tiene en cuenta
El color de delante y el de detrás
- Lee el color del propio texto y después averigua qué hay realmente detrás. Si el texto se apoya sobre algo translúcido, sigue mirando hacia atrás hasta encontrar un color real.
- Si el fondo es un degradado o una imagen (por ejemplo un botón de rojo a rosa, o una fila de destino con una foto detrás), toma una captura de ese punto y muestrea el color realmente pintado en pantalla, en vez de suponer blanco.
- Si hay algo pintado encima o debajo del texto sin ser su contenedor —una barra de resaltado detrás de una fecha seleccionada, una etiqueta flotante sobre un campo—, comprueba qué se pinta de verdad en ese punto, para que la comparación coincida con lo que ve una persona.
Cuán grande y cuán grueso es el texto
- Al texto grande se le permite legalmente un contraste menor, así que el tamaño y la negrita cambian la nota de corte. El texto cuenta como «grande» a partir de unos 24 píxeles, o de unos 19 píxeles si además está en negrita.
Si el elemento es texto o es un control
- Las palabras y los números se juzgan como texto. Los iconos, flechas, bordes y separadores se juzgan como gráficos, que tienen una nota de corte más baja.
Si el elemento está activo y visible
- Lo deshabilitado se omite. Una fecha pasada en gris, un botón «+» agotado, un botón de «Eliminar habitación» que no se puede usar: están atenuados a propósito para decir «no disponible», y las normas de accesibilidad los eximen. Esto se reconoce en varias formas: sitios que los marcan correctamente y sitios que solo lo señalan mediante estilos.
- Las secciones atenuadas a propósito se omiten. Si toda un área se ha atenuado (por ejemplo una fila plegada mostrada al 60 % de intensidad), se trata como una parte inactiva de la interfaz y no como un fallo de contraste.
- Pero el texto que el sitio decidió hacer pálido sí se reporta. Si el texto está estilizado en gris claro sobre blanco por jerarquía visual, eso es un problema real de legibilidad y se reporta.
- El texto invisible se omite. El texto que existe en la página pero no se muestra a quien ve —fuera de pantalla, con tamaño cero, o pensado solo para lectores de pantalla— se ignora, porque reportarlo sería una falsa alarma.
Evitar la repetición
- Los elementos que se ven idénticos se agrupan. Se guardan hasta unos quince ejemplos de cada aspecto idéntico, suficiente para detectar casos en los que dos elementos se ven igual pero están sobre fondos distintos, sin inundar el reporte.
- Si el mismo elemento ya lo reportó otra parte de la ejecución, no se reporta dos veces.
Qué comprueba exactamente
| Qué se mira | La nota de corte | Ejemplo cotidiano |
|---|---|---|
| Texto de tamaño normal | 4,5 a 1 | «Adultos», «Niños», «1 noche elegida» en gris sobre blanco |
| Texto grande o en negrita | 3 a 1 | Un titular pálido como «¿A dónde te gustaría ir?» |
| Texto de marcador de posición en un campo | 4,5 a 1 | Una pista tenue «Ciudad, hotel, zona…» dentro del campo de destino |
| Iconos, flechas, bordes, separadores | 3 a 1 | La flecha de mes siguiente de un calendario, o un botón «−» cuya forma se funde con su fondo |
| Texto al pasar el ratón por encima | Igual que arriba | Una fila de destino que se atenúa al pasar por encima |
| Texto con el foco del teclado | Igual que arriba | Un día de calendario que cambia de color al llegar con Tab |
Cada hallazgo indica de qué widget viene, los dos colores implicados, la relación medida y dónde encontrarlo en la página.
Dónde se detiene: restricciones y limitaciones
Solo mira dentro de los paneles abiertos. Este es el límite más importante. Si se le indica un área concreta de la página, esa área se usa para decidir qué widgets abrir — no es la región que se escanea. El texto que esté dentro de esa área pero fuera de un panel abierto (el botón «Buscar», una caja de código promocional, la cabecera de la página) se deja deliberadamente a la comprobación general de contraste de toda la página, para que los dos tests no se solapen ni dupliquen reportes.
Cosas que no reporta:
- Desplegables dibujados por el sistema operativo. Cuando un sitio usa un desplegable de sistema, Windows, macOS y Android lo pintan cada uno con su propio tema. Los colores escritos en la página los ignora el dispositivo, así que medirlos produciría ficción y quien desarrolla tampoco podría arreglarlo.
- Controles deshabilitados y no disponibles, como se describió arriba: es intencionado, no un olvido.
- Secciones que el sitio ha atenuado deliberadamente por completo. Si deberían reportarse es una decisión abierta, no una carencia técnica.
- Glifos dibujados puramente con reglas de estilo en vez de ser texto real — por ejemplo un «+» generado decorativamente. La marca visible y el elemento subyacente pueden tener colores completamente distintos, así que medirlo reportaría el equivocado.
- Iconos hechos con imágenes. Se miden muestreando la imagen en pantalla, así que el color indicado es una aproximación cercana y no un valor exacto, y «cambia este color» no es una corrección aplicable a una imagen.
Cosas que puede perderse o acertar solo aproximadamente:
- Fondos animados o en movimiento. Si el color detrás del texto cambia constantemente, no hay una única respuesta correcta. La lectura se toma en un instante y es una aproximación.
- Texto semitransparente. Donde el texto es parcialmente translúcido, el color reportado es el resultado mezclado tal como aparece en pantalla, no el valor escrito en la página.
- Todo lo que depende de una elección concreta. El campo de destino se rellena con un único término de búsqueda fijo, así que las sugerencias que solo aparecen para otras búsquedas no se ven. Igualmente, los calendarios se comprueban en el estado en que están: si el color que falla en un sitio solo aparece tras elegir una fecha concreta, puede que ese estado no se alcance.
- Iconos hechos con caracteres. Un botón «+» o «−» construido con los caracteres reales se juzga hoy como texto y no como control, así que se reporta bajo la regla de texto. Es una limitación de clasificación conocida y se revisará cuando se amplíe la comprobación de gráficos.
Situaciones en las que no se ejecuta en absoluto:
- Sitios que bloquean navegadores automatizados. Algunos sitios rechazan el navegador de pruebas a nivel de red y nunca sirven la página real. Nada en la lógica de comprobación puede sortear eso.
- Widgets construidos de forma poco habitual. Unos pocos sitios construyen sus paneles de manera que la herramienta no puede saber con fiabilidad cuándo se han abierto ni dónde está su límite. En esos, el widget se reporta como «no se abrió» y su contenido no se mide.
- Paneles que se desvanecen o cambian de forma a mitad. Algunos sitios cierran su panel en cuanto el foco se mueve, o reconstruyen el formulario entero al tocar un campo. Hay salvaguardas que vuelven a abrir un panel plegado, pero cuando la página se transforma por completo el widget no se puede auditar.
- Páginas muy pesadas. Hay límites de tiempo por elemento y por ejecución para que un panel que no responde no bloquee el test entero. Cuando se alcanza un límite, ese elemento se omite en lugar de medirse.