Motivación y Contexto
En este post publicado anteriormente en el blog de Federico Toledo estuvimos abordado como trabajar con la versión Colour Contrast Analyser que se tenía disponible hace un tiempo.
Como la tecnología continúa avanzando, el año pasado la W3C lanzó una versión a corto plazo llamada WCAG 2.1 donde se incluyeron nuevos criterios a evaluar principalmente enfocados a las aplicaciones mobile.
The Paciello Group lanza una nueva versión de la aplicación Colour Contrast Analyser adaptada a los nuevos criterios de la WCAG 2.1 y se realizan varias actualizaciones a la interfaz de la herramienta. Si es la primera vez que usas la herramienta o aún sigues usando la versión anterior te invito a que continúes leyendo este post para actualizarte con todo las novedades que nos trae esta nueva versión.
Ajustándonos a las normas propuestas por la WCAG 2.1
Para prevenir estos errores y conocer si cumplimos o no con los requisitos de contraste, la WCAG 2.1 nos plantea que para cumplir con el nivel AA es requerido un relación de contraste** de 4.5:1 para texto normal y 3:1 para texto grande.
Para el nivel AAA se requiere un relación de contraste de 7:1 para texto normal y 4.5:1 para texto grande.
El texto grande se define como 14 puntos (típicamente 18.66px) en negrita o más grande, o 18 puntos (típicamente 24px) o mayor.** La relación entre la intensidad luminosa del color más brillante y la del color más oscuro que un sistema es capaz de producir.
Colour Contrast Analyser
“Colour Contrast Analyser” es una herramienta que te ayudará a determinar la legibilidad del texto y el contraste de los elementos visuales, además te permitirá comprobar los controles gráficos y los indicadores visuales.
Esta versión se encuentra disponible para Windows y Mac. Presenta múltiples lenguajes incluyendo Inglés, Francés, Holandés, Italiano, Alemán, Hindi, Coreano y Chino tradicional. Es muy importante aclarar que la funcionalidad para la simulación visual se encuentra solo disponible para la versión de Windows.
Esta herramienta presenta dos funcionalidades importantes:
- Evaluación de cumple/no cumple frente a los criterios de éxito de contraste de colores definidos en la WCAG 2.1.
- Simulación de ciertas condiciones visuales, incluyendo el daltonismo dicromático y cataratas para demostrar cómo las personas con menos de 20/20 de visión perciben el contenido web.
La ventana principal se visualiza de la siguiente forma:
La barra de menú está compuesta por las opciones:
- Colour Contrast Analyser (CCA)
- Edit
- View
- Development
La opción “Colour Contrast Analyser” (CCA) agrupa las siguientes opciones:About CCA: Se especifica el número de versión de la herramientas, los tipos de traducciones que se han realizado y quienes han sido los responsables. Se muestran link externos que te redirigirán hacia la página de Recursos The Parciello Group, a su Github y si deseas reportar un error de la herramienta también podrás realizarlo.
Preferences: Se visualiza la opción para ajustar la precisión de la relación de contraste en 1 o 2 decimales y habilitar la actualización automática. También se muestran las opciones de atajo del teclado para la captura del color del primer plano y del fondo.
Quit CCA: Nos permite cerrar la aplicación desde esa opción.
La opción “Edit” contiene la funcionalidad:
Copy results: Nos permite copiar hacia un documento los resultados obtenidos en la validación de los criterios de la WCAG 2.1 relacionados al contraste de colores.
La opción “View” contiene las siguientes funcionalidades:
Colour blindness simulation: Nos permite conocer la intensidad y cómo perciben los colores las personas con visión monocromática, dicromática y tricromática.
Always on top: Si se encuentra habilitada la aplicación se visualizará en el tope superior de la pantalla, de lo contrario siempre se visualizará en el lugar de la pantalla que fue posicionada por última vez.
Actual size: Nos permite visualizar la herramienta en su tamaño actual en el caso que se haya modificado.
Zoom in: Nos permite ampliar la vista de la aplicación.
Zoom out: Nos permite minimizar la vista de la aplicación.
La opción “Development” contiene las siguientes opciones:
Reload: Nos permite recargar la aplicación.
Open Developer Tools: Nos permite visualizar el código HTML de la aplicación.
La opción “Contrast ratio” nos permite visualizar la relación de luminiscencia relativa de los colores de primer plano y de fondo.
El contraste de colores puede variar desde un mínimo de 1 (cuando los colores de primer plano y de fondo son los mismos) hasta un máximo de 21 (cuando se visualiza los colores negro sobre blanco)
Para conocer si cumplimos o no con los requisitos de contraste, la WCAG 2.1 nos plantea:
Para el nivel AA: Una relación de contraste de 4.5:1 para Texto Normal y 3:1 para Texto Grande***
Para el nivel AAA: Una relación de contraste de 7:1 para Texto Normal y 4.5:1 para Texto Grande***
***El texto grande se define como 14 puntos (típicamente 18.66px) en negrita o más grande, o 18 puntos (típicamente 24px) o mayor.
Las opciones “Foreground colour” y “Background colour” nos permiten visualizar los colores seleccionados del Primer plano y del Fondo.
En ambas opciones se visualiza la lista de nomenclaturas con las que se pueden representar los colores. Las nomenclaturas que se visualizan se mencionan a continuación:
HEX: Compuesto por 3 bytes números hexadecimal (6 dígitos) que representan la intensidad de rojo, verde y azul en el color.
RGB (del inglés Red, Green, Blue): Representa los colores Rojo, Verde y Azul que podrán ajustarlos para crear una combinación de colores específicos.
HSL (del inglés Hue, Saturation, Lightness): Representa el Matiz, Saturación y Luminosidad donde podrán ajustar el valor para modificar la tonalidad del color seleccionado.
HSV (del inglés Hue, Saturation, Value – Matiz, Saturación, Valor), también llamado HSB (Hue, Saturation, Brightness – Matiz, Saturación, Brillo), define un modelo de color en términos de sus componentes.
CSS3 nos permite añadir un canal alfa (de transparencia) al sistema de color RGB.
Esta nueva notación a la que llamaremos RGBa permite gracias a su cuarto canal la posibilidad de indicar la opacidad en tantos por 1, es decir, tomando 0 como la máxima transparencia y 1 como la máxima opacidad.
Al HSL y HSV se le puede añadir también un canal alpha para definir la transparencia del color.
La opción “Ajustes” nos permite sincronizar los valores del color seleccionado y ajustar el tono del color para lograr que se cumpla con los criterios de accesibilidad especificados en la herramienta.
Con esta opción podemos realizar ajustes al color si el mismo no cumple con el nivel de accesibilidad definido y podemos proponer como recomendación el nuevo tono de color que cumple con el nivel que necesitamos cumplir.
La opción “Intercambiar” visualizada en la sección de Foreground colour nos permite intercambiar de posición los colores, quedando visualizado el color seleccionado para el Primer Plano como Fondo y viceversa.
La opción del “Cuentagotas” nos permite capturar el color que estemos seleccionado en nuestra aplicación. El cuentagotas se visualiza con un aro de manera que nos quede visible el color que estemos seleccionando ya que muchas veces se dificulta la selección del color de primer plano.
La opción de “Ayuda” nos permite conocer los formatos soportados por la herramienta y la nomenclatura para cada caso.
En la herramienta se muestra una sección que nos permite visualizar un ejemplo de como se visualizará la combinación de colores para el Primer Plano y Fondo. Esta opción sería de gran utilidad a la hora de armar la paleta de colores de la aplicación de forma que la combinación de los mismo sea legible y cumpla con el nivel de accesibilidad que se desea cumplir.
En la última sección de la herramienta se visualizan los resultados de la WCAG 2.1 obtenidos del análisis entre el contraste de los colores de Primer Plano y Fondo.
En la siguiente imagen se visualiza que todos los criterios de accesibilidad fueron cumplidos correctamente para una combinación de colores negro y blanco.
A continuación se visualiza un ejemplo donde no se cumple con ninguno de los criterios especificados en la herramienta:
Para cada criterio se especifica en la herramienta que se estaría evaluando y que se debe cumplir para que el resultado sea satisfactorio.
Para la evaluación de estos criterios en nuestras aplicaciones debemos tener presente que no presentan un requisito mínimo de contraste:
- Textos grandes: Textos e imágenes grandes que tengan una relación de contraste mínimo de 3:1.
- Textos o imágenes: que son parte de la decoración y no son contenidos significativos con los cuales el usuario interactúa.
- Logotipos: que contengan texto o el nombre de una marca.
Ejemplo de uso de CCA
Veamos el resultado que visualiza la herramienta al seleccionar el color del primer plano
#ABB0B9 y el de fondo #FFFFFF.
Como se ve en la imagen, con los colores seleccionados no cumplen con los requisitos de contraste definidos para los niveles AA y AAA para ambos tipos de texto (normal y grande).
El resultado de Luminosidad indica que la relación de contraste es de 2.2:1 que queda por debajo de lo definido para ambos niveles.
Para el caso del criterio 1.4.11 del nivel AA se estaría tomando en consideración el resultado si los colores que estamos evaluando son parte de los componentes de la interfaz gráfica u objetos gráficos. Existen excepciones para estos casos como son: banderas, fotografías, mapas de calor u otras situaciones que cambiar el color implique un cambio de contexto.
Si nos trazamos cumplir satisfactoriamente con el criterio AA en el contraste de colores para textos normales (menores a 14 puntos) o largos, podemos realizar los ajustes necesarios en lo posible sobre el color que sea más fácil modificar en la aplicación y que no afecte el contraste de otros elementos de la página.
Para este caso se realizaron las modificaciones desde la opción “Ajustes” sobre el color del primer plano, llevando la combinación entre ambos colores a una relación de contraste de 4.7:1.
Para informar al equipo de los incidentes detectados se recomienda adjuntar una captura de pantalla e indicar la URL donde se encuentra el error, además de especificar el valor de la tonalidad del nuevo color sugerido. Para copiar con facilidad los resultados obtenidos para un documento de texto podemos hacer uso de la opción “Copy Results” que se encuentra dentro de la opción “Edit” de la barra de menú. Veamos un ejemplo:
Resultado actual
Foreground: #ABB0B9
Background: #FFFFFF
The contrast ratio is: 2.2:11.4.3 Contrast (Minimum) (AA)Fail for large and regular text1.4.6 Contrast (Enhanced) (AAA)Fail for large and regular text1.4.11 Non-text Contrast (AA)Fail for UI components and graphical objects
Sugerencia mínima
Foreground: #6A7482
Background: #FFFFFF
The contrast ratio is: 4.7:1
1.4.3 Contrast (Minimum) (AA)
Pass for large and regular text
1.4.6 Contrast (Enhanced) (AAA)
Pass for large text only. Fail for regular text
1.4.11 Non-text Contrast (AA)
Pass for UI components and graphical objects
Sugerencia mejorada
Foreground: #595767
Background: #FFFFFF
The contrast ratio is: 7:1
1.4.3 Contrast (Minimum) (AA)
Pass for large and regular text
1.4.6 Contrast (Enhanced) (AAA)
Pass for large and regular text
1.4.11 Non-text Contrast (AA)
Pass for UI components and graphical objects
Cerrando
Con herramientas que nos permitan realizar el análisis podemos beneficiar a muchos usuarios y facilitarles el uso de las aplicaciones con prácticas que están a nuestro alcance. Te invitamos a que utilices esta herramienta en las pruebas que realices a las aplicaciones. Entre todos podemos colaborar con el diseño y desarrollo de aplicaciones más accesibles. Anímate!