Descripción
Colour Contrast Analyser es una herramienta gratuita. Es específica para comprobar contrastes entre dos colores (primer plano y fondo), utilizando el algoritmo definido en las WCAG 2.1. Es muy buena para analizar el contraste de los textos y para seleccionar los contrastes entre elementos no textuales.
Permite:
- Seleccionar los dos colores sobre los que comprobar el contraste, directamente desde la página, o introducir los valores numéricos de los colores (hexadecimal, RGB, otros).
- Con los dos colores introducidos, muestra el resultado del cálculo del ratio de contraste y también se indica de manera visual si cumple o falla cada uno de los criterios relacionados con el contraste de color en las WCAG 2.1.
Instalación
Descarga Colour Contrast Analyser e instálalo en el computadora (existe una versión portable que no requiere instalación, únicamente es necesario descargarla guardándola en el computadora y posteriormente hacer doble clic sobre el fichero descargado).
¿Cómo usarla?
Abre la herramienta previamente instalada en tu computadora. Usa el icono de Colour Contrast Analyser para seleccionar el color de primer plano y el color de fondo sobre los que se quiera verificar el contraste. Si se te dificulta seleccionar de esta forma el color a analizar, o simplemente quieres estar completamente seguro de estar analizando los colores exactos, puedes hacer clic en el literal del código del color (hexadecimal, RGB, etc) e introducirlo a mano.
Es recomendable que compruebes lo que se muestra en “sample preview”. Se trata de una simulación de los dos colores seleccionados, es decir, el del texto (color en primer plano) y el del fondo (color de fondo), para asegurarte que los colores seleccionados son los correctos y no hemos introducido valores erróneos por equivocación.
En la parte inferior se muestra el resultado del cálculo del ratio de contraste y también se indica de manera visual si cumple o falla cada uno de los criterios relacionados con el contraste de color en las WCAG 2.1.
Criterios de conformidad
La herramienta Colour Contrast Analyser puede utilizarse como ayuda para revisar los siguientes criterios de conformidad:
- Criterio 1.4.1. Uso del color, para la comprobación:
- Comprobación 1.4.1-B. Los enlaces no se deben diferenciar del texto que los rodea únicamente mediante el color o al menos tienen un contraste de 3:1 con el texto que los rodea y se deben emplear pistas visuales adicionales cuando reciben el foco.
- Criterio 1.4.3. Contraste (mínimo).
- Criterio 1.4.11. Contraste de contenido no textual.
Primeros pasos con Colour Contrast Analyser
Descarga, instala y abre la herramienta.
Abre una página web y prueba a seleccionar con la pipeta dos colores (uno de primer plano y otro de fondo) para verificar su contraste. Comprueba los resultados en la parte inferior de la aplicación.
Prueba a introducir manualmente el valor numérico de los colores (hexadecimal, RGB, etc) y verifica los resultados de la comprobación de contraste.
¿Cuál es el alcance del algoritmo definido en las WCAG 2.1?
La WCAG (Web Content Accessibility Guidelines) es el estándar internacional para la accesibilidad web.
El «algoritmo» no es más que una fórmula matemática estandarizada que calcula la luminancia relativa de dos colores para determinar qué tan fácil es leer uno sobre el otro.
Si bien las WCAG 2.1 son un estándar ampliamente adoptado y utilizado actualmente (incluidas en muchas normativas legales), existen versiones posteriores:
- WCAG 2.2: Es la versión más reciente publicada por el W3C. No cambió la fórmula de contraste (que sigue siendo la misma desde la versión 2.0), pero sí añadió nuevos criterios de accesibilidad.
- WCAG 3.0 (en desarrollo): Esta futura versión está trabajando en un algoritmo completamente nuevo llamado APCA (Advanced Perceptual Contrast Algorithm), que busca ser más preciso que el actual, ya que el algoritmo de la 2.1 a veces no refleja bien la percepción humana real en ciertos colores (como los azules brillantes).
En resumen:
Usar WCAG 2.1 es correcto y es el estándar de la industria hoy en día, pero es bueno saber que las futuras versiones (3.0) traerán cambios en cómo se mide esto.
¿Por qué utilizar esta herramienta para analizar?
La herramienta permite objetivar algo que, de otra forma, sería subjetivo («¿se ve bien este color?»).
- Para textos (Criterio 1.4.3): El texto es el componente más importante para la información. El algoritmo asegura que el contraste sea suficiente para que personas con baja visión o daltonismo puedan leer el contenido. Sin una herramienta, podrías elegir una combinación que «parezca» legible pero que no cumpla con los mínimos técnicos requeridos.
- Para elementos no textuales (Criterio 1.4.11): Aquí entran componentes de interfaz (botones, estados de foco, bordes de campos de formulario, gráficos, iconos). Es vital porque, si un usuario no puede distinguir dónde termina un botón y dónde empieza el fondo, no puede interactuar con el sitio. La herramienta nos permite verificar si el «límite» de esos elementos es lo suficientemente visible.
Criterios de éxito (lo que debes perseguir)
Para verificar que el resultado es el esperado, debes buscar que los ratios de contraste alcancen estos mínimos definidos en las WCAG:
- Para texto normal: Se requiere un ratio de al menos 4.5:1 (Criterio 1.4.3).
- Para texto grande (18pt+ o 14pt en negrita): Se requiere un ratio de al menos 3:1.
- Para componentes de interfaz y objetos gráficos (no textuales): Se requiere un ratio de al menos 3:1 (Criterio 1.4.11).
El concepto 18pt+ hace referencia a una categoría de tamaño de texto considerado «texto grande» dentro de los criterios de accesibilidad de las WCAG 2.1. En este contexto, se utiliza para definir el umbral a partir del cual se aplican requisitos de contraste más permisivos:
- Requisito de contraste: Para texto grande (definido como 18pt o superior, o 14pt en negrita), el ratio de contraste mínimo exigido es de 3:1.
- Comparación: Este ratio es menor que el exigido para el texto normal, que requiere un ratio de al menos 4.5:1 para cumplir con el criterio 1.4.3 de las WCAG.
Resumen de validación: Si la herramienta te arroja un resultado «Pass» (o una marca verde) bajo estos valores, el elemento cumple con la normativa. Si marca «Fail» (rojo), significa que el contraste es insuficiente y debes oscurecer el texto o aclarar/oscurecer el fondo para corregirlo.
Uso de Colour Contrast Analyser
Para utilizar Colour Contrast Analyser en una página web, puedes seguir estos pasos:
- Abre la herramienta y tu sitio web: Ten abierta simultáneamente la aplicación instalada en tu computadora y la página web que deseas analizar.
- Selecciona los colores:
- Usa la pipeta: La herramienta incluye un icono (pipeta) que te permite hacer clic directamente sobre cualquier elemento de tu navegador para seleccionar el color de primer plano (texto, icono, borde) y el color de fondo.
- Entrada manual: Si prefieres precisión absoluta o tienes dificultades con la selección visual, haz clic en el código de color (hexadecimal, RGB, etc.) en la herramienta e introduce el valor numérico manualmente.
- Verifica la vista previa: Observa el apartado «sample preview» en la herramienta. Es una simulación que te permite confirmar visualmente que los colores capturados corresponden efectivamente a los que deseas analizar y no has cometido errores en la selección.
- Analiza los resultados: En la parte inferior de la ventana, la herramienta mostrará automáticamente el cálculo del ratio de contraste y te indicará, mediante indicadores visuales, si los colores cumplen o fallan según los criterios de las WCAG 2.1.
Casos de Prueba
Feature: Verificación de Accesibilidad WCAG 2.1 en eldeber.com.bo
Contexto:
Como tester de accesibilidad, utilizo la herramienta Colour Contrast Analyser para asegurar que los elementos visuales del sitio web cumplan con los estándares de contraste definidos en las WCAG 2.1.
Scenario 1: Validación de contraste en titulares principales
- Given que la herramienta «Colour Contrast Analyser» está abierta y en ejecución
- And que la página principal de «eldeber.com.bo» está cargada en el navegador
- When selecciono el color del texto del titular principal como Foreground
- And selecciono el color del fondo donde se apoya el texto como Background
- Then el ratio de contraste resultante debe ser mayor o igual a 4.5:1
- And si el texto es Large/Bold (18pt+ o 14pt negrita), el ratio debe ser al menos 3:1
- And la herramienta debe marcar el resultado como «Pass»
Scenario 2: Validación de contraste de elementos no textuales (Botones)
- Given que la herramienta «Colour Contrast Analyser» está abierta y en ejecución
- And que me encuentro en la sección donde visualizo el botón interactivo (ej: «JUGAR»)
- When selecciono el color de fondo del botón como Foreground
- And selecciono el color del fondo de la página que rodea al botón como Background
- Then la herramienta debe verificar el criterio 1.4.11 (Non-text Contrast)
- And el ratio de contraste debe ser mayor o igual a 3:1 para ser considerado «Pass»
Scenario 3: Validación de contraste en etiquetas de categorías
- Given que la herramienta «Colour Contrast Analyser» está abierta y en ejecución
- And que identifico una etiqueta de categoría (ej: «POLÍTICA») sobre su caja de color
- When selecciono el color del texto de la etiqueta como Foreground
- And selecciono el color de fondo de la pastilla/caja de la etiqueta como Background
- Then el ratio de contraste debe ser mayor o igual a 4.5:1 para cumplir con el criterio 1.4.3 (Contrast Minimum)
- And la herramienta debe marcar el resultado como «Pass»
Nota para el equipo de testing:
Si al utilizar la pipeta de selección el resultado es ambiguo o el sitio presenta sombras/degradados, el paso «When» debe ser modificado por: «Ingreso manualmente los valores HEX del color de Foreground y Background obtenidos mediante las herramientas de inspección del navegador (F12)» para garantizar la precisión del test.
Plan de Prueba de Accesibilidad Visual (Básico)
Plan de Pruebas de Accesibilidad Visual para la página principal de eldeber.com.bo.
Este plan prioriza los elementos críticos que garantizan la usabilidad básica. En un sitio de noticias, la prioridad se basa en el Core Content (lo que el usuario viene a consumir) y la Core Interaction (lo que el usuario necesita para navegar).
Priorización de Casos de Prueba (Justificación)
- Titulares Principales (Prioridad Alta – Bloqueante): Es el contenido esencial. Si el usuario no puede leer el titular, el sitio pierde su propósito comunicativo. Es una barrera de acceso a la información primaria.
- Etiquetas de Categoría (Prioridad Media – Orientación): Ayudan al usuario a clasificar el contenido. Sin ellas, la navegación es confusa. A menudo se diseñan con colores vibrantes que suelen fallar los tests de contraste.
- Botones de Acción/Interactividad (Prioridad Alta – Funcional): Permiten la navegación activa (buscar, jugar, suscribirse). Si un botón no se distingue del fondo, se bloquea la interacción del usuario con el sitio.
Plan de Pruebas: Accesibilidad Visual (WCAG 2.1) [mínimo]
Feature: Validación de Contraste de Color en el Sitio Principal (eldeber.com.bo)
Scenario 1: Validación de contraste en titulares principales (Prioridad ALTA)
Justificación: Garantiza la legibilidad del contenido informativo principal.
- Given que la herramienta «Colour Contrast Analyser» está abierta
- And que la página principal de «eldeber.com.bo» está cargada
- When selecciono el color del texto del titular principal como Foreground
- And selecciono el color del fondo de la tarjeta de noticia como Background
- Then el ratio de contraste debe ser mayor o igual a 4.5:1
- And si el texto es Large/Bold (18pt+ o 14pt negrita), el ratio debe ser al menos 3:1
- And la herramienta debe indicar «Pass» (Criterio 1.4.3)
Scenario 2: Validación de botones de navegación e interacción (Prioridad ALTA)
Justificación: Permite la interacción del usuario sin barreras operativas.
- Given que la herramienta «Colour Contrast Analyser» está abierta
- And que localizo un botón interactivo (ej. «Suscribirse» o «Buscar») en la home
- When selecciono el color de fondo del botón como Foreground
- And selecciono el color de fondo de la página que lo rodea como Background
- Then el ratio de contraste debe ser mayor o igual a 3:1
- And la herramienta debe indicar «Pass» (Criterio 1.4.11)
Scenario 3: Validación de etiquetas de categoría (Prioridad MEDIA)
Justificación: Asegura la correcta jerarquía visual y categorización del contenido.
- Given que la herramienta «Colour Contrast Analyser» está abierta
- And que identifico una etiqueta de categoría (ej. «POLÍTICA» o «ECONOMÍA»)
- When selecciono el color del texto de la etiqueta como Foreground
- And selecciono el color de fondo de la etiqueta (pastilla) como Background
- Then el ratio de contraste debe ser mayor o igual a 4.5:1
- And la herramienta debe indicar «Pass» (Criterio 1.4.3)
Scenario 4: Validación de enlaces de texto en el cuerpo de noticias (Prioridad MEDIA)
Justificación: Los enlaces son el mecanismo principal para profundizar en la información.
- Given que la herramienta «Colour Contrast Analyser» está abierta
- And que localizo un hipervínculo dentro del cuerpo de una noticia destacada
- When selecciono el color del texto del enlace como Foreground
- And selecciono el color de fondo del párrafo como Background
- Then el ratio de contraste debe ser mayor o igual a 4.5:1
- And se debe verificar que el enlace posea una pista visual adicional (subrayado) si el color es su única diferencia respecto al texto plano (Criterio 1.4.1)
Notas de Ejecución para el equipo:
- Criterio de fallo: Si cualquier prueba arroja «Fail», se debe reportar como un Defecto de Accesibilidad con prioridad alta si el elemento es contenido principal.
- Nota Técnica: Ante degradados, siempre tomar el color que genere el peor contraste (el más claro sobre el fondo más claro o el más oscuro sobre el fondo más oscuro) para asegurar un cumplimiento estricto.
Si te interesa este tema u otros relacionados con test management, project management e inteligencia artificial generativa aplicada a estas áreas, puedes seguirme por mis canales, y contactarme por DM desde LinkedIn por cualquier consulta que tengas:
- https://www.youtube.com/c/gustavoterrera
- en LinkedIn: https://www.linkedin.com/in/gustavoterrera/
- en Instagram: https://www.instagram.com/gustavo.terrera/
