Color y contraste

Uso del color

Evita utilizar únicamente el color como medio visual para transmitir una información o distinguir un elemento.

Un ejemplo son los enlaces. Estéticamente pueden quedar mejor al diferenciarlos solo mediante el color, pero son más fáciles de distinguir si están subrayados o destacados en negrita, especialmente dentro de bloques de texto.

Párrafo con un enlace con color distinto del texto.
Párrafo con un enlace con color distinto del texto y subrayado.
El primer párrafo tiene un enlace diferenciado únicamente mediante el color, mientras que en el segundo párrafo el enlace está además subrayado.

Comprobación del color

Para eliminar el color de un sitio web podemos:

  • Usar una extensión como Grayscale the Web para Chrome.
  • O ir al inspector de elementos del navegador, seleccionar la etiqueta body y añadir el siguiente estilo filter: grayscale(100%).

Toda la página aparecerá en tonos de gris y podrás comprobar si los elementos se distinguen con facilidad y transmiten la misma información que mediante el color.

Contraste

Utiliza suficiente contraste entre el contenido del primer plano y el fondo.

El contenido del primer plano de una página web suele ser generalmente texto, pero también pueden ser componentes de la interfaz de usuario o elementos gráficos.

Las Pautas de Accesibilidad para el Contenido Web recomiendan las siguientes relaciones mínimas de contraste:

Tipo de contenido Nivel AA Nivel AAA
Cuerpo de texto 4.5:1 7:1
Texto de gran tamaño 3:1 4.5:1
Componentes activos de la interfaz y objetos gráficos 3:1 No definido

Nota: El texto de gran tamaño se refiere a texto de al menos 18 puntos o 14 puntos en negrita.

Comprobación del contraste

Para comprobar el contraste tenemos varias opciones:

  • Utilizar una herramienta como Contrast Checker de WebAIM, indicando el color del contenido del primer plano y el del fondo.
  • Usar una extensión del navegador como WCAG Color contrast checker para Chrome.
  • Utilizar el inspector de elementos del navegador. En el caso de Chrome, haciendo clic sobre el selector de elementos y situándonos sobre un elemento, se abre una ventana con información que incluye el contraste.

Criterios de conformidad WCAG 2.1