Accesibilidad web: Contrastes de color

Introducción

Uno de los principales problemas que hay de accesibilidad web son los contrastes.

Hay muchas personas que tienen problemas para leer en pantalla, por lo que, si no se tienen en cuenta los problemas de contraste pueden dificultar la legibilidad y ocasiona un problema de accesibilidad.

Accesibilidad web: contrastes de color

Contrastes

Si nos remitimos a las WCAG existen cuatro criterios que nos permiten trabajar el color y los contrastes.

Por un lado, tenemos:
El criterio 1.4.1 Uso del color.

  • «El color no es el único medio para transmitir la información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

Por otro lado tenemos el criterio 1.4.3 Contraste mínimo.

  • «La presentación visual de texto e imágenes de texto tiene una relación de contraste de al menos 4.5:1»
  • Texto grande: «El texto a gran escala y las imágenes de texto a gran escala tienen una relación de contraste de al menos 3: 1;

Por último está el criterio 1.4.6. Contraste mejorado.

  • La presentación visual de texto e imágenes de texto tiene una relación de contraste de, al menos, 7:1, excepto en los siguientes casos.
  • Textos grandes: Los textos de gran tamaño y las imágenes de texto de gran tamaño tienen una relación de contraste de, al menos, 4.5:1.

Hay personas que tienen sensibilidad reducida al contraste. Esto implica que si no se le pone un contrasto alto, puede originar un problema de lectura y por lo tanto de accesibilidad. Y otras personas que tienen baja visión, que requieren un contraste de blanco sobre negro.

También hay personas con daltonismo, las cuales sufren ceguera al color, especialmente al rojo y verde. A las personas con dislexia les molesta la luz, por lo que se recomienda un blanco que no sea puro, pero siempre tiene que cumplir lo que establece la normativa de accesibilidad.

¿Qué quiero decir con esto?

Muy sencillo. Hay que utilizar contrastes altos. Bien, hasta ahí todo claro.

Código hexadecimal de colores. Por ejemplo:

  • Negro puro es #000000
  • Blanco puro es #ffffff

Es tan sencillo como ir probando y comprobando que cumple el ratio, tanto el máximo como el mínimo que establece las WCAG.

Algunos de los contrastes de los que aquí hablo se pueden poner también a la inversa. Y jugar con ellos sin problema. Todos los rangos elegidos son ejemplos, no necesariamente hay que usar sólo los colores propuestos.

Todo esto que voy a contar a partir de ahora sobre la dislexia lo cuento a modo de información. Es para entender mejor a las personas con dislexia, pero no es mi caso.

  • El gris fuerte sobre blanco también vale porque no es el contraste fuerte de blanco sobre negro, que es más dañino para la vista. 
  • Y un gris claro sobre negro.
  • O un color crema sobre negro. El caso es rebajar la luz de una manera u otra, o bien de un lado o bien de otro.

Y más teniendo en cuenta que estamos una población envecejecida y como consecuencia de la edad surgen más problemas.

También se puede dar el caso de que la persona en cuestión quiera imprimir el documento, por lo que tiene que tener buena legibilidad en papel, un contraste blanco sobre negro.

Por otra parte, el gris fuerte sobre blanco es muy legible y más cómodo para cuidarnos la vista. Esto se puede aplicar (si queremos), como opción de lectura de alto contraste para móvil y ordenador. Se puede usar como una opción más de accesibilidad para quien le pueda servir.

O también con la posibilidad de tener las letras o palabras del teclado predictivo en móvil en celeste. Es otra buena opción.

Mi intención es meterlos a todos, sin distinción.

Diferentes tipos de contrastes y su explicación.

Vamos a empezar a emprezar con contrastes altos y buenos: aquí tenemos un blanco sobre negro. Este contraste es bueno para las personas con baja visión y les ayuda a que el documento sea legible para ellos.

Contraste bueno: blanco sobre negro sobre negro

Como podemos observar este es un contraste alto, entre un blanco y un gris fuerte. Sólo para algunas zonas de la web, como el pie de página

buen contraste: gris fuerte y blanco

Tanto un contraste como el otro se puede poner perfectamente.

Otro tipo de contraste bueno para la dislexia sería gris claro sobre negro:

Contraste bueno: gris claro sobre negro

Otro tipo de contraste alto sería un negro con la tipografía de color naranja.

contraste bueno: negro y naranja

Otro contraste más: Color crema sobre negro. Este contraste es bueno también para la dislexia.

Contraste bueno: crema sobre negro

Otro contraste de color que cumple las WCAG. El amarillo y el negro. Solo esto. Un daltónico un amarillo sobre blanco no lo percibe, y los que tenemos visión normal tampoco, sobre todo, por legibilidad.

Para las personas con ceguera al color, como los daltónicos, se recomienda un color intermedio.

Contraste bueno: amarillo sobre negro.

Otro más: Buen contraste ente el color celeste y negro.

Accesibilidad web: contraste bueno de celeste y negro

Otro ejemplo más sería: Un blanco y el violeta. Los daltónicos perciben el lila y el azul más o menos igual, aunque tienen su propia paleta de colores.

Violeta: #800080

Blanco: #ffffff

Contraste bueno: Blanco no puro y lila

 

O entre un azul oscuro y blanco. Este es un buen contraste porque el celeste sobre blanco no se ve, y es mejor un tono intermedio, o un poco más oscuro, como en este caso. Si le ponemos un celeste casi no lo perciben. El azul puro también lo perciben y es perfectamente accesible para un daltónico.

Accesibilidad web: azul no puro y blanco no puro

Buen contraste entre el verde claro y el negro.

Contraste bueno de colores: el verde claro y el negro

Ejemplos de mal contraste

Otro ejemplo, pero esta vez con un mal contraste sería este. De este contraste lo que quiero decir es que no se pude mezclar dos colores claros porque no se ven.

contraste entre azul claro y gris

Además, si os fijáis bien la legibilidad no es buena.

Lo mismo ocurre con este contraste de color entre dos colores claros. Y al revés tampoco se ve, es decir con fondo celeste y la letra blanca. No necesariamente tiene que ser así. Puede ser un poco más fuerte, porque un celeste de por sí, no se percibe. Y para los daltónicos son un problema porque tienen ceguera a los colores claros.

Mal contraste de color: Celeste y blanco no puro

O este otro.

Accesibilidad web: mal contraste entre gris y blanco

Antes de acabar, hay que mencionar el criterio 1.4.11 que hace referencia al contraste de color con imágenes, es decir, tratar los colores de la imagen y su contraste.
La presentación visual tiene una relación de contraste de al menos 3:1 contra el color o los colores adyacentes:

Componentes de la interfaz de usuario: información visual requerida para identificar los componentes y estados de la interfaz de usuario, excepto los componentes inactivos o donde el aspecto del componente está determinado por el agente del usuario y no es modificado por el autor. Por ejemplo, los botones de redes sociales o los checkboxs.

accesibilidad web: contraste delos componentes de la interfaz de usuario

Otro ejemplo más:

Accesibilidad web: Componentes de la interfaz

Diferente es si cuando se da la información no precisa sólo de color, sino que se le pone el nombre de la red social en cuestión. Ahí ya no requiere de contraste.

Objetos gráficos: partes de gráficos necesarios para comprender el contenido, excepto cuando una presentación particular de gráficos es esencial para la información que se transmite. Por ejemplo, algún símbolo de alerta.

Contrastes: Símbolo de alerta

Un problema muy común es cuando intentamos navegar con el teclado y el foco no se ve, no se aprecia bien. No porque no esté puesto, sino puede darse el caso de que no haya buen contraste entre el fondo y el color del foco.

mal contraste entre el fondo y el color del color

También se puede usar la herramienta de Lea Verou para calcular la ratio, y se puede probar con diferentes tipografías, cambiando los colores y contrastes, y usar hsla, rgba, y código hexadecimal.

En definitiva, trabajar con el contraste es cuestión de sentido común y lógica. Hay que utilizar siempre contrastes altos.

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *