ContrastDuo Check v2026.08.3
Bookmarklet que mide el contraste en cualquier página web y muestra a la vez
el ratio WCAG 2 y el Lc de APCA. Tiene dos modos: inspección de elementos
(recorre el texto y los iconos SVG de la página) y pipeta (toma cualquier
píxel de la pantalla). Un selector de Estado permite ver y medir la página
con :hover, :focus, :focus-visible,
:visited o :active aplicados. Desde el resultado, un enlace lleva
la combinación a ContrastDuo, que es donde se interpreta.
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 medir; 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 Check».
Cómo se usa
- Inspección de elementos (modo inicial): recorre texto e iconos SVG con los botones Anterior/Siguiente o con el ratón; con un clic se fija el elemento. Con el foco en el panel: Ctrl+←/→ avanza uno, Ctrl+↑/↓ avanza diez, Ctrl+Inicio/Fin salta al primero o al último. Escape cierra y devuelve el foco.
- Pipeta: dos botones para tomar el primer plano y el fondo de cualquier píxel, con lupa de aumento. Ideal para imágenes, degradados y todo lo que la inspección advierte que no puede evaluar.
- Estado: al elegir
:hover,:focus,:focus-visible,:visitedo:active, toda la página adopta las reglas CSS declaradas de ese estado (como forzar estados en las DevTools, pero en toda la página a la vez): la inspección y la pipeta miden lo que ves. «Por defecto» restaura la página. Si hay un elemento bajo el cursor, su medición se actualiza al cambiar de estado. - Con lector de pantalla: usa los botones Anterior, Siguiente y «Anunciar resultado» (operables en modo exploración). Los atajos de flechas requieren el modo foco del lector (en NVDA, NVDA+Espacio).
Limitaciones conocidas
- La pipeta usa la API EyeDropper: disponible en navegadores basados en Chromium (Chrome, Edge) y solo en páginas seguras (https). En Firefox y Safari, usa el modo inspección.
- La lupa de la pipeta es interfaz nativa del navegador: el antialiasing altera los bordes de los trazos (toma la muestra en el centro), y en Chrome el movimiento con flechas puede resultar errático — no depende del bookmarklet.
- La inspección evalúa texto e iconos SVG monocromos. Cuando el fondo o el gráfico no se pueden determinar con garantías (imágenes, degradados, transparencias, filtros…), lo advierte y te remite a la pipeta: nunca inventa un número.
- El selector de Estado trabaja con las reglas CSS declaradas (solo las
declaraciones de color: los menús desplegables no llegan a abrirse): 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 aplica según lo declarado (el navegador oculta el estado real por privacidad). - En macOS, el sistema puede capturar Ctrl+←/→ (Mission Control): usa los botones Anterior/Siguiente, que hacen lo mismo.
Privacidad
El bookmarklet no hace peticiones de red ni envía datos a ninguna parte: todo se calcula dentro de la página. El enlace «Más info» abre ContrastDuo con los colores en la URL.