Saltar la navegación

Contraste

 

Las imágenes incluidas deben poseer un contraste suficiente entre los colores de fondo y primer plano. Es necesario asegurar un contraste suficiente tanto en el texto mostrado en las imágenes como en aquellos contenidos gráficos cuya información visual es necesaria para su identificación o comprensión como pueden ser los iconos, diagramas, gráficas, infografías, etc. Una excepción son los logos, NO hay que validar su contraste.

Por tanto, a modo de resumen, NO hay que validar el contraste de las imágenes decorativas NI de logos. Solo HAY que validar el contraste de las imágenes informativas y solo aquella parte de la imagen que transmita información, esto es el texto de la imagen y los iconos, diagramas, gráficas... que transmitan información; no habría que validar el contraste de un icono que no transmita información.

Ponte a prueba

Pregunta 1

PREGUNTA 1

¿Consideras que habría que validar el contraste de la siguiente imagen? (La imagen es el botón buscar de un buscador)

Caja de texto de un buscador con un botón con una imagen de una lupa

Pregunta 2

PREGUNTA 2

¿Consideras que habría que validar el contraste del texto de la siguiente imagen (el color rojo del texto "Tu opinión es importante" con el color blanco de fondo y el color blanco del texto "Encuesta" con el color azul del fondo)?

Imagen con el texto "Tu opinión es importante" y un dibujo de un ordenador

Pregunta 3

PREGUNTA 3

¿Consideras que habría que validar el contraste de la imagen del ordenador (el gris del ordenador con el fondo blanco de la imagen)?

Imagen con el texto "Tu opinión es importante" y una imagen de un ordenador

Pregunta 4

PREGUNTA 4

¿Consideras que hay que validar el contraste de la siguiente imagen decorativa?

Sección participación con una imagen decorativa de un mar y una barca

Pregunta 5

PREGUNTA 5

La siguiente imagen es el logo del Portal de Administración Electrónica. ¿Consideras que hay que validar el contraste del color blanco del texto y el color azul del fondo?

Logotipo del PAe

Pregunta 6

PREGUNTA 6

En la siguiente gráfica ¿consideras que hay que validar el contraste del color azul de la línea con el color blanco del fondo?

Gráfica con una línea azul sobre fondo blanco

Pregunta 7

PREGUNTA 7

En la siguiente gráfica ¿consideras que hay que validar el contraste del color gris de las líneas con el color blanco del fondo?

Gráfica con números en el eje de la X y de la Y y con líneas horizontales

Para profundizar: Verificar el Contraste

Para verificar el contraste de las imágenes se puede utilizar la aplicación Colour Contrast Analyser. Esta herramienta permite seleccionar dos colores utilizados en una imagen para ver su contraste. Una vez escogidos dos colores nos dará el contraste o ratio de luminosidad existente entre ambos. Como ya hemos comentado anteriormente hay que validar el contraste del texto y el contraste de los objetos gráficos que trasmiten información. La herramienta además de indicar el contraste, también indica si cumple o no el criterio del contraste en función de si los colores seleccionados son texto o son objetos gráficos.

Para elegir los colores a validar, hay que elegir el color de primer plano y el color de fondo con la pipeta. Al seleccionar el color con la pipeta, podéis comprobar que el tono del color varía cuando nos posicionamos en la parte central o en el borde de la zona de la que queremos seleccionar el color; habría que elegir el color correspondiente con la parte central de la imagen, que suele ser el color más intenso.

Para verificar el contraste del texto, el ratio exigido es diferente en función del tamaño del texto:

  • Para texto normal (texto inferior a 18 puntos o texto inferior a 14 puntos y negrita): el contraste debe ser mayor o igual a 4.5:1.
  • Para texto grande (texto igual o superior a 18 puntos o texto igual o superior a 14 puntos y negrita): el contraste debe ser mayor o igual a 3:1.

A continuación mostramos un ejemplo del texto de una misma imagen en la que el texto se ha representado en diferentes tamaños para que podáis haceros una idea de lo que sería texto normal y lo que sería texto grande.

Por tanto, para verificar que el color del texto mostrado en una imagen tiene un contraste suficiente respecto al color de fondo de la imagen, habría que elegir con la pipeta ambos colores (seleccionando como hemos indicado previamente el color de la parte más central) y comprobar el contraste indicado por la herramienta; como ya hemos comentado anteriormente la herramienta también indica si se cumple el contraste para texto normal ("regular text") y para texto grande "large text").

Os animamos a realizar el siguiente ejemplo. Vamos a validar el contraste del texto "newsletter" de la siguiente imagen.

Imagen con la palabra newsletter en blanco sobre fondo azul

Habría que validar el contraste del entre el color azul del fondo y el blanco del texto. La herramienta indica que el ratio del contraste es 5.1:1; también indica que cuando estos colores se utilizan en texto, el contraste cumple para texto normal y para texto grande. El resultado de la herramienta es el siguiente.

Por otro lado, para verificar el contraste de los objetos gráficos, el ratio exigido debe ser mayor o igual a 3:1.

Para verificar el contraste de los objetos gráficos, habría que elegir con la pipeta los colores a seleccionar (seleccionando como hemos indicado previamente el color de la parte más central) y comprobar el contraste indicado por la herramienta; como ya hemos comentado anteriormente la herramienta también indica si se cumple el contraste para objetos gráficas.

Os animamos a realizar el siguiente ejemplo. Vamos a validar el contraste de la imagen de la lupa Lupa blanca sobre fondo verde. El resultado de la herramienta Analyser Contrast Checker es 2.6:1 y también indica que el contraste no es suficiente para imágenes gráficas.

Texto de una misma imagen en diferentes formatos (18 puntos, 14 puntos y negrita, 24 puntos y 12 puntos)