Diseñamos una interfaz, una infografía o una presentación, la observamos y listo, ahí terminó todo. Podemos leerla sin ningún problema. Sin embargo, confiar sólo en nuestra propia percepción estará muy probablemente excluyendo a un cierto porcentaje de usuarios. La accesibilidad visual es un requisito técnico que debería ser obligatorio en cualquier entrega profesional. La legibilidad básicamente se basa en cálculos matemáticos de contraste. Si no se validan las capas con datos, no estaremos diseñando.

No todo lo que percibimos es como el otro lo percibe

Nuestra percepción de “nitidez” puede no serlo para un cierto porcentaje de personas con problemas de disminución visual o daltonismo, por citar uno de los tantos temas que hay que estar considerando. Este choque entre la percepción y la realidad técnica demuestra que validar cada capa es indispensable. Si los números dicen que falla, el diseño falla, sin importar lo «limpio» que podamos verlo en nuestro monitor de alta resolución.

El contraste del color y las reglas de AA y AAA

Para eliminar la subjetividad, debemos seguir las reglas de WCAG (Pautas de Accesibilidad para el Contenido Web). Estas normas definen razones de contraste específicas que deben cumplirse en cualquier documento digital, desde un PDF hasta una aplicación compleja:

Nivel AA (Mínimo profesional): Es el estándar legal y técnico base.
4.5:1 para texto normal.
3:1 para texto grande (títulos) o elementos de interfaz (iconos y componentes gráficos).
Nivel AAA (Excelencia): El objetivo para una legibilidad máxima y reducción de la fatiga visual, requiriendo ratios mucho más estrictos (7:1 para texto normal).Si tu diseño no alcanza al menos el ratio de 3:1 en iconos o 4.5:1 en cuerpo de texto, tu contenido es, por definición, inaccesible.

El salvavidas para la iconografía

Uno de los desafíos técnicos más comunes es cuando la identidad de una marca exige colores claros que fallan en el test de contraste. Aquí es donde debemos entender el concepto de silueta como definición de la legibilidad. Si el relleno de un objeto no tiene contraste, el borde debe salvarlo, te comparto ejemplos:

El borde de la nube: Una nube blanca sobre fondo azul claro fallará. Sin embargo, si aplicas un borde oscuro definido , es ese contorno el que debe cumplir el ratio de contraste. Al usar el cuentagotas de la herramienta de medición, debes apuntar al borde, no al relleno.
El problema del sol y el mar: En una infografía sobre el ciclo del agua, el sol amarillo o las ondas blancas del mar suelen ser invisibles para personas con baja visión. La solución técnica es obligatoria: (a) oscurecemos el color, (b) aplicamos un contorno que fije un límite en la forma frente al fondo.

Precisión técnica por medio de HSL

La herramienta Color Contrast Analyser (CCA) ofrece funciones interesantes para gestionar todos estos aspectos hasta aquí tratados:

Deslizadores HSL (Hue, Saturation, Lightness): No cambies de color al azar. Usa los deslizadores de saturación y luminosidad para ajustar tu color original hasta que los indicadores de la WCAG pasen de «Fail» a «Pass». Esto te permite mantener la armonía estética mientras cumples la norma. Es una de las forma de recomendar las acciones de mejora al equipo de desarrollo.
Simulación de daltonismo: Activa la simulación para ver cómo tu paleta de colores se fusionan o desaparecen ante los ojos con protanopia o deuteranopia. Si los resultados numéricos son correctos, la simulación confirmará que tu diseño es robusto.

Accesibilidad situacional

La accesibilidad no debe ser pensada únicamente para un cierto porcentaje de personas con discapacidad visual permanente (o transitoria / temporal). Es una mejora para la condición humana en sí. Todos -en menor o en mayor medida- sufrimos de accesibilidad situacional. Pensemos en las diferentes situaciones que nos tocan vivir a diario o en determinadas circunstancias en las que no estamos en nuestro ambiente habitual y queremos usar nuestros dispositivos tecnológicos (smartwatch, tablet, celular, otros). Son esos momentos en los que el entorno reduce drásticamente el contraste percibido por la pantalla y ahí es donde nos encontramos y enfrentamos un problema. Un diseño que apenas cumple con las reglas de mínima, será ilegible en la calle. Un diseño con alto contraste (AAA) será funcional en cualquier circunstancia.

Plan de Pruebas de Accesibilidad Visual (WCAG 2.1 / CCA)

Objetivo de Evaluación: Portada / Home de Demoblaze

Herramienta de Verificación: Colour Contrast Analyser (CCA) v3.3.0+ (Vispero CCA)

Nivel de Conformidad Evaluado: WCAG 2.1 — Nivel AA (Línea Base Obligatoria) y Nivel AAA (Excelencia / Accesibilidad Situacional)

Técnica de Priorización: Risk-Based Testing (RBT) — Balance entre Core Interaction (navegación y conversión de comercio electrónico) y Core Content (catálogo y detalles editoriales).

1. Criterios de clasificación y priorización

Para establecer el orden de ejecución y la criticidad de los casos de prueba, se adopta la metodología de análisis de riesgos de ISTQB y los principios de accesibilidad visual de la guía metodológica:

Alta Prioridad (P1 – Core Interaction & Core Content Primario): Componentes que, si fallan en contraste o dependencia cromática, bloquean el embudo de conversión del e-commerce o impiden al usuario saber qué producto está seleccionando. Incluye la barra de navegación superior, los botones de paginación/acción y los títulos de productos de primer orden.
Media Prioridad (P2 – Secondary Interaction & Categorización): Elementos de filtrado secundario (categorías laterales), estados visuales de foco/hover y controles de carrusel promocional.
Baja Prioridad (P3 – Informational & Footer Content): Enlaces legales, metadatos y elementos estáticos del pie de página que no interrumpen la navegación esencial pero deben ser conformes a nivel AA/AAA.

2. Matriz de casos de prueba de accesibilidad (Gherkin BDD)

ID	Componente UI Evaluado	Prioridad	Criterio WCAG	Tipo de Elemento	Redacción BDD (Gherkin)	Umbral Esperado (CCA)
CP-ACC-01	Enlaces de navegación en Navbar (Home, Contact, About us, Cart, Log in, Sign up)	Alta	1.4.3 Contraste (Mínimo) (AA)	Texto Regular (Interactivo)	Given que la herramienta Color Contrast Analyser está abiertaAnd que la página principal de «demoblaze.com» está cargada en el navegadorWhen selecciono el color del texto del enlace de navegación como ForegroundAnd selecciono el color de fondo del Navbar oscuro como BackgroundThen la relación de contraste resultante debe ser >= 4.5:1And la herramienta debe marcar «Pass» para Regular Text en WCAG 2.1 AA	>= 4.5:1 (AA) / >= 7:1 (AAA)
CP-ACC-02	Títulos de tarjetas de producto (Samsung galaxy s6, Nokia lumia 1520, etc.)	Alta	1.4.3 Contraste (Mínimo) (AA) y 1.4.1 Uso del color	Texto Regular / Enlace sin subrayado	Given que la herramienta Color Contrast Analyser está en ejecuciónAnd que el catálogo de la Home de Demoblaze está renderizadoWhen tomo con el cuentagotas el color del enlace del título del producto (verde corporativo) como ForegroundAnd selecciono el fondo blanco de la tarjeta como BackgroundThen la relación de contraste debe ser mayor o igual a 4.5:1And si el enlace carece de subrayado, debe presentar un ratio de al menos 3:1 frente al texto que lo rodea o proveer indicador visual en hover	>= 4.5:1 (AA)Ratio relativo >= 3:1 vs texto estático
CP-ACC-03	Pastillas / Enlaces del menú lateral de Categorías (Phones, Laptops, Monitors)	Alta	1.4.3 Contraste (Mínimo) (AA)	Texto en componente cromático	Given que la herramienta CCA está abierta en pantallaAnd que el menú lateral de categorías «CATEGORIES» está visibleWhen ingreso los valores HEX del texto de cada categoría en ForegroundAnd ingreso el valor HEX del fondo de la lista/agrupador en BackgroundThen el ratio de contraste obtenido debe ser superior o igual a 4.5:1And al recibir el foco (focus/active), el contraste entre el texto y el nuevo fondo debe mantenerse >= 4.5:1	>= 4.5:1 (AA regular text)
CP-ACC-04	Controles de paginación del catálogo (Previous, Next)	Alta	1.4.3 Contraste (Mínimo) (AA) y 1.4.11 Contraste no textual (AA)	Control UI interactivo / Botón	Given que la herramienta CCA está en ejecuciónAnd que se visualizan los botones «Previous» y «Next» al final del listadoWhen selecciono el color de la tipografía del botón como ForegroundAnd selecciono el color de fondo o borde del botón como BackgroundThen el contraste de la etiqueta de texto debe ser >= 4.5:1frente al fondo del botónAnd el límite visual/borde del botón debe tener un contraste >= 3:1 frente al fondo general de la página (WCAG 1.4.11)	Texto >= 4.5:1Contorno UI >= 3:1
CP-ACC-05	Controles del Carrusel Principal (Flechas laterales de navegación prev/next)	Media	1.4.11 Contraste de contenido no textual (AA)	Objeto gráfico / Icono UI	Given que el carrusel de diapositivas está activo en la cabeceraAnd que la herramienta CCA tiene activado el selector cuentagotasWhen capturo el tono del glifo de la flecha de desplazamiento como ForegroundAnd capturo la zona más clara de la imagen o banner sobre la que descansa como BackgroundThen el ratio de contraste debe ser mayor o igual a 3:1And la herramienta CCA debe indicar «Pass (UI components and graphical objects)»	>= 3:1 (AA no textual)
CP-ACC-06	Precios de los productos (Etiqueta $360, $820)	Media	1.4.3 Contraste (Mínimo) (AA)	Microtexto informativo	Given que las fichas de productos están visibles en la página principalWhen se extrae el color del texto del precio como ForegroundAnd se extrae el fondo de la tarjeta como BackgroundThen la relación de contraste debe superar 4.5:1 para garantizar legibilidad rápida en accesibilidad situacional	>= 4.5:1 (AA)
CP-ACC-07	Indicadores de paginación del Carrusel (Bullets inferiores)	Media	1.4.11 Contraste de contenido no textual (AA)	Componente UI no textual	Given que el banner dinámico principal contiene indicadores de diapositivaWhen selecciono el color del indicador inactivo como ForegroundAnd selecciono el fondo del slider como BackgroundThen la relación de contraste debe ser al menos 3:1 para permitir la identificación de su forma y estado	>= 3:1 (AA)
CP-ACC-08	Enlaces y textos del Pie de Página (About Us, derechos de autor)	Baja	1.4.3 Contraste (Mínimo) (AA) / 1.4.6 Contraste (Mejorado) (AAA)	Texto editorial secundario	Given que se despliega el pie de página (footer) de DemoblazeWhen ingreso los valores hexadecimales del texto del footer en ForegroundAnd ingreso el color de fondo del footer en BackgroundThen el ratio de contraste debe cumplir con un mínimo de 4.5:1 (Nivel AA)And idealmente superar 7:1 para alcanzar la conformidad Nivel AAA	>= 4.5:1 (AA)Meta: >= 7:1 (AAA)

3. Procedimiento de ejecución técnica con Color Contrast Analyser (CCA)

Para asegurar la repetibilidad de la prueba y evitar fallos por subjetividad perceptual o artefactos visuales del navegador:

3.1. Calibración de mediciones

Inspección en DevTools (F12): Siempre que un elemento posea sombras (box-shadow), degradados CSS o compresión cromática, el tester debe inspeccionar el elemento con F12 y copiar el valor computado exacto (código HEX o RGB) directamente en los campos Foreground colour y Background colour de CCA.
Uso del Cuentagotas (Pipeta): Al medir bordes de iconos o flechas vectoriales sobre fondos variables (como el carrusel de Demoblaze), calibrar el cursor en el píxel de menor contraste relativo (peor escenario).

3.2. Evaluación con filtro de daltonismo (Menú Ver > Simulación de Daltonismo)

Ejecutar la prueba activando la ventana de simulación en CCA:
- Protanopia / Protanomalía (deficiencia de rojo).
- Deuteranopia / Deuteranomalía (deficiencia de verde).
- Tritanopia / Tritanomalía (deficiencia de azul).
Verificar de manera crítica si el verde de los enlaces de Demoblaze (#1ca87d aprox.) se confunde con el fondo o los textos grises adyacentes al suprimir la percepción cromática.

3.3. Protocolo de remediación (Deslizadores HSL)

Si un componente arroja resultado «Fail»:

Abrir los deslizadores de ajuste fino en CCA.
Seleccionar el modelo de color HSL (Hue, Saturation, Lightness).
Modificar la luminosidad (Lightness) o saturación hasta que los indicadores alcancen el valor umbral requerido (>= 4.5:1 o >= 3:1).
Documentar el nuevo valor HEX propuesto como recomendación de remediación técnica en el reporte de defectos (Bug Advocacy).

Conclusión y reflexión

La accesibilidad visual es la diferencia entre un contenido que comunica y uno que simplemente es decorativo, “se lo nota atractivo”. Como software testers, tenemos la responsabilidad ética y profesional de garantizar que el acceso a la información no dependa de las capacidades del usuario creador o de las condiciones climatológicas del entorno. La próxima vez debemos pensar: ¿Nuestro diseño está cumpliendo con el ratio 4.5:1 o asumo que el público que estará consumiendo la aplicación percibe al mundo igual que yo?