Cuando hablamos de accesibilidad, a todos los que trabajan como diseñadores les encanta hablar sobre colores. Pero, irónicamente, solo unos pocos entienden cómo hacer que realmente sean accesibles.
En este video, enumeraré algunos puntos importantes para trabajar con colores de manera accesible y también proporcionaré algunos consejos para evitar errores comunes que ocurren a medida que el equipo crece y se escala el producto.
〰️
➽ Material de apoyo:
〰️
➽ Descripción del Video:
El fondo parece papel. A lo largo de la narrativa, hay algunos textos e imágenes animadas, que brindan apoyo visual al discurso. Además, hay algunas frases en el video, denominadas como “Consejos de Mari”. No todas fueron mencionadas en el audio, porque el video sería demasiado largo. Dado eso, enumeraré todos los consejos:
- Para evitar implementaciones, recuerda documentar todas las combinaciones probadas y aprobadas.
- ¿Viste lo difícil que es notar la diferencia solo usando colores? Esto perjudica la experiencia para personas con Acromatopsia y personas con discapacidades cognitivas… Uso Colorblindly para hacer esta prueba (enlace en la descripción). En este momento, hay algunas imágenes que comparan la visualización normal y en escala de grises para un componente de pestaña, usando solo colores y otro color + subrayado.
- Diseñar productos digitales no es un desfile de moda para presentar las cosas más raras. ¡La interfaz debe ser simple y fácil de usar, como tu ropa de trabajar desde casa! Si quieres expresar tu vena artística, busca un pasatiempo en su lugar. Aparte de esto, hay una foto de un modelo extravagante y la frase: “¡Nadie usa esto en los días laborales!”
- Antes de crear miles de configuraciones internas, haz lo básico y hazlo bien. Asegúrate de que todas las opciones que la persona ha configurado en el dispositivo o navegador estén funcionando correctamente. Más detalles en el material de apoyo.
〰️
➽ Herramientas para ayudar en las pruebas de accesibilidad de colores:
〰️
➽ Recomendaciones relacionadas con los colores:
WCAG, Entendiendo el Criterio de Éxito 1.4.1: Uso del Color:
WCAG, Entendiendo el Criterio de Éxito 1.4.6: Contraste (Mejorado):
GAIA, Recomendación 1 - Vocabulario Visual y Textual:
Gaia, Recomendación 5 - Personalización:
〰️
➽ Tarea:
Revisa las pantallas de tu último proyecto y busca errores relacionados con la accesibilidad de colores, y corrige al menos uno de ellos.
Siéntete libre de reproducir este video en una reunión de oficina para iniciar una discusión sobre este tema hoy.
〰️
Gracias por ver. Espero que este video te haya sido útil.