Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Consejos CSS para una mejor accesibilidad al color y al contraste

by
Length:MediumLanguages:

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

La accesibilidad del color es una parte importante de la accesibilidad visual. Las personas con diversos tipos de discapacidades visuales, como daltonismo y baja visión, perciben los colores de diferentes maneras. Como resultado, el significado de los colores se vuelve menos elocuente e incluso se pierde por completo para los usuarios con discapacidades visuales.

Aunque la mayoría de los artículos sobre accesibilidad del color dan consejos de diseño sobre como cómo elegir un esquema de color accesible, aquí seguiremos un enfoque distinto. En concreto, vamos a buscar un par de consejos CSS que puedes utilizar para mejorar la accesibilidad del color y el contraste. Sin embargo, si estás interesado en la perspectiva del diseño, echa también un vistazo a nuestro tutorial sobre cómo diseñar para las discapacidades visuales escrito por Graeme Fulton.

Para entender cómo perciben los colores las personas afectadas por discapacidades visuales, puedes probar cualquier color con el simulador de daltonismo de ColorHexa. Por ejemplo, aquí tienes cómo es percibido el color rojo (#ff0000) por personas con monocromía, dicromacia y tricromacia:

Color Blindness Simulator by ColorHexa

1. Comprueba la legibilidad del texto

Aunque el uso de colores de alto contraste es un objetivo general del diseño accesible, es especialmente importante comprobar la legibilidad del texto. Esto significa que el texto, en el primer plano, y el fondo detrás de él necesitan tener una relación de contraste de:

  • al menos 4.5:1 para texto normal y 3:1 para texto grande para cumplir con los estándares de nivel AA de Web Content Accessibility Guidelines 2.1 (WCAG 2.1),
  • al menos 7:1 para el texto normal y 4.5:1 para texto grande para cumplir con los estándares de nivel AAA de WCAG 2.1.

Para obtener más información sobre los niveles de cumplimiento de WCAG 2.1, consulta Web Content Accessibility Guidelines (Directrices de accesibilidad al contenido web) de W3C. Para un sitio web estándar, debes intentar alcanzar el cumplimiento de al menos el nivel AA. Si tu sitio web se dirige específicamente a un público vulnerable, como los ancianos o las personas con discapacidades, intenta lograr el cumplimiento del nivel AAA al menos en los bloques de texto continuo.

Para garantizar la legibilidad del texto, puedes utilizar una herramienta online de comprobación de contraste, como WebAIM Contrast Checker. Sin embargo, estas herramientas normalmente requieren que introduzcas en la aplicación valores de color de forma manual. Como alternativa, también puedes utilizar una extensión del navegador como WCAG Color Contrast Checker para Chrome que te permite comprobar rápidamente el contraste de color de cada elemento de tu página. Por ejemplo, esta es la auditoría de contraste de color que devuelve para uno de nuestros artículos de Tuts+:

WCAG Color Contrast Checker for Chrome

Con Lighthouse, también puedes llevar a cabo una auditoría de accesibilidad que devuelva todos los elementos HTML con errores debido a que no tienen una relación de contraste de color suficiente.

Aunque no es necesario tener un alto contraste de color en todas las partes de la página, debes hacer que al menos los titulares, los bloques de texto, los hipervínculos y los controles como botones y campos de entrada cumplan con los estándares de nivel AA para lograr una legibilidad adecuada del texto.

2. Aumenta el tamaño o el peso de la fuente

En CSS, hay dos rápidas soluciones para corregir el bajo contraste de color:

  1. Puedes aumentar el tamaño de la fuente (font-size) o el peso de fuente (font-weight).
  2. Puedes ajustar la luminosidad del color del primer plano o del fondo (consulta la siguiente sección).

En primer lugar, veamos cómo aumentar el valor de las propiedades font-size o font-weight mejora la accesibilidad del contraste. Si nos fijamos en los anteriores requisitos de contraste de color de WCAG 2.1, verás que para el texto de mayor tamaño, puedes usar menor contraste. La razón de esto se explica por sí solo; en pantalla es más fácil leer letras más grandes.

Según WCAG 2.1, el texto a gran escala significa:

"al menos 18 puntos o 14 puntos de tamaño de fuente en negrita que produciría un tamaño equivalente para fuentes chinas, japonesas y coreanas (CJK)".

Como mencionan los documentos de WebAIM, esto normalmente significa al menos 18.66px para el texto en negrita, y 24px para texto de peso normal. Por otro lado, los documentos de WCAG 2.1 recomiendan el uso de unidades relativas en lugar de píxeles para que los usuarios puedan utilizar la funcionalidad Aumentar solo el texto en su navegador web. En números, esto significa al menos 1.2em para texto en negrita y 1.5em para texto de peso normal.

Por lo tanto, si tu diseño lo permite, puedes simplemente incrementar el valor de las propiedades font-size y/o font-weight, por ejemplo:

3. Utiliza los colores HSL para mejorar el contraste de color

Si no puedes aumentar el tamaño de fuente (font-size) y/o el peso de fuente (font-weight), puedes también ajustar la luminosidad del color de primer plano en relación al color de fondo. En el caso de un fondo oscuro, es necesario hacer las fuentes un poco más claras, mientras que en el caso de un fondo claro, es necesario hacer las fuentes un poco más oscuras.

Hay diferentes maneras de hacerlo, pero te mostraré la mejor, en relación a cómo utilizar el modelo de color HSL para ajustar rápidamente la luminosidad del color. HSL (Hue Saturation Lightness) significa Tono, Saturación, Luminosidad. Es un modelo de color menos utilizado que las notaciones RGB (rojo, verde, azul) y hexadecimal, pero es mucho más intuitivo. CSS-Tricks también lo recomienda para el control programático del color y el soporte del navegador también es relativamente bueno (actualmente, el 93,42% de los navegadores lo admiten globalmente).

HSL Colors Browser Support

Por lo tanto, veamos un rápido ejemplo de cómo ajustar la luminosidad del color utilizando el modelo de color HSL. La extensión WCAG Color Contrast Checker mencionada antes ha descubierto que los hipervínculos azules en las páginas de nuestros artículos tienen un poco menos contraste que el mínimo recomendado (4.14 en lugar de 4.5). Si abres WCAG Color Contrast Checker en el lado izquierdo de la ventana del navegador y DevTools a la derecha, esto es lo que verás:

Adjusting Color Lightness

Aunque el color se define en notación hexadecimal (#0085b6), puedes convertirlo en un valor HSL rápidamente mediante ColorHexa:

Converting hexadecimal notation to HSL

En el siguiente código, las dos declaraciones CSS conducen al mismo resultado. Además, la notación hexadecimal también se puede utilizar como método alternativo para la función hsl():

Ahora, en la pestaña Styles de Chrome DevTools, puedes simplemente reemplazar el valor hexadecimal por el HSL haciendo doble clic y sobrescribiéndolo:

Changing Hex Value to HSL in Chrome DevTools

Como HSL es un formato legible por el ser humano, solo necesitas cambiar el valor de la luminosidad (35,7%) para mejorar el contraste de color. En este caso, es necesario disminuirlo porque en un fondo blanco, necesitarás un tipo ligeramente más oscuro. Puedes experimentar con él hasta que WCAG Color Contrast Checker de la izquierda te devuelva un valor superior a 4.5 (no olvides pulsar el botón refresh results para actualizar los resultados).

En la siguiente captura de pantalla, puedes ver que fue suficiente reducir el valor de luminosidad de 35.7% a 33.7% para cumplir con los estándares de nivel AA con una relación de contraste de color de 4.6. Esta es una diferencia tan pequeña que apenas es visible y no cambia la estética del diseño:

Lightness value fixed

Si deseas añadir el valor hexadecimal como alternativa a tu CSS, puedes convertir rápidamente el nuevo valor HSL de nuevo utilizando el conversor de ColorHexa de la misma manera que antes:

4. Añade una superposición semitransparente a las imágenes de fondo

Si usas texto encima de las imágenes de fondo, también vale la pena considerar agregar una superposición con un ajuste de opacidad (opacity) adecuado para mejorar la accesibilidad del color. Echa un vistazo, por ejemplo, a la siguiente imagen de fondo detrás de la cadena de texto "Explore the World":

Background image without overlay

De hecho, la relación de contraste de color no es horrible, pero sin duda se puede mejorar. Puedes hacerlo añadiendo una superposición oscura al elemento HTML que contiene la imagen de fondo.

El HTML es bastante simple:

El CSS utiliza el posicionamiento absoluto y el pseudo-elemento ::after para colocar la superposición justo encima de la imagen de fondo:

Como necesitas oscurecer el fondo, utiliza una superposición negra con un valor de opacity de alrededor de 0.3. De esta manera, el contraste de color entre el primer plano (texto blanco) y el fondo será un poco más alto:

Background image with overlay

Para ver el código en su totalidad, echa un vistazo a la siguiente demostración de CodePen:

5. Prueba los colores con el filtro de escala de grises

Para ver el aspecto que tiene tu sitio web para alguien que no percibe los colores, puedes aplicar la propiedad CSS filter con el valor grayscale() a la etiqueta body de la página:

Por ejemplo, así es como se ve la página de tutoriales de Diseño web de Tuts+ sin colores:

Test colors with grayscale filter

A pesar de que el daltonismo total es poco frecuente y la mayoría de las personas con discapacidades visuales ven diferentes espectros de color (limitados), esta técnica todavía puede darte una idea de cómo el color pierde su significado y de lo que debe ser ajustado.

En resumen

Puedes utilizar un par de técnicas CSS fáciles de implementar para mejorar la accesibilidad del color. Lo más importante es garantizar un alto contraste de color para los bloques de texto, especialmente cuando el tamaño de fuente es pequeño. Además, también puedes hacer uso del modelo de color HSL, las superposiciones de imagen y las propiedades opacity y filter para lograr una mejor relación de contraste entre los elementos de primer plano y de fondo.

Más información sobre la accesibilidad

Si estás interesado en más prácticos consejos CSS para una mejor accesibilidad, echa también un vistazo a mis artículos similares sobre accesibilidad de teclado y la accesibilidad de animación.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.