Una página web se caracteriza por utilizar imágenes, texto y elementos con colores llamativos para captar la atención del usuario. En la mayoría de las ocasiones, se utilizarán los colores corporativos de la marca para reforzar la imagen de la empresa y facilitar su reconocimiento aunque, quizá, se produzca una falta de contraste de colores que afecte a la accesibilidad.
Es importante tener en cuenta que algunas personas no pueden leer con facilidad los contenidos o distinguir los elementos de una imagen si no se utilizan colores contrastantes. Por ello, es tan necesario el uso del Comprobador de contraste de colores y asegurar que se cumplen las Pautas de Accesibilidad para el Contenido Web (WCAG en inglés).
Ratio de contraste
21.00 : 1
Resultados del cumplimiento de WCAG
Pasa No cumple
Ejemplo de texto grande
Ejemplo de texto normal. Experimenta con la configuración de la página para ver el resultado aquí.
En la sección Resultados del cumplimiento de las WCAG se muestran los niveles AA y AAA que proponen estas pautas para que un sitio web sea accesible. El resultado AAA es el mayor nivel de accesibilidad y el más estricto y, para poder cumplirlo, antes se debe cumplir con AA.
Uno de los pilares del diseño web es el uso del color, también se aplica a la publicidad, al cine, imagen de marca, etc. Además, el color es un punto clave para la accesibilidad si hacemos un buen uso de él, por ejemplo, sabiendo qué colores confunden los daltónicos y evitando usar esas combinaciones o comprobando que sean colores contrastantes para que se comprenda la información.
Si la paleta de colores de nuestra página web cumple con las Pautas de Accesibilidad, estaremos permitiendo a un mayor número de personas el acceso a la información y, no solo a personas con discapacidad visual, también a personas mayores o a quien necesite leer texto en un lugar con mucha luminosidad. El Comprobador de contraste de colores es la mejor herramienta para cumplir con las WCAG y disponer de una página web más inclusiva.
El nivel AA de las Pautas de Accesibilidad establecen una ratio mínima de 4.5 sobre 1 para garantizar suficiente contraste de luminosidad entre dos colores. Si los colores seleccionados cumplen con un contraste claro-oscuro por encima de este valor, el contenido será mucho más fácil de leer por cualquier persona.
Si aplicamos un único color para transmitir información es probable que muchas personas con daltonismo no detecten ese punto clave. Es importante conocer qué colores confunden los daltónicos y acompañar al color con otra alternativa, por ejemplo, en un formulario donde un campo es incorrecto se puede incluir un icono o un mensaje que indique el tipo de error.
Existen varios elementos que no tienen porqué cumplir con las WCAG:
El contraste de luminosidad entre un color de fondo y uno de primer plano se expresa mediante una ratio. Por ejemplo, una ratio de 100:1 significa que el color más claro lo es 100 veces más que el más oscuro, por ello también se conoce como contraste claro-oscuro. El Comprobador de contraste de colores le ayudará a utilizar colores con diferencia de luminosidad en su web.
Se deben evitar las combinaciones rojo-verde y azul-amarillo ya que existen tipos de daltonismo que provocan dificultades para percibir estos colores. Lo ideal es combinar fondos y textos con suficiente contraste claro-oscuro, además de acompañar la información con otro elemento que no sea el color.
Solicite una demostración de UserWay
Compruebe lo fácil que es cumplir la normativa ADA y WCAG 2.1 AA con las soluciones de accesibilidad líderes del mercado de UserWay
