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.

Nota: Para eliminar el color de un sitio web puedes usar una extensión como Grayscale the Web para Chrome. 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. Los navegadores actuales incluyen información de contraste entre el color del texto y el fondo.