La accesibilidad en diseño no es una tendencia reciente: las primeras pautas WCAG (Web Content Accessibility Guidelines) del W3C se publicaron en 1999. Lo que sí ha cambiado en los últimos años es la presión regulatoria y, sobre todo, la conciencia de que diseñar para todos mejora la experiencia de cualquier usuario, no solo de quienes tienen alguna discapacidad visual o cognitiva. Un texto con poco contraste resulta difícil de leer bajo el sol en un móvil, aunque tengas visión perfecta. Un botón demasiado pequeño falla tanto en manos de una persona mayor como en las de cualquiera que lleve prisa.
Qué significa realmente diseñar con accesibilidad
Diseñar con accesibilidad no implica sacrificar estética. Implica tomar decisiones tipográficas, cromáticas y estructurales con criterios objetivos además de subjetivos. El objetivo es que el contenido sea perceptible, operable y comprensible para el mayor número posible de personas, con independencia de sus capacidades visuales, motoras o cognitivas.
Aproximadamente el 8% de los hombres y el 0,5% de las mujeres tienen algún tipo de deficiencia en la percepción del color. La forma más común es la deuteranopía (dificultad para distinguir rojo y verde), aunque existen otras variantes. Esto afecta directamente a cómo una persona interpreta un gráfico, un formulario de error o un botón de acción si el único elemento diferenciador es el color.
Además, la directiva europea de accesibilidad web (2016/2102) ya obliga a los organismos públicos de la UE a cumplir al menos el nivel AA de las WCAG 2.1. En el sector privado la exigencia varía según el país, pero la tendencia legislativa apunta hacia una ampliación progresiva. En España, el Real Decreto 1112/2018 transpuso esa directiva con requisitos concretos.
Contraste de color: los números que debes conocer
El contraste es la diferencia de luminancia relativa entre un texto y su fondo. Las WCAG 2.1 establecen dos niveles de cumplimiento. En el nivel AA, el texto normal (menos de 18 pt o 14 pt en negrita) necesita una relación de contraste mínima de 4,5:1. El texto grande (18 pt o más, o 14 pt en negrita) puede bajar a 3:1. En el nivel AAA, los requisitos suben a 7:1 y 4,5:1 respectivamente.
Estos valores no son arbitrarios: provienen de estudios sobre percepción visual de personas con baja visión moderada, que equivale aproximadamente a una agudeza visual de 20/80 sin corrección. Conseguir un 4,5:1 no es difícil si se trabaja con colores con suficiente diferencia de brillo. El problema aparece cuando se eligen combinaciones de moda, como gris claro sobre blanco o texto melocotón sobre fondo crema.
Herramientas gratuitas como el Contrast Checker de WebAIM o el plugin «Contrast» de Figma permiten comprobar cualquier combinación en tiempo real. Si trabajas en Figma y no tienes experiencia en diseño, estas comprobaciones automáticas evitan errores que después son costosos de corregir en producción.
Un error habitual es verificar solo el texto sobre fondo sólido y olvidarse de los estados interactivos: el texto de un campo de formulario con placeholder gris claro, los enlaces visitados, los botones desactivados. Todos necesitan pasar la misma prueba de contraste.
Tipografía: tamaño, peso y espaciado
El tamaño mínimo recomendado para texto de cuerpo en pantalla es 16 px. No es una norma de las WCAG de forma explícita, pero sí aparece en guías de accesibilidad de Google, Apple y Microsoft, y responde a años de investigación sobre legibilidad en resoluciones variables. Por debajo de 14 px el texto resulta problemático para muchas personas, especialmente en dispositivos móviles.
El peso tipográfico importa tanto como el tamaño. Una fuente delgada (300 o menos) puede resultar elegante en un titular grande, pero se vuelve ilegible en tamaños pequeños o sobre fondos con textura. Para el cuerpo del texto, los pesos entre 400 y 600 ofrecen la mejor legibilidad en pantalla. Al elegir tipografías para web conviene priorizar familias diseñadas específicamente para pantalla, como Inter, Source Sans Pro o Atkinson Hyperlegible, esta última desarrollada por la Fundación Braille de América expresamente para personas con baja visión.
El interlineado (line-height) es otro factor que se subestima. Las WCAG 1.4.12 recomiendan al menos 1,5 veces el tamaño de la fuente para el cuerpo del texto. Un valor de 1,2 puede parecer suficiente visualmente, pero complica la lectura a personas con dislexia o con dificultades cognitivas. El espaciado entre letras (letter-spacing) y entre párrafos también influye: un párrafo sin separación visual entre él y el siguiente genera fatiga lectora.
La longitud de línea óptima en diseño tipográfico oscila entre 45 y 75 caracteres. Líneas demasiado largas obligan al ojo a recorrer una distancia excesiva; líneas muy cortas rompen el ritmo de lectura. En el diseño de páginas de aterrizaje esto se traduce en controlar el ancho de las columnas de texto, no solo su contenido.
Color como único indicador de información
Uno de los criterios más ignorados en accesibilidad es el 1.4.1 de las WCAG: el color no debe ser el único medio para transmitir información. Si un campo de formulario se pone en rojo para indicar error, pero no hay ningún texto o icono adicional que lo confirme, una persona con daltonismo no recibirá esa información.
La solución es combinar el color con al menos otro elemento: un icono, un texto descriptivo, un borde con mayor grosor o un cambio de forma. Este principio aplica también a gráficos de datos, mapas de calor, calendarios de disponibilidad y tablas de comparación. Cuando trabajes en el diseño de infografías o visualizaciones, incluir etiquetas de texto directas en los datos (en lugar de depender solo de la leyenda de colores) mejora la accesibilidad de forma inmediata.
La psicología del color también juega un papel aquí. Ciertos significados culturales del color no son universales, así que apoyarse en texto o iconografía refuerza la comunicación más allá de las limitaciones visuales. Si quieres profundizar en cómo el color transmite mensajes, el artículo sobre psicología del color en marcas ofrece una perspectiva aplicada.
Tamaños de elementos interactivos
Las WCAG 2.5.5 especifican que el área de toque mínima para elementos interactivos debe ser de 44×44 píxeles CSS. Apple lleva tiempo recomendando 44×44 puntos en sus guías de Human Interface Guidelines; Google establece 48×48 dp en Material Design. El consenso es claro.
Sin embargo, en muchos proyectos web y de aplicaciones los botones, checkboxes o enlaces en línea se diseñan con áreas mucho menores. Un enlace de texto en medio de un párrafo tiene un área de toque equivalente a su tamaño tipográfico, que en muchos casos no supera los 20×16 px. Esto perjudica a personas con temblor en las manos, con movilidad reducida o que simplemente usan el móvil caminando.
La solución técnica más sencilla es añadir padding interno al elemento sin alterar su apariencia visual. Un botón puede parecer de 36 px de alto y tener un área de toque de 48 px con padding vertical de 6 px en cada lado. Esto no cambia el diseño visible pero sí la usabilidad real.
Legibilidad en contextos de diseño gráfico físico
La accesibilidad no se limita a pantallas. En materiales impresos, señalética, packaging o materiales para eventos, los principios de contraste y legibilidad son igual de aplicables. Un cartel con texto pequeño sobre fondo fotográfico sin capa de opacidad puede cumplir el mínimo estético y fallar completamente en comunicación.
En materiales de evento como roll-ups el texto debe leerse desde cierta distancia y en condiciones de iluminación variable. La regla general es usar tamaños de al menos 24 pt para texto secundario y garantizar un contraste mínimo de 4,5:1 también en impresión, aunque las WCAG no sean de aplicación directa en ese medio.
El manual de identidad visual de una marca debería incluir especificaciones de accesibilidad cromática: variantes de logo para fondos claros y oscuros, combinaciones de colores aprobadas con sus ratios de contraste, y tamaños mínimos de uso. Esto evita que cada pieza sea una decisión individual y reduce los errores de accesibilidad en producción.
Herramientas concretas para auditar la accesibilidad de tus diseños
Antes de entregar cualquier diseño conviene realizar una auditoría básica con herramientas específicas. Estas son las más utilizadas por equipos de diseño y desarrollo:
- WebAIM Contrast Checker: comprueba relaciones de contraste introduciendo valores hexadecimales. Gratuito y sin registro.
- Stark: plugin disponible para Figma, Sketch y Adobe XD. Simula distintos tipos de daltonismo y verifica contraste en el propio entorno de diseño.
- Colour Contrast Analyser de TPGi: aplicación de escritorio que permite analizar cualquier elemento de la pantalla con el cuentagotas del sistema.
- Accessibility Insights: extensión de navegador de Microsoft que realiza una auditoría automatizada de páginas web y detecta problemas de contraste, estructura semántica y tamaños de área táctil.
- Axe DevTools: integrado en las herramientas de desarrollador de Chrome y Firefox, permite detectar errores de accesibilidad en producción sin salir del navegador.
Ninguna herramienta automatizada detecta el 100% de los problemas de accesibilidad. Las auditorías manuales con usuarios reales siguen siendo necesarias, especialmente para evaluar la legibilidad real en condiciones de uso habituales.
Cómo integrar la accesibilidad desde el primer boceto
El momento más barato para corregir un problema de accesibilidad es antes de que exista en el diseño final. Incorporar la revisión de contraste y tamaños desde la fase de wireframe o prototipo bajo fidelidad ahorra horas de trabajo en revisiones posteriores.
Una práctica concreta: al definir la paleta de colores de un proyecto, comprobar las combinaciones previstas (texto sobre fondo principal, texto sobre fondo secundario, texto sobre color de acento) antes de aprobar la paleta. Si la marca ya está definida y los colores corporativos no superan el mínimo de contraste, documentar variantes accesibles que puedan usarse sin alejarse del sistema visual. Esto se puede recoger directamente en el manual de marca con valores de contraste validados para cada combinación.
Diseñar con accesibilidad desde el inicio no requiere más tiempo de lo habitual una vez se integra como hábito. El coste real está en corregirla a posteriori, cuando el código ya está escrito y el material ya está aprobado.
Preguntas frecuentes
¿Qué relación de contraste mínima necesito para que mi diseño cumpla las WCAG 2.1?
Para el nivel AA, el texto normal menor de 18 pt necesita una relación de contraste mínima de 4,5:1 con respecto al fondo. Si el texto es grande (18 pt o más, o 14 pt en negrita), el mínimo baja a 3:1. Para alcanzar el nivel AAA, los requisitos suben a 7:1 para texto normal y 4,5:1 para texto grande. Puedes verificar cualquier combinación de colores de forma gratuita con herramientas como el Contrast Checker de WebAIM o el plugin Stark dentro de Figma.
¿Cuál es el tamaño mínimo recomendado para el texto en pantalla y por qué?
El tamaño mínimo recomendado para el texto de cuerpo en pantalla es de 16 px, aunque las WCAG no lo establecen de forma explícita como norma. Este valor aparece en las guías de accesibilidad de Google, Apple y Microsoft, y responde a investigaciones sobre legibilidad en distintas resoluciones y dispositivos. Por debajo de 14 px el texto se vuelve problemático para muchas personas, especialmente en móviles. Para el peso tipográfico, los valores entre 400 y 600 ofrecen mejor legibilidad en pantalla que las fuentes delgadas.
¿Por qué no es suficiente usar el color rojo para indicar un error en un formulario?
Usar solo el color como indicador de información incumple el criterio 1.4.1 de las WCAG, que establece que el color no puede ser el único medio para transmitir un mensaje. Aproximadamente el 8% de los hombres tiene algún tipo de deficiencia en la percepción del color, por lo que un campo en rojo sin texto o icono adicional puede pasar completamente desapercibido. La solución es acompañar siempre el cambio de color con al menos otro elemento: un texto descriptivo del error, un icono representativo o un borde más grueso. Este principio aplica también a gráficos, calendarios y tablas comparativas.
¿Qué tamaño mínimo deben tener los botones y elementos interactivos en una app o web?
Las WCAG 2.5.5 establecen un área de toque mínima de 44×44 píxeles CSS para cualquier elemento interactivo. Apple recomienda 44×44 puntos en sus Human Interface Guidelines y Google establece 48×48 dp en Material Design. Para conseguirlo sin modificar el aspecto visual del elemento, basta con añadir padding interno suficiente: un botón que visualmente mide 36 px de alto puede tener un área táctil de 48 px con solo 6 px de padding vertical en cada lado. Esto mejora especialmente la usabilidad para personas con movilidad reducida o que usan el dispositivo en movimiento.
¿Cómo puedo integrar la accesibilidad en mi proceso de diseño sin que suponga un trabajo extra significativo?
El momento más eficiente para resolver problemas de accesibilidad es durante la definición de la paleta de colores y la tipografía, antes de que el diseño esté finalizado. Al seleccionar los colores del proyecto, comprueba desde el inicio las combinaciones previstas entre texto y fondo con herramientas como Stark o el Colour Contrast Analyser. Si la marca ya está definida, documenta variantes accesibles dentro del manual de identidad visual, incluyendo los ratios de contraste validados para cada combinación aprobada. Una vez integrado como hábito, este proceso no añade tiempo significativo al flujo de trabajo habitual.
