Experiencia · Diseño UI/UX

Un sistema de diseño en el que el contraste se calcula, el movimiento tiene botón de parada, y lo que no pasa la verificación se escribe de frente.

Trabajamos con tokens de color con relación de contraste calculada, patrones de teclado verificados elemento por elemento y animaciones que se detienen según la preferencia del sistema. Verificamos con herramienta, en páginas reales, y publicamos también lo que falló.

Habla de un proyecto

Ya construidoSistemul rulează pe site-ul acesta și se poate inspecta. Tokenul `--muted: #666b65` obține între 4,72:1 și 5,45:1 pe cele șapte fundaluri ale sitului — recalculat de noi cu formula de luminanță din WCAG, nu preluat dintr-un instrument. Opt culori scrise direct în foaia de stil produceau 2,88–4,49:1; le-am găsit cu axe-core 4.10.2 rulat pe zece pagini live și le-am înlocuit cu tokenul, iar corectura e deja în foaia servită de producție. A doua implementare verificabilă: mecanismul de oprire a animațiilor — 38 de elemente animate la infinit pe pagina de start, toate acoperite de un buton de pauză, plus regula globală care anulează animațiile la `prefers-reduced-motion: reduce`.

La mayoría de los “sistemas de diseño” son una paleta y una lista de componentes. El nuestro empieza con algo más aburrido y más útil: cada color de texto tiene una relación de contraste calculada frente a cada fondo en el que aparece efectivamente. No “se ve bien”, sino un número. El token de texto secundario de este sitio, `--muted: #666b65`, obtiene entre 4,72:1 y 5,45:1 en los siete fondos usados. El umbral exigido para texto pequeño es 4,5:1.

Ese número no salió del sentido común. Ejecutamos axe-core 4.10.2 en diez páginas del propio sitio y la única regla WCAG infringida de forma sistemática era el contraste: 31 a 43 nodos por página, de los cuales 31 venían del encabezado y el pie, así que se multiplicaban en las 147 direcciones. Ocho colores escritos directamente en la hoja de estilo producían entre 2,88:1 y 4,49:1. El peor, a 10 px y 3,72:1, era exactamente la fila con los enlaces jurídicos —la ruta por la que llega alguien cuando quiere ejercer un derecho.

La segunda parte del sistema es el movimiento, tratado como función, no como decoración. En la página de inicio hay 38 elementos animados de forma infinita. Todos están cubiertos por un botón de pausa: al pulsarlo pasan al estado detenido, la etiqueta cambia y el estado se anuncia para los lectores de pantalla. Por separado, una regla global anula cualquier animación y transición cuando el sistema pide movimiento reducido, detiene el desplazamiento suave y oculta incluso el botón de pausa, que deja de ser útil. También comprobé la trampa clásica —una animación que parte de una opacidad casi cero y deja el contenido invisible cuando se anula—: aquí no existe.

El resto es disciplina: indicador de foco visible, de 2 px, aplicado solo a la navegación con teclado; recorrido con flechas en los grupos de pestañas, según el modelo recomendado; formularios con errores anunciados como alerta y confirmaciones anunciadas como estado. Y una regla que mantenemos firme: lo que no pudimos verificar se escribe como no verificado. La auditoría propia tiene una sección de límites de la herramienta, y dos defectos encontrados allí siguen abiertos —están más abajo, con nombre.

Qué incluye

El trabajo, por componentes

Los colores son tokens, y el contraste es un número calculado

La paleta vive en un bloque de 14 variables, y el texto secundario usa un solo token: `--muted: #666b65`. Las proporciones, recalculadas con la fórmula de luminancia relativa de WCAG sobre los siete fondos del sitio: 5,45:1 sobre blanco, 5,15, 5,11, 5,03, 5,02, 4,79 y 4,72. El texto principal, `--ink: #181a19`, obtiene 17,49:1 sobre blanco; el acento verde `#355c46`, 7,58:1. Cuando un color no llega al umbral, se cambia el token, no se argumenta en la reunión.

Los componentes tienen patrón de teclado, no solo aspecto

El grupo de pestañas de la página de inicio usa el índice de tabulación móvil: solo la pestaña activa es accesible con Tab, las demás se sacan del orden, y las flechas izquierda/derecha, Home y End mueven el foco, con el comportamiento predeterminado de la tecla anulado. Es el modelo de las prácticas recomendadas para componentes accesibles, implementado, no citado. En los componentes básicos del sitio hay 21 etiquetas accesibles, 7 estados pulsado/no pulsado, 3 vínculos entre título y región, 2 estados de selección, 2 regiones que anuncian cambios y 2 vínculos entre el comando y el panel que controla.

El movimiento tiene botón de detenerse y se apaga según la preferencia del sistema

En la página de inicio hay 38 elementos animados infinitamente, iniciados automáticamente, que duran más de cinco segundos — exactamente la situación regulada por el criterio «Pausa, parada, ocultación». Los 38 están cubiertos por botones de pausa: al pulsarlos, las animaciones pasan al estado detenido y el estado del botón cambia. Además, en `prefers-reduced-motion: reduce` una regla global anula cualquier animación y transición, detiene el desplazamiento suave, elimina el desplazamiento al pasar el ratón y oculta el botón de pausa. En la hoja principal hay siete de estos bloques, más uno en la hoja base.

Indicador de foco visible, solo donde hace falta

Contorno de 2 px sólido, en el verde de acento, con 5 px de separación, aplicado mediante `:focus-visible` — así aparece en la navegación con teclado y no al hacer clic con el mouse. Verificado en el navegador, elemento por elemento, en el encabezado y en los primeros controles del contenido: cuatro elementos distintos, el mismo contorno. En ninguna parte de la hoja de estilo existe un contorno eliminado sin sustituto.

Formularios que anuncian sus estados

En el formulario de contacto del sitio, las etiquetas están implícitas en los campos, el error está marcado como alerta y la confirmación como estado — así los lectores de pantalla las anuncian sin que el usuario las busque. La trampa para bots está bien oculta: padre sin display, marcado como oculto para tecnologías asistivas y sacado del orden de tabulación. La auditoría propia confirma que las reglas de etiquetado, de nombre para selectores y de autocompletado pasan todas.

La verificación se hace con una herramienta, en páginas reales

Ejecutamos axe-core 4.10.2 en la página live, no en un entorno de prueba, sobre una muestra de diez páginas que cubren patrones diferentes: la página de inicio, el catálogo, una página de producto, el índice de servicios, una página de servicio, la matriz de soluciones, una combinación de la matriz, el contacto, las tarifas, un artículo y un documento jurídico. El resultado bruto se escribe en la página, con el número de nodos, no resumido en «conforme».

Lo que falló se publica, no se redondea

Del mismo auditor: a 320 px de ancho, el comando del encabezado y el botón de menú sobresalen de la pantalla en 22 px y la página se desplaza horizontalmente —la aritmética es 362 px de contenido en un contenedor de 280 px. En los documentos jurídicos, los enlaces del texto no se distinguen del texto de alrededor salvo por el color, y la relación entre el acento y el texto del cuerpo es 1,01:1, así que el subrayado es obligatorio. Ambos están abiertos, con corrección escrita. Los publicamos porque un comprador que pide accesibilidad merece ver cómo se ve una lista real de defectos.

Sin tema oscuro — dicho, no simulado

El sitio no tiene tema oscuro. El bloque de tokens está declarado para tres selectores que reciben valores idénticos, y en el código no existe ninguna regla para la preferencia de esquema del sistema. Verificado en el navegador con el esquema oscuro emulado: la página sigue blanca. La consecuencia útil: todos los informes de contraste medidos son válidos en ambos esquemas. La consecuencia molesta: el conmutador de tema es código muerto desde el punto de vista del color. Un tema oscuro real significa volver a medir por completo el contraste, no copiar los valores.

Tipografía con reglas, no con preferencias

Una sola familia para títulos y texto, con espaciado entre letras ajustado por nivel —más estrecho en los títulos grandes, `-0,055em` en los niveles uno y dos, `-0,035em` en el nivel tres— y peso 500 en los títulos. Los párrafos usan equilibrio de líneas, para que no quede una sola palabra en la última línea. El contenedor tiene un ancho máximo de 1240 px con márgenes de 48 px, y los botones tienen la misma altura de línea en todas partes. Son reglas escritas en la hoja de estilo, así que se aplican también después de que nos vayamos.

Qué aspecto tiene

El recorrido, paso a paso.

Inventario de tareas y de puntos de bloqueo

La primera entrega es la lista de las cosas que la gente viene a hacer, en el orden de frecuencia, con el lugar donde se detiene hoy. Sin ella, cualquier nueva pantalla es una preferencia estética. Con ella, cada decisión posterior tiene un criterio.

Los tokens y la verificación del contraste, antes de las pantallas

Se establecen los colores, los fondos sobre los que aparecen de hecho y el ratio de cada pareja, calculado. Entregamos la tabla de parejas con sus ratios. Es mucho más barato que descubrir al final que la paleta elegida no puede usarse para texto pequeño.

Los componentes, con el patrón de teclado escrito junto con el aspecto

Cada componente interactivo recibe, en el mismo commit, el aspecto y el comportamiento: qué pasa con Tab, con las flechas, con Escape, qué se anuncia y cómo. El patrón de teclado añadido después es una reescritura, no una ampliación.

La auditoría con herramienta, en páginas reales, con el resultado bruto entregado

Ejecutamos la herramienta sobre una muestra que cubre patrones distintos y entregamos la salida bruta, no un resumen. Cada hallazgo recibe el lugar en el código, el criterio infringido, la corrección propuesta y el criterio de verificación después de la corrección —por ejemplo: el número de nodos de contraste debe bajar a cero en la página que contiene solo el encabezado y el pie de página.

La entrega, con la lista de lo no verificado

Entregamos los tokens, los componentes, el documento de auditoría y la lista de lo que no se pudo verificar, con el motivo. En este sitio la lista incluye la activación con teclado y la emulación de la preferencia de movimiento reducido en el navegador — ambas limitaciones de herramienta, ambas escritas como tales.

Un ciclu în 3 pași

Los datos

Qué tocamos, dónde están y cuánto se quedan

Las preguntas que hace cualquiera que tenga un delegado de protección de datos — hechas aquí antes de que las haga él.

Qué recopilamos en la etapa de investigación: Las tareas que la gente realmente tiene que hacer, el contexto en el que las hace y el punto donde se bloquea. Cuando eso supone registros, entrevistas o la observación de sesiones reales, se establece antes quién participa, qué se registra, quién tiene acceso y cuánto tiempo se conserva —por escrito, no por acuerdo tácito.
Los resultados de la auditoría de accesibilidad: La salida bruta de la herramienta, la agrupación de los nodos por la pareja color–fondo, los ratios recalculados de forma independiente y el lugar en el código de cada color. Se entrega como documento versionado junto al código, no como presentación —para que cualquiera pueda reproducir la medición con los comandos del anexo.
Qué entra en el código y qué queda en discusión: Los tokens, los componentes, los patrones de teclado y las reglas de movimiento entran en la hoja de estilos y en los componentes. Las preferencias que no se pueden expresar como regla —«que se vea más cálido»— quedan como decisiones por discutir, no se cuelan como valores escritos directamente en los componentes. De ahí suelen venir los colores que fallan la verificación.
Las preferencias del visitante: La preferencia de movimiento reducido se lee del sistema, mediante la consulta de media, y no se almacena con nosotros. No hay tema oscuro que retener. La medición del tráfico pasa por la herramienta configurada en el proyecto y se activa después del consentimiento; no depende del sistema de diseño, pero sí de la misma página.
Qué no asumimos: No asumimos que un resultado automático signifique conformidad. La herramienta captura una parte de los criterios; el resto requiere verificación manual, y algunas cosas no se pudieron verificar en absoluto con las herramientas disponibles — la activación con teclado, por ejemplo, porque el panel de navegador utilizado no produce la activación por defecto. En el informe queda así: sin verificar, no superado.

Un caso

Ocho colores, una sola variable, y la lista que quedó abierta

La situación

Sitio propio, rehecho recientemente, con un sistema de tokens ya existente. Nadie había presentado ninguna reclamación. La pregunta no fue «¿se ve bien?», sino «¿qué dice una herramienta que no tiene opiniones?»

Qué construimos

Inyectamos axe-core 4.10.2 en la página en vivo y lo ejecutamos en diez páginas elegidas por distintos patrones. La única regla WCAG infringida sistemáticamente era el contraste. Agrupamos los nodos por pareja texto-fondo, recalculamos cada ratio con la fórmula de luminancia relativa del estándar —para no depender de una sola herramienta— y buscamos cada color en la hoja de estilos. Ocho valores escritos directamente en el código producían todos los fallos permanentes: 3,89:1 en los 25 enlaces del pie de página, 2,88:1 en los números de paso, 3,72:1 en la fila con los enlaces legales, y otros cinco entre 3,99 y 4,49. El token correcto ya existía; el problema era que ocho reglas lo evitaban.

Qué salió

Los ocho valores fueron sustituidos por el token, y el token ajustado para superar el umbral en todos los siete fondos del sitio. Verificado dos veces: en el repositorio ya no aparece ninguno de los ocho colores, y la hoja de estilos servida hoy por producción contiene solo el token. Recalculado de forma independiente: 4,72:1 en el peor caso y 5,45:1 sobre blanco. El resto de la auditoría confirmó lo que ya estaba correcto —el indicador de foco, el patrón de teclado en los grupos de pestañas, las etiquetas y estados del formulario, la cobertura completa de las animaciones con botones de pausa.

Qué no dice el caso

Dos hallazgos quedaron abiertos y están escritos como tal: a 320 px de ancho el encabezado supera la pantalla en 22 px, y en los documentos legales los enlaces dentro del texto se distinguen solo por color, con un ratio de 1,01:1 frente al texto circundante — el color por sí solo no basta, hace falta subrayado. Y el límite del método: una herramienta automática cubre una parte de los criterios. La activación con teclado no pudo probarse con las herramientas disponibles y está marcada como no verificada, no superada.

Preguntas

Lo que nos pregunta la gente antes de llamar

¿Qué significa «diseño accesible» para vosotros, concretamente?

Significa números, no adjetivos. El texto secundario de este sitio usa un solo token, `#666b65`, que obtiene entre 4,72:1 y 5,45:1 en los siete fondos donde aparece — el umbral exigido para texto pequeño es 4,5:1. El foco es un contorno de 2 px que aparece solo al navegar con el teclado. El movimiento tiene botón de detención y se anula por completo con la preferencia de movimiento reducido del sistema. Cada una de estas afirmaciones tiene un lugar en el código y un modo de verificación.

¿Cómo verificáis? ¿Con qué herramienta?

axe-core 4.10.2, ejecutado en la página en vivo, en diez páginas que cubren distintos patrones — la página de inicio, el catálogo, una página de producto, el índice y una página de servicio, la matriz de soluciones y una combinación de ella, el contacto, las tarifas, un artículo, un documento legal. El resultado bruto, con el número de nodos por página, entra en el documento. Sobre eso recalculamos manualmente los ratios de contraste con la fórmula del estándar, para no depender de una sola herramienta. Y escribimos explícitamente lo que no se pudo verificar.

¿Qué os falló?

En el momento de la auditoría, la única regla infringida sistemáticamente era el contraste: 31 hasta 43 nodos por página, de los cuales 31 eran del encabezado y el pie de página, así que multiplicados en las 147 direcciones. Ocho colores escritos directamente en la hoja de estilos producían de 2,88 a 4,49:1; el más grave, a 10 px y 3,72:1, era la fila con los enlaces legales. Los ocho están ahora sustituidos por el token, y la corrección está en la hoja servida por producción. Quedan abiertas dos cosas: a 320 px el encabezado supera la pantalla en 22 px, y en los documentos legales los enlaces del texto no se distinguen más que por color, con un ratio de 1,01:1 frente al texto circundante. Ambas tienen la corrección escrita.

¿Por qué publicáis los defectos de vuestro propio sitio?

Porque, de lo contrario, «accesible» es una palabra sin coste. Cualquiera puede escribir que cumple la norma; pocos muestran la lista de no conformidades, con el número de nodos y la línea de la hoja de estilos. Si trabajamos juntos, recibirás el mismo tipo de lista sobre tu sitio —incluidas las partes que no nos favorecen. Es más barato enterarte por nosotros.

¿El sitio tiene tema oscuro?

No, y lo digo porque es verificable: el bloque de tokens está declarado para tres selectores que reciben valores idénticos, y en el código no existe ninguna regla para la preferencia de esquema. Emulando el esquema oscuro en el navegador, la página sigue blanca. Lo bueno es que todos los ratios de contraste medidos son válidos en ambos esquemas. Lo que hay que resolver es que un conmutador de tema que no cambia los colores es código muerto. Un tema oscuro real significa volver a medir por completo el contraste —no se transfiere desde el claro.

¿Las animaciones no molestan a los usuarios?

Pueden, y por eso tienen dos salidas. La primera: cada elemento animado infinitamente está cubierto por un botón de pausa —en la página de inicio comprobamos que los 38 están cubiertos, cero sin cubrir. La segunda: con la preferencia de movimiento reducido del sistema, una regla global anula cualquier animación y transición, detiene el desplazamiento suave y oculta incluso el botón de pausa. También comprobé la trampa clásica: si una animación parte de una opacidad casi cero y se anula, el contenido puede quedar invisible. Aquí no ocurre, porque los elementos no tienen opacidad base reducida.

¿Entregan también código, o solo maquetas?

Entregamos los tokens y los componentes en código. Un sistema de diseño que se queda en la herramienta de diseño se erosiona a la primera urgencia: alguien escribe un color directamente en el componente porque «así se ve mejor aquí», y a los seis meses tienes ocho colores paralelos que fallan la verificación. Exactamente eso nos pasó a nosotros, está documentado más arriba, y por eso el token es la única fuente de verdad para el color del texto secundario.

¿Qué no pueden verificar?

Algunas cosas concretas, escritas tal cual en la auditoría. Activación con teclado: el panel de navegador usado no produce la activación por defecto —pulsar Enter en un botón no genera clic—, así que no reportamos conclusiones sobre Enter y Space. Emulación de la preferencia de movimiento reducido: no pudimos activarla en el navegador, así que la regla se verificó en la fuente, y sigue siendo recomendable una prueba manual con la preferencia activada. Y las métricas de carga percibida no estaban disponibles en la herramienta, así que están marcadas como no medidas, no estimadas.

¿Garantizan conformidad WCAG?

No, y nadie honesto debería hacerlo basándose en una herramienta automática. Una herramienta cubre una parte de los criterios; el resto requiere verificación manual, y algunos requieren usuarios reales. Lo que garantizamos es el método: muestra declarada, herramienta y versión declaradas, resultado bruto publicado, ratios recalculados de forma independiente, corrección con criterio de verificación y la lista explícita de lo que no se pudo verificar. Un certificado sin esa lista no dice nada.

En qué se basan las afirmaciones anteriores (15 fuentes)

Cele opt culori scrise direct în foaia de stil (2,88–4,49:1) nu mai există nici în depozit, nici în foaia de stil servită de producție; în locul lor e `var(--muted)`https://www.megapromoting.com/_next/static/chunks/0~95cl1qc44v9.css · 2026-09-06

14 de ellas son código y archivos de nuestros repositorios. No publicamos su nombre ni la línea: juntos, en una sola página, describirían con demasiada precisión cómo están construidos sistemas que no son solo nuestros. Los repasamos contigo, en el repositorio, a petición — la verificación sigue siendo posible, solo que se hace en una conversación.

Cómo trabajamos Todos los servicios

¿Qué te gustaría que funcionara mejor?

Cuéntanos tu proceso. Juntos decidimos qué merece la pena construir, qué podemos conectar y cómo verificamos el resultado.

Vamos a hablar