Press "Enter" to skip to content

¿Cómo usar la herramienta Colour Contrast Analyser?

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.

Lápices de colores
Imagen de Monfocus en Pixabay 

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:

Ventana principal de la herramienta Colour Contrast Analyzer

La barra de menú está compuesta por las opciones:

  • Colour Contrast Analyser (CCA)
  • Edit
  • View
  • Development
Barra de menú principal

La opción “Colour Contrast Analyser” (CCA) agrupa las siguientes opciones:

Opciones de “Colour Contrast Analyser” (CCA)
  • 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:

Opción que permite copiar los resultados

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:

Opciones de View
  • 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.
Simulación de visión
  • 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:

Opción Development
  • 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.

Contrast Ratio

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.

Foreground colour” y “Background colour

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:

lista de nomenclaturas
  • 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.

Ajustes
RGB pantalla

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.

Opción para intercambiar los colores de fondo y primer plano

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.

Cuentagotas

La opción de “Ayuda”  nos permite conocer los formatos soportados por la herramienta y la nomenclatura para cada caso.

Ayuda con información de formatos soportados

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.

Ejemplo de como se visualiza el color de fondo y primer plano

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. 

Resultado de contraste donde todos los criterios se cumplen

A continuación se visualiza un ejemplo donde no se cumple con ninguno de los criterios especificados en la herramienta:

Resultado del contraste donde todos los criterios fallan.

Para cada criterio se especifica que se estaría evaluando y que se debe cumplir para que el resultado sea satisfactorio.

Criterio 1.4.3 Contraste mínimo

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

Veamos el resultado que visualiza la herramienta al seleccionar el color del primer plano y el de fondo.

Ejemplo de resultado obtenido en la evaluación del contraste de colores.

Como se ve en la imagen, con los colores seleccionados no se cumple 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.

Ejemplo donde se define un nuevo contraste de color de fondo para que cumpla con el contraste mínimo definido

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:1

1.4.3 Contrast (Minimum) (AA)

Fail for large and regular text1.4.6 Contrast (Enhanced) (AAA)

Fail for large and regular text

1.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

Notas 
Se agregan las notas que se consideren necesarias para el equipo. 

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!

2 Comments

  1. Juan Carlos
    Juan Carlos 29/04/2020

    Hola Lisandra, buena tarde.

    Un cliente me solicitó usar esta herramienta para los diseños web que hago. Mi pregunta y basada en tu nota es ¿comparar los 2 colores principales del diseño? Un color base o principal y otro color que este presente en el diseño y con esto saber si mi diseño estará en la noma de contraste.

    Gracias y saludos.
    JC

  2. Lisandra Armas
    Lisandra Armas 30/04/2020

    Hola Juan Carlos! Muchas gracias por animarte a enviarnos tu consulta.
    En este caso la herramienta te puede ser muy útil para conocer si la paleta de colores que estás pensando utilizar cumple con los criterios o nivel de conformidad que se estén planteando para el sitio web que estén desarrollando.
    CCA te permite comparar si el color de fondo y el color de primer plano (por ejemplo: texto, imágenes, botones, etc) que serán visualizados en el sitio son compatibles o no.
    Si en alguno de los casos no llega a ser compatibles, puedes ajustar por ejemplo el color del primer plano y buscar una tonalidad de color compatible desde la sección de Ajustes.
    Espero sea de utilidad esta información!
    Saludos!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close Bitnami banner
Bitnami