Amigos diseñadores, bienvenidos al mundo pass/fail. “¿Son los colores accesibles?” Si alguna vez te han preguntado esto y no has sabido qué responder, este post creado por Helena Hernández , Head of Design en SlashMobility te ayudará a comprender y cumplir con las directrices de accesibilidad (WCAG) que se aplican principalmente al diseño de interfaz (UI), centrándonos en el color.
Antes de empezar, ¿qué entendemos como app accesible? Una aplicación es accesible cuando puede ser utilizada por el mayor número de usuarios, incluyendo aquellos con baja visión, ceguera, deficiencias auditivas o deficiencias motoras. La accesibilidad permite a las personas con discapacidad percibir e interactuar con las aplicaciones.
A continuación os presentamos unos consejos que te ayudarán a cumplir con las directrices de accesibilidad (WCAG) referentes a las pautas SC 1.4.1 Uso del color, SC1.4.6 y SC1.4.3 contraste AA y AAA.
COLORES ACCESIBLES
No utilices el color como el único medio visual para transmitir información, para indicar una acción o para distinguir un elemento de otro. Debemos de tener en cuenta a las personas con discapacidades visuales como los usuarios con ceguera de color o daltonismo afecta aproximadamente a 1 de cada 12 hombres y 1 de cada 200 mujeres en el mundo.
Hay diferentes tipos de daltonismo:carencia a la percepción del verde, del rojo y del azul o el daltonismo más crónico (acromatopsia), con el que sólo se perciben los colores en tonalidades de grises (1 de cada 100.000 personas).
En la siguiente imagen, vemos un claro ejemplo de cómo ven los usuarios con daltonismo un login o cualquier formulario. En este caso, el feedback que recibe el usuario cuando un campo tiene algún error o está correcto sólo se indica mediante el color. FAIL!
Una solución simple y efectiva para tener un formulario visualmente accesible es notificar al usuario sobre el problema con iconografía y mensajes que ayuden a indicar, no sólo que algo ha ido mal, sino qué campo es el que contiene el error.
CONTRASTE VISUAL
Asegúrate de que haya suficiente contraste entre el texto y el fondo. Los usuarios con discapacidades visuales tienen dificultades para leer los textos que no contrastan con el fondo lo que puede empeorar si la persona tiene daltonismo ya que para ellos se disminuye aún más el contraste.
Si proporcionamos a nuestros usuarios un mínimo contraste de luminosidad entre el texto y fondo favorecemos la legibilidad de los textos de nuestra app para los usuarios con baja visión, daltonismo o empeoramiento de la visión.
Según las WCAG, la relación de contraste entre el texto y el fondo debe ser, al menos, de 4.5:1. Si la fuente es grande (24 px regular / 18 px bold o más) el mínimo se reduce a 3:1.
Para otras discapacidades visuales como la ceguera o la baja visión hay diversas herramientas de apoyo incluidas en los dispositivos tanto en iOS como en Android, estos son el lector de pantalla, el magnificador, modo de alto contraste, etc. Cuando se trata de ceguera, se recurre al lector de pantalla. Esta herramienta, tal como indica su propio nombre, es un software que interpreta el contenido que la pantalla muestra mediante voz, iconos o salida braille. Para los casos de visión baja, también existe el magnificador de pantalla. Éste es un sistema de ampliación que permite visualizar el contenido de la pantalla mediante el aumento de su tamaño.
HERRAMIENTAS
Tal vez estés pensando que la teoría es fácil, pero que cuando nos ponemos manos a la obra, ¿de dónde lo sacamos? No te preocupes: en Slashmobility llevamos tiempo aplicando estas directrices y te presentamos aquí las herramientas que usamos para probar la accesibilidad de nuestras aplicaciones.
- Color Safe http://colorsafe.co/
- Colour Contrast Analyser ( descargar)
- Google Test de Accesibilidad (descargar)
- Guidelines de accesibilidad según plataforma: Android & iOS
