Doble o nada AA: cómo implementar un diseño accesible.

Con los fundamentos de la accesibilidad en mente, es momento de llevar la teoría a la práctica. En la primera parte hablamos sobre las directrices clave que rigen la accesibilidad y, en esta segunda parte, te presentaremos herramientas web y plugins de Figma que facilitan la implementación de un diseño accesible.

Estas herramientas no solo te ayudan a verificar contrastes y legibilidad, sino que también hacen que la integración de la accesibilidad sea un proceso más fluido y creativo. Si la primera parte te dio la base, esta te proporcionará los recursos para ponerla en acción.

Herramientas web

Escoger una buena combinación de color y tipografía es esencial para las personas con discapacidad visual. Existen varias herramientas web que permiten verificar los niveles de contraste y otros aspectos de accesibilidad:

Soñaste… con el contraste

Colour Contrast Checker es una herramienta minimalista y sencilla. La interfaz es extremadamente visual, con un diseño limpio que prioriza la funcionalidad para que se puedan introducir colores e interactuar en directo de forma sencilla.

• Interactividad: ofrece control deslizante para ajustar los colores y ver instantáneamente cómo cambian los valores de contraste, lo que facilita la experimentación y ajustes en tiempo real.
• Resultados visuales: proporciona el contraste en AA y AAA para textos grandes y normales.
• Aspecto destacable: su interfaz es muy intuitiva y moderna, con controles deslizantes y la posibilidad de ajustar manualmente los colores mediante su código hexadecimal o HSL.

¿Te atreves… con los niveles?

WebAIM Contrast Checker se trata de una herramienta simple y funcional enfocada en la accesibilidad, que permite evaluar el contraste de colores de manera directa y sin distracciones. La simplicidad en su diseño es clara, enfocándose más en la funcionalidad que en la interactividad.

• Interactividad: permite ingresar valores HEX manualmente y proporciona una evaluación instantánea del contraste, dispone también de un color picker y ajustar la luminosidad.
• Resultados visuales: la presentación es simple. Muestra resultados textuales claros, pero sin gráficos o elementos visuales destacados. Información sobre tipografía en distintas condiciones y tamaños.
• Aspecto destacable: es una herramienta muy directa que se centra en proporcionar información precisa sin distracciones.

Luz, color… y acción

Contrast Checker es muy similar a Colour Contrast Checker (la primera de todas), esta herramienta ofrece un enfoque sencillo y directo. Sin embargo, su interfaz es ligeramente más refinada con un diseño más explicativo y detallado.

• Interactividad: mediante códigos (RGB, HEX) o bien cargando una imagen.
• Resultados visuales: los resultados son claros, con una codificación de colores que indica fácilmente si el contraste cumple con los estándares WCAG. Y también ofrece una opción para comparar texto en diferentes tamaños.
• Aspecto destacable: la información que nos proporciona es bastante amplia y completa. Y nos permite disponer de un histórico de las combinaciones cromáticas que hemos ido introduciendo.

Y de bonus… una de focus

WTFocus es una herramienta minimalista que proporciona resultados rápidos sobre la relación de contraste de colores, con un enfoque en la simplicidad y eficiencia. Y única y exclusivamente para componentes o elementos que disponen de estado focus.

• Interactividad: es el que más opciones tiene, se puede seleccionar color mediante códigos RGB, HEX, HSL o bien con un color picker.
• Resultados visuales: los resultados son muy visuales y sobre todo interactivos. Pudiendo ver el resultado en vivo en diferentes componentes básicos. Proporciona el contraste en AA y AAA.
• Aspecto destacable: su minimalismo estético. La herramienta está diseñada para aquellos que desean resultados rápidos sin ningún tipo de complicación.

Plug & play

Figma se ha consolidado como unaherramienta clave en el diseño de interfaces accesibles para UI/UX. Su amplio ecosistema de plugins permite optimizar la creación de diseños inclusivos, gestionando el contraste de colores, la legibilidad del texto y el cumplimiento de directrices de accesibilidad. Estos plugins son esenciales para asegurar que tu diseño no solo sea visualmente atractivo, sino también universalmente accesible.

La vida es corta. Usa plugins

Contrast es un plugin de Figma enfocado en la verificación rápida y sencilla de los niveles de contraste en tus diseños. Su interfaz intuitiva permite comprobar de inmediato si los colores utilizados cumplen con las directrices de accesibilidad WCAG, garantizando que el texto y otros elementos visuales sean legibles para todo el mundo. Ideal para diseñadores/as que necesitan una herramienta ágil y gratuita para asegurar la accesibilidad en términos de color.

• Control de contraste: está enfocado exclusivamente en el contraste de colores. Aunque es muy efectivo en esta tarea, además ofrece la opción Scan, que permite hacer un check de varios frames de Figma simultáneamente y proporciona un mini informe de errores, sobre qué componente no es accesible.
• Simplicidad de uso: muy fácil de integrar en el flujo de trabajo de Figma, permitiendo a los usuarios y usuarias realizar comprobaciones rápidas sin necesidad de salir de la plataforma.
• Feedback inmediato: proporciona información inmediata sobre si los contrastes cumplen con los niveles AA o AAA, lo que facilita hacer ajustes en tiempo real. Y también ofrece una opción para texto en diferentes tamaños.

Just plugin it

Stark es un plugin integral que va más allá del control de contraste, ofreciendo un conjunto completo de herramientas para evaluar la accesibilidad de tus diseños. Stark es perfecto para diseñadores/as que buscan una solución robusta y profesional para crear interfaces accesibles y optimizadas para todo el mundo..

• Control de contraste: además de verificar el contraste, ofrece herramientas para evaluar la accesibilidad general del diseño, como simuladores de daltonismo y análisis de diseño para diferentes tipos de usuarios/as. Es una solución más completa para un enfoque integral.
• Simplicidad de uso: la interfaz es más completa y sólida, con varias opciones para diferentes tipos de pruebas de accesibilidad, lo que puede hacer que la experiencia sea un poco más compleja pero también más rica y detallada en funciones.
• Feedback inmediato: proporciona información inmediata sobre si los contrastes cumplen con los niveles AA o AAA, lo que facilita hacer ajustes en tiempo real. Y también ofrece una opción para texto en diferentes tamaños. Dispone de opciones de pago que desbloquean funcionalidades avanzadas, como análisis más detallados.

Conclusiones

El buen diseño es como una fiesta a la que todo el mundo está invitado y la accesibilidad es la clave que abre la puerta. Crear interfaces accesibles no es solo una responsabilidad, sino una oportunidad para diseñar experiencias inclusivas. Integrar la accesibilidad en el diseño de UI/UX, apoyándose en herramientas web y plugins como los que ofrece Figma, no solo mejora la usabilidad, sino que también enriquece la experiencia de los usuarios/as.

Y recuerda, un buen diseño no solo tiene que ser atractivo; debe ser accesible para todo el mundo.
¡Hagamos del diseño un lugar donde nadie quede fuera!