Comprobador de contraste de colores
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).
Resultados del cumplimiento de WCAG
Pasa No cumple
Pasa No cumple
Pasa No cumple
Pasa No cumple
Pasa No cumple
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í.
¿Cómo se utiliza?
Compruebe una combinación de colores contrastantes
- Introduzca el color de primer plano y el color de fondo en formato hexadecimal en los campos del formulario. También puede marcarlos en el selector de color.
- Se calculará de forma automática la ratio de contraste de color y podrá descubrir si cumple con las WCAG.
- Envíe el resultado a su equipo de trabajo mediante el botón “Compartir Resultados”.
Descubra si cumple con las Pautas de Accesibilidad
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.
La importancia de comprobar el contraste de colores
El color como factor de accesibilidad
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.
Motivos para comprobar el contraste de color
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.
3 consejos para que sus colores sean accesibles
Asegurar que los colores superan el contraste de color mínimo
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.
No utilizar sólo un color como medio de información
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.
Elementos exentos de cumplir con contraste de colores
Existen varios elementos que no tienen porqué cumplir con las WCAG:
- Logotipos. El texto que forma parte de un logo como el nombre de la marca puede utilizar cualquier color aunque no forme una combinación de colores contrastantes.
- Elementos no visibles de la web.
- Elementos decorativos que no transmiten ninguna información.
- Texto como elemento de una imagen la cual tiene más contenido visual que aporta información relevante.
Preguntas frecuentes
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.
- Contraste no textual (nivel AA). Para elementos de la interfaz de usuario y otros gráficos, se debe cumplir una ratio de al menos 3:1.
- Contraste mínimo (nivel AA).
- La ratio de contraste de color mínima para un texto y un fondo debe ser 4.5:1
- Los títulos y encabezados de tamaño más grande (18 puntos en adelante) tienen que superar la ratio de 3:1.
- Contraste mejorado (nivel AAA).
- Se establece una ratio de 7:1 entre texto y fondo para alcanzar este nivel de conformidad, el más estricto y accesible de todos.
- Los encabezados deben presentar una ratio de 4.5:1.