Medir con rigor: contraste, píxeles CSS, zoom, espaciado y tamaño del objetivo

Varios criterios de Perceptible y Operable tienen umbrales numéricos: 4,5:1 y 3:1 de contraste, 200 % de ampliación, 320 píxeles CSS de ancho, 0,12 em de espaciado entre letras, 24 píxeles CSS de objetivo, 20 segundos de aviso, tres destellos por segundo. Un hallazgo con un número solo vale si otra persona puede repetir la medición y obtener el mismo resultado. En las lecciones 4, 5 y 6 viste qué exige cada criterio; aquí verás cómo medir cada umbral sin errores y cómo dejarlo documentado.

Contraste: qué se calcula y qué se mide

La ratio de contraste se calcula a partir de la luminancia relativa de los dos colores: cada canal sRGB se linealiza (se deshace la corrección gamma) y se combinan con los pesos 0,2126 (rojo), 0,7152 (verde) y 0,0722 (azul). La ratio es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro. Va de 1:1 (mismo color) a 21:1 (negro sobre blanco). Basta con entender tres consecuencias:

• No se redondea. La documentación del W3C lo deja claro: el umbral es un mínimo y un valor de 4,49:1 no alcanza 4,5:1. El gris #767676 sobre blanco da 4,54:1 y cumple; #777777, prácticamente igual a la vista, da 4,48:1 y no cumple.
• El verde pesa mucho más que el azul. Dos colores de aspecto parecido pueden tener contrastes muy distintos; no estimes a ojo.
• La transparencia cambia el color. Un texto #333333 con opacity: 0.6 sobre blanco se pinta como un gris próximo a #858585, que da unos 3,7:1. Mide el color resultante, no el declarado.

Dónde poner el cuentagotas

El suavizado de bordes (antialiasing) mezcla los píxeles del contorno de cada letra con el fondo; si pones el cuentagotas en un borde, obtendrás un color intermedio y un contraste peor que el real. El criterio se evalúa con el color del texto, no con esos píxeles de transición. Hay dos formas fiables de obtenerlo:

1. Leer el color calculado en las herramientas de desarrollo (pestaña de estilos calculados) y componer a mano la opacidad o los fondos semitransparentes si los hay.
2. Ampliar la captura y tomar el color en el centro de un trazo grueso de la letra.

Para el fondo, mide el color justo detrás del texto. Si el fondo es un degradado o una fotografía, el valor que cuenta es el del punto más desfavorable que queda detrás de las letras. Repite la medición en cada estado relevante: hover, foco, visitado, error, placeholder y modo oscuro si el sitio lo ofrece.

Tamaño del texto: puntos y píxeles

El umbral de texto grande se define en puntos: 18 pt equivalen a 24 px CSS y 14 pt a unos 18,66 px CSS (1 pt = 1,333 px). Comprueba el tamaño calculado, también en la vista móvil: un titular de 24 px en escritorio puede quedarse en 20 px en móvil y pasar a necesitar 4,5:1. Para la negrita, la referencia habitual son pesos de 700 o más.

Píxeles CSS, zoom y ventanas de prueba

Los 320 px de 1.4.10 y los 24 px de 2.5.8 son píxeles CSS. En un portátil con pantalla de alta densidad, un píxel CSS puede ocupar dos o tres píxeles físicos; por eso medir con una regla sobre la pantalla no sirve. Comprueba siempre la anchura real de la ventana en píxeles CSS desde la consola del navegador:

// En la consola de las herramientas de desarrollo
window.innerWidth        // anchura del viewport en píxeles CSS
window.devicePixelRatio  // píxeles físicos por píxel CSS (incluye el zoom)

Con el zoom del navegador al 400 % en una ventana de 1280 px de ancho, window.innerWidth debe devolver 320. Si devuelve otra cifra (porque la ventana mide 1366 px o la barra lateral ocupa espacio), ajusta la ventana o usa la emulación de dispositivo a 320 px. Para el contenido de desplazamiento horizontal, la referencia es una altura de 256 px CSS.

Para 1.4.4 usa el zoom del navegador al 200 %: es una técnica suficiente reconocida y es lo que hace la mayoría de las personas. Anota navegador, versión, anchura de la ventana y zoom: un menú que se monta al 200 % en 1280 px puede verse bien en 1920 px.

Espaciado del texto: qué cuenta como pérdida

La prueba de 1.4.12 consiste en aplicar los cuatro valores a la vez (interlineado 1,5, párrafos 2 em, letras 0,12 em, palabras 0,16 em) con una hoja de usuario o un bookmarklet (un marcador que ejecuta un pequeño script sobre la página) que los fuerce con !important en todos los elementos. Después recorre la página buscando cuatro síntomas: texto cortado por un contenedor de altura fija, texto que se solapa con otro y deja de leerse, controles cuyo rótulo desaparece y contenido que queda tapado. Que la página quede menos bonita o que un párrafo ocupe más líneas no es un fallo: el criterio no exige que la web aplique esos valores, sino que no se rompa cuando el usuario los aplica.

Tamaño del objetivo: la caja y el círculo

Para 2.5.8, mide el área que responde al puntero: en el inspector, la caja del elemento con su relleno (padding) y su borde, pero sin el margen. Un icono de 16 px dentro de un botón de 24 × 24 px cumple; un icono de 24 px dibujado dentro de un enlace de 18 px de alto no cumple por tamaño.

Si el objetivo mide menos de 24 × 24 px, aplica la prueba de espaciado: dibuja mentalmente un círculo de 24 px de diámetro centrado en la caja del objetivo. No cumple si ese círculo corta otro objetivo o el círculo de otro objetivo pequeño. En la práctica:

• Dos objetivos pequeños vecinos: sus centros deben estar a 24 px o más.
• Un objetivo pequeño junto a uno de tamaño suficiente: del centro del pequeño al borde del grande debe haber al menos 12 px.

Tiempos y destellos

Los criterios de tiempo también se miden. Para 2.2.1, cronometra la sesión sin interactuar, anota cuándo aparece el aviso, cuántos segundos da para ampliar y si la ampliación se puede repetir. Para 2.2.2, cronometra cuánto dura la animación o el desplazamiento: si se detiene sola antes de cinco segundos, el criterio no exige mecanismo de pausa.

Para 2.3.1, el umbral de tres destellos por segundo depende también del área y de la luminancia: la definición de destello general considera un área del orden del 25 % de un campo visual de 10 grados, que el W3C aproxima a un rectángulo de 341 × 256 px a una resolución de 1024 × 768. Ante un contenido sospechoso, analízalo fotograma a fotograma o con PEAT y anota el método.

Cómo documentar una medición

Cada hallazgo con umbral debería poder reproducirse leyendo solo su ficha. Como mínimo:

Resumen

• El contraste no se redondea: 4,48:1 no cumple 4,5:1; mide el color renderizado del trazo, nunca el borde suavizado.
• Comprueba el tamaño calculado del texto (18 pt = 24 px; 14 pt = 18,66 px) para decidir el umbral, también en la vista móvil.
• Verifica en la consola que trabajas a 320 px CSS para 1.4.10; usa el 200 % para 1.4.4 y anota la configuración.
• En 2.5.8 mide la caja con relleno y borde; si es menor de 24 px, aplica el círculo de 24 px: centros a 24 px entre objetivos pequeños.
• Cronometra los límites de tiempo y documenta el método de análisis de destellos.