ContrastDuo Scan v2026.08.3
Bookmarklet que escanea la página entera y lista el texto y los
iconos que cumplen WCAG 2 AA pero no alcanzan el contraste
que pide la tabla de referencia Silver de ARC para su tamaño y peso reales —
incluidos los estados :hover, :focus,
:focus-visible, :active y :visited declarados
en CSS. Evalúa todo como contenido fluido, el criterio más estricto
de ARC: un aviso legal o un pie de página pueden aparecer en la lista y ser correctos
para su uso real. Cada combinación enlaza a ContrastDuo, que es donde se interpreta.
Cuando el tamaño o el peso medidos no están en la tabla, el requisito se interpola entre las dos filas (o columnas) que lo rodean. Si la más exigente de las dos está marcada como no apta, no se interpola: se toma como mínimo el requisito de la otra. En ese caso el número exacto no está publicado, así que Scan puede dejar fuera de la lista texto cuyo requisito real sea más alto.
Qué hace (y qué no)
No es un validador. No busca errores WCAG (eso ya lo hacen Lighthouse, axe o WAVE): detecta combinaciones candidatas a revisión — texto que pasa su umbral WCAG 2 AA aplicable (4.5:1, o 3:1 para texto grande) pero cuyo Lc APCA queda por debajo de lo que la tabla de referencia pide para su tamaño y peso reales, e iconos SVG monocromos que pasan el 3:1 de WCAG 1.4.11 pero quedan por debajo de |Lc| 45 (umbral provisional: la guía ARC para elementos no textuales sigue en desarrollo). Que una combinación aparezca en la lista no significa que sea un error: significa que merece una mirada con criterio.
Lo que no se puede medir con garantías (imágenes, degradados, transparencias, filtros…) queda fuera de la lista y se cuenta aparte en el resumen: nunca se inventa un número.
La tabla no está en píxeles absolutos. Está en píxeles de una
fuente de referencia: Helvetica Neue, Helvetica, Fira Sans, Kanit o Arial. Scan lee el
font-size computado y consulta la tabla directamente, sin convertir, así que en
páginas compuestas con otra tipografía sus veredictos llevan un sesgo de tamaño. Una fuente con
la altura de la x minúscula más pequeña da un tamaño efectivo menor que el que declara su font-size, y Scan la
evalúa con una fila más permisiva de la que le correspondería. El método de ARC para cualquier otra fuente
es comparar la altura de x con la de la referencia y ajustar el tamaño en esa misma
proporción.
Instalación
Arrastra el enlace anterior a tu barra de marcadores (si no la ves: Ctrl+Mayús+B en Chrome y Edge). Después, en cualquier página, pulsa el marcador para abrir el panel; púlsalo otra vez para cerrarlo.
Si lo pulsas aquí, se ejecuta sobre esta misma página, a modo de demostración.
Instalación con teclado (sin arrastrar)
- Copia el código del cuadro siguiente.
- Crea un marcador nuevo (Ctrl+D o desde el gestor de marcadores) y edítalo.
- Pega el código como URL del marcador y dale un nombre, por ejemplo «ContrastDuo Scan».
Cómo se usa
- Pulsa «Escanear la página». La página se desplaza sola de arriba abajo mientras se mide; el progreso se ve en el panel y el botón Detener interrumpe el barrido y conserva lo ya medido. Escape cierra el panel en cualquier momento.
- El resultado es una lista agrupada por combinación (colores, tamaño y peso, o «icono SVG») con el número de apariciones. Cada aparición es un botón que desplaza la página hasta el elemento y lo resalta, sin mover el foco del teclado.
- Las combinaciones que solo aparecen en un estado llevan su sufijo: (:hover), (:focus), (:focus-visible), (:active) o (:visited). Al activar una de estas apariciones, el elemento se muestra con su estado realmente aplicado (además del resaltado) hasta que saltes a otra, vuelvas a escanear o cierres el panel.
- Cada grupo lleva un enlace «Más info de esta combinación en ContrastDuo» que abre ContrastDuo con los colores (y el tamaño y el peso, si es texto) ya cargados.
- Con lector de pantalla: todo son botones y enlaces estándar, accesibles con Tab. El resultado se anuncia al terminar el escaneo; el progreso intermedio es solo visual.
Limitaciones conocidas
- La página se desplaza durante el escaneo (solo se puede medir lo que hay en pantalla). Al terminar, vuelve a la posición inicial.
- Algunos elementos pueden quedar sin medir: los de carruseles o contenedores con desplazamiento horizontal, los que una cabecera fija tapa justo cuando les toca el turno y los colocados fuera del área visible. Se cuentan aparte en el resumen («W de V candidatas medidas»).
- El umbral de iconos (|Lc| < 45 con 3:1 cumplido) es provisional, a la espera de la guía ARC para elementos no textuales.
- Los estados
:hover/:focus/:focus-visible/:active/:visitedse evalúan a partir de las reglas CSS declaradas: las hojas de estilo de otros dominios sin CORS no son legibles (el panel lo avisa), los cambios de color hechos con JavaScript no se detectan, y:visitedse evalúa según lo declarado (el navegador oculta el estado real por privacidad). - En páginas que cargan contenido a medida que te desplazas, se mide lo que va apareciendo durante el barrido; lo que aparezca después no está en la lista (se puede volver a escanear).
Privacidad
El bookmarklet no hace peticiones de red ni envía datos a ninguna parte: todo se calcula dentro de la página. Los enlaces «Más info» abren ContrastDuo con los colores en la URL.