Plugins de accesibilidad para Figma

En 2025, la accesibilidad forma parte del proceso de diseño. Si quieres hacer un diseño completo, consistente y escalable debes incorporar los principios de accesibilidad desde el primer momento, creando productos digitales que sean usables para todas las personas. Figma, como herramienta líder en diseño, ofrece plugins que facilitan esta tarea.

En este artículo, te voy a mostrar 3 plugins de accesibilidad que estoy seguro te facilitarán la vida en tu día a día.

1. Plugin Color Contrast Grid

Vamos a comenzar por el tema más clásico cuando hablamos de accesibilidad en el diseño: el contraste de color. Generar una paleta de colores accesibles puede ser, a veces, un verdadero dolor de cabeza, especialmente cuando debemos ajustarnos estrictamente a los requisitos de una identidad de marca. Por suerte, Color Contrast Grid es una herramienta que te va a solucionar la vida en este sentido.

Color Contrast Grid muestra todas las combinaciones de contraste de tu paleta de colores en un solo lugar. La matriz generada indica el ratio exacto entre cada par de colores y señala claramente si cumplen con los estándares de las WCAG (Web Content Accessibility Guidelines) en sus niveles AA o AAA, tanto para textos pequeños como grandes. Esto facilita enormemente la tarea, ya que en vez de evaluar cada combinación individualmente, tendrás una visión completa de todas las posibilidades.

Los resultados pueden exportarse como handoff para el equipo de desarrollo, haciendo que las decisiones de accesibilidad se mantengan consistentes durante todo el proyecto.

¿Quieres ver un ejemplo práctico de cómo funciona? Te muestro cómo generar la paleta de color de weAAAre:

2. Plugin A11y Focus Order

¿Ya tienes cubierto el tema del contraste? ¿Has visto qué fácil ha sido y sin tirarte horas comparando cada combinación de color? Ahora, vamos con otro tema que para muchos diseñadores es un gran olvidado: el orden del foco. A veces, se olvida que la experiencia de usuario (UX) debe cubrir a todos nuestros posibles usuarios, y esto incluye a las personas que navegan con teclado o lectores de pantalla.

A11y Focus Order te permite añadir anotaciones sobre el orden de foco directamente en Figma. Este plugin soluciona ese momento - maravilloso - en el que entregas un diseño y luego el desarrollador implementa un orden de navegación que no tiene sentido para el usuario (el que le da la gana).

Con este plugin puedes numerar cada elemento interactivo, crear conjuntos múltiples de anotaciones y organizarlo todo en un grupo que puedes activar o desactivar según necesites.

Si estás cansado de explicar a los desarrolladores cómo debería ser el recorrido del foco en tus diseños, este plugin te va a ahorrar horas de discusiones y correcciones. Es simple, directo y resuelve un problema real que todos hemos tenido alguna vez.

¿Quieres ver un ejemplo práctico de cómo funciona? Te muestro un caso rápido en una landing page:

3. Plugin Stark

Si hay un plugin de accesibilidad que se ha convertido en referencia dentro de Figma, ese es Stark. Va bastante más allá de ser una simple herramienta de contraste y se posiciona como una suite completa para hacer tus diseños accesibles.

Lo que me encanta de Stark es que integra varias funcionalidades esenciales en un solo lugar. Puedes comprobar el contraste entre dos colores, simular diferentes tipos de daltonismo, verificar el tamaño de tus textos para asegurar su legibilidad, y hasta realizar pruebas de enfoque para identificar posibles problemas de jerarquía visual.

La mejor parte que creo que tiene Stark son las sugerencias que proporciona. Por ejemplo, en el apartado de contraste de color te sugiere alternativas cuando tus colores no pasan la prueba. Esto te ahorra muchísimo tiempo en el proceso de ajuste y refinamiento.

La versión gratuita te da acceso a funcionalidades básicas. La versión Pro incluye todas las funcionalidades de IA: escaneo automático e identificación de problemas, generación de textos alternativos (aunque el contexto no lo determina del todo bien), sugerencias de tamaños tipográficos, etc.

¿Quieres ver cómo funciona Stark Pro y qué nos dan sus funcionalidades de IA? En este caso, tendrás que verlo en el taller Plugins de accesibilidad para Figma(abre nueva pestaña) que vamos a realizar hoy , 14 de marzo a las 17:00 hora España y 13:00 hora Argentina.

¿Te has perdido el taller? No podemos hacer nada, los talleres son únicos y se hacen en directo en una fecha y una hora en concreto.

Referencias

• Color Contrast Grid: https://www.figma.com/community/plugin/1039910246084959068/color-contrast-grid(abre nueva pestaña)
• A11y Focus Order: https://www.figma.com/community/plugin/731310036968334777/a11y-focus-order(abre nueva pestaña)
• Stark: https://www.figma.com/community/plugin/732603254453395948/stark-contrast-accessibility-checker(abre nueva pestaña)