Trazar estrategias para un diseño web más accesible es crucial para garantizar que todos los usuarios, incluidos aquellos con discapacidades visuales, puedan interactuar con el contenido sin problemas por eso en este artículo me gustaría compartir contigo tres alternativas para diseñar con la accesibilidad en mente.
Para ello al presentarte estas tres alternativas para un diseño más accesible nos enfocaremos precisamente en el color, un aspecto fundamental del diseño. Según Pipi Marquez, hay varios puntos clave a considerar para asegurar que tus diseños sean accesibles.
Una de esas condiciones diferentes
El daltonismo es una condición que afecta la percepción del color por una alteración en los conos receptores del color impidiendo que las personas vean ciertos colores correctamente.
Los tipos más comunes de daltonismo son la protanopía (dificultad para ver el rojo), la deuteranopía y tritanopia (que dificultan ver el verde, rojo y amarillo) y en menor medida la monocromatopia (se ve en escala de grises).
Imaginate dentro de este contexto encontrarte con que en una página web un botón de éxito es verde, un modal amarillo o una alerta es roja. Esto en definitiva limitaría la expresión del mensaje si desde el diseño solo se usa el recurso del color.
Esta es precisamente una problématica ya identificada por instituciones como la Web Content Accessibility Guidelines (WCAG), una institución que ha establecido una serie de guías y parametros que podemos seguir para hacer nuestros diseños más accesibles.
El nivel más básico que han definido es el A y este indica que el color no debe ser el único medio visual para transmitir mensajes, hacer preguntas o distinguir una información.
Tres alternativas para un diseño más accesible
Reforzar con algo más que el color: si decides usar colores semánticos o de acción como rojo, verde y amarillo o tu contenido refiere mucho a color recuerda que hay personas que no los perciben de la misma manera y agrega iconos, la descripción textual de un producto, subrayados, negritas u otros recursos que te permita comunicar de maneras diferentes.
- Ejemplo, en un e-commerce que tiene camisas de muchos colores no te quedes solo con las fotos de producto sino que puedes agregar valor en este sentido resaltando en el nombre el color que tiene la prenda.
Dale la bienvenida a las texturas: en todo lo que sean gráficos, mapas, infografías o información visual en la que tiene mucho peso el color puedes usar patrones como puntos, rayas, rayas diagonales, tríangulos, diferentes grosores o iconos que enriquezcan el significado.
- En ocasiones los juego tienen buenas adaptaciones para personas con daltonismo, puedes tener como referencia por ejemplo la variedad de formas (y no solo colores) que encuentras en Candy Crush o Two Dots para unir elementos.
Ten cuidado con ciertas combinaciones de colores: teniendo en cuenta un dato de Platzi, una plataforma de educación en línea, hay combinaciones que son especialmente problemáticas para las personas con daltonismo.
- Gris y naranja
- Verde y rojo
- Azul y amarillo
Precisamente con esta última información, o tip, en mente este proyecto de @walkiux se puso en jaque, porque dos de esos colores que son con los que hay que tener cuidado son parte fundamental de la paleta, el amarillo y el azul.
Frente a esto mi alternativa fue recurrir a la revisión de la accesibilidad de los hexadecimales de la paleta con la herramienta de Adobe Color como justo recomienda Marquez y es una práctica extendida entre los diseñadores.
Poner a prueba la paleta en esa herramienta fue positivo porque me permitió verificar y conservar parte del branding que había definido.
Y un útlimo tip (quizás un poco suelto) y que no tiene exclusivamente que ver con daltonismo es que en la medida de lo posible siempre uses underline en los links de tu diseño.
Herramientas y Recursos
Utiliza herramientas como simuladores de daltonismo para ello puedes contar con las extensiones de Colorblinding y Funkify (esta abarca otras afecciones también como dislexia, visión borrosa y más) o verificadores de contraste para evaluar tu diseño como Color Brewer que es usado especialmente para mapas. Estas herramientas, además de Adobe Color, te ayudarán a identificar problemas potenciales y ajustar los colores para mejorar la accesibilidad.
Conclusión
Incorporar estas tres alternativas para un diseño más accesible no solo beneficia a las personas con discapacidades visuales, sino que también mejora la experiencia de todos los usuarios. En resumen, asegúrate de considerar el contraste, evitar combinaciones problemáticas y utilizar herramientas para verificar la accesibilidad de tu diseño.
Para más información sobre cómo lograr colores accesibles y diseñar para todos, consulta el artículo completo de Pipi Marquez en Medium aquí.
Y si quieres ampliar el tema del puedes consultar un libro de ensueño sobre elección de colores para diseño que se llama Psicología del color: Cómo actuan los colores sobre los sentimientos y la razón y fue escrito por Eva Heller.
See you letter.👋🏻
