Dos pasos hacia una web más accesible: contraste y tamaño de texto

Actualizado el jueves, 29 agosto, 2024

La accesibilidad web es esencial para garantizar que tu sitio sea usable para todos los usuarios, independientemente de sus habilidades o capacidades. Dos aspectos clave para conseguir una web accesible son el contraste y el tamaño del texto.

Según la Ley 11/2023, antes de 2025 tendrás que asegurarte de que tu web sea accesible. No cumplir con esta normativa puede conllevar problemas legales y sanciones.

Contraste accesible: la base de un diseño inclusivo

La norma WCAG 2.1 (Web Content Accessibility Guidelines) de la W3C establece los criterios para garantizar la accesibilidad web, incluyendo pautas específicas sobre el contraste mínimo entre el texto y el fondo.

El requisito fundamental es que el texto debe tener un contraste suficiente con su fondo para ser legible por personas con discapacidades visuales o dificultades de visión.

Esto se evalúa utilizando el índice de contraste, que mide la diferencia de luminosidad entre el texto y el fondo. La norma establece umbrales específicos para diferentes tamaños y pesos de texto, asegurando que el contenido sea claramente discernible, y mejorando así la experiencia para todos los usuarios, independientemente de sus habilidades visuales.

La implementación de estos estándares contribuye a la creación de entornos web más accesibles y equitativos.

Puedes obtener el índice de contraste entre dos colores utilizando diversas herramientas en línea diseñadas específicamente para evaluar la accesibilidad del color. Algunas de las opciones más comunes son:

1. Contrast Checker de WebAIM: WebAIM ofrece una herramienta en línea llamada Contrast Checker, que te permite ingresar los códigos de color hexadecimal de dos colores y obtener el índice de contraste entre ellos. Puedes acceder a la herramienta en WebAIM Contrast Checker.
2. Contrast Ratio de Lea Verou: Lea Verou, una desarrolladora web, también proporciona una herramienta simple llamada Contrast Ratio. Puedes usarla para verificar el contraste entre dos colores ingresando sus códigos hexadecimales. Puedes acceder a la herramienta en Contrast Ratio by Lea Verou
3. Paleta de Accesibilidad de Tanaguru: Tanaguru ofrece una paleta de accesibilidad que no solo calcula el contraste entre dos colores, sino que también proporciona información sobre la conformidad con los estándares de accesibilidad. La tieens en Tanaguru Color Contrast Analyzer

Estas herramientas suelen ser fáciles de usar y proporcionan resultados precisos para evaluar el contraste entre colores, ayudándote a cumplir con las pautas de accesibilidad web como las establecidas por WCAG.

Tips para mejorar el contraste en la fase de diseño

Si estás en las primeras fases del diseño, en las que puedes tomar decisiones a tu antojo, te dejamos a continuación algunos tips para garantizar un contraste accesible:

• Utiliza colores contrastantes: asegúrate de que el texto y el fondo tengan colores que contrasten lo suficiente. Herramientas online como “Contrast Checker” te ayudarán a evaluar y ajustar el contraste de tus combinaciones de colores.
• Evita el texto sobre imágenes complejas: si incluyes texto sobre imágenes, asegúrate de que haya un fondo con suficiente contraste o utiliza sombras para mejorar la visibilidad. Otra buena técnica es hacer un overlay de un color contrastante con transparencia suficiente.
• Tamaño y grosor del texto: un texto más grande y en negrita puede mejorar el contraste y facilitar la lectura. Ajusta el tamaño y el grosor del texto para que sea legible sin forzar la vista.

Tips para mejorar el contraste a posteriori

En muchas ocasiones, por diseño (colores corporativos u elecciones propias), no es posible llegar a los índices mínimos establecidos. En esos casos podrías implementar funcionalidades en tu sitio web que permitan a los usuarios ajustar el contraste a posteriori según sus preferencias. Aquí tienes algunas sugerencias sobre cómo lograr esto:

1. Temas o Modos de contraste:
   • Proporciona diferentes temas o modos de contraste para que los usuarios elijan.
   • Incluye un interruptor en la interfaz de usuario para cambiar entre modos de contraste alto y bajo.
2. Controles de estilo personalizables:
   • Ofrece controles que permitan a los usuarios ajustar directamente el contraste, el tamaño del texto y otros estilos.
   • Permite cambios en la paleta de colores o el fondo para adaptarse a las preferencias individuales.
3. Ajustes de navegador:
   • Fomenta el uso de las funciones de accesibilidad incorporadas en los navegadores. Algunos navegadores permiten a los usuarios personalizar la apariencia de las páginas web, incluyendo el contraste y el tamaño del texto.
4. Cookies o preferencias del usuario:
   • Guarda las preferencias de accesibilidad del usuario utilizando cookies o configuraciones de perfil.
   • Cuando los usuarios regresan al sitio, se restaurarán automáticamente sus preferencias guardadas.
5. Botones de accesibilidad:
   • Incluye botones de accesibilidad que permitan a los usuarios cambiar el contraste o ajustar otros elementos visuales en tiempo real.

Es importante asegurarse de que cualquier cambio en el contraste no afecte negativamente a la usabilidad general del sitio y que cumpla con las pautas de accesibilidad. Además, proporcionar información clara sobre cómo acceder a estas opciones y qué cambios pueden esperar los usuarios es crucial para una experiencia de usuario transparente y accesible.

Si tu web está desarrollada en WordPress, estos plugins podrán ayudarte a hacerla más accesible: One Click Accesibility y WP Accesibility.

Tips sobre el contraste basados en la experiencia

Además de lo comentado anteriormente, a continuación te voy a descubrir algunos consejos basados en nuestra experiencia que seguro te serán muy útiles.

Aunque lo más cómodo es poner todo en blanco y negro, puros, recuerda que ese contraste máximo también cansa mucho la vista. Vete a unas intensidades un poco menos extremas manteniendo el contraste.

Los filtros CSS pueden ser tus mejores aliados. No obstante, úsalos con cuidado, ya que pueden variar la posición de los elementos de la página y que dejen de funcionar algunas características.

Los fondos degradados quedan muy bonitos, pero quizás hablando en términos de accesibilidad, lo más honesto sea convertirlos en un color sólido.

Por último, si tienes pensado guardar las opciones del usuario en una cookie, piensa en el movimiento CookieLess. A lo mejor te es más interesante guardar las preferencias en localStore de tu navegador.

Optimizando el tamaño del texto: un paso hacia la claridad

Al igual que el contraste, el tamaño del texto es otro factor crucial para que tu web sea accesible. Aquí hay algunos consejos para garantizar que tu texto sea legible para todos los usuarios:

• Tamaño de fuente adaptable: utiliza unidades relativas, como porcentajes o “em”, en lugar de tamaños fijos para permitir que los usuarios ajusten el texto según sus necesidades.
• Prueba con diferentes tamaños: haz pruebas con diferentes tamaños de texto para encontrar el equilibrio perfecto entre legibilidad y diseño atractivo. Recuerda que lo que es fácil de leer para algunos puede no serlo para otros.
• Espaciado y alineación: ajusta el espaciado y la alineación del texto para mejorar la legibilidad. Un espaciado adecuado entre líneas y párrafos facilita la lectura.

Aparte, existe una norma del WCAG que se enfoca en permitir que los usuarios cambien el tamaño del texto en una página web sin perder información ni funcionalidad.

Esto es crucial para satisfacer las necesidades de personas con discapacidades visuales o aquellas que prefieren ajustar el tamaño del texto según sus preferencias.

La norma proporciona orientación sobre cómo implementar esta funcionalidad de manera efectiva, asegurando que el contenido siga siendo legible y utilizable incluso cuando se cambia el tamaño del texto. Cumplir con este criterio contribuye a una experiencia de usuario más inclusiva y accesible para una amplia gama de usuarios.

Tips sobre el tamaño del texto basados en la experiencia

Si vas a cambiar las hojas de estilo de tu web para hacer que los tamaños sean relativos, lo más práctico es seguir la estructura del DOM para descubrir quién es el elemento padre de cada elemento.

La unidad más cómoda para hacer medidas relativa es el ’em’. Si tienes tamaños absolutos en píxeles, tienes a tu disposición herramientas online como NekoCalc que te hacen la conversión entre las distintas medidas.

Además del cambio de la medida del texto, te recomiendo que cambies el tamaño de cajones contenedores a una medida también dependiente del texto. Vigila las propiedades width y max-width de tu hoja de estilos.

Al igual que al trabajar con el contraste, si tu web está implementada en WordPress, estos plugins podrán ayudarte: One Click Accesibility y WP Accesibility.

Conclusión

En resumen, cumplir con estas normas de contraste mínimo y tamaño variable, no solo es un requisito para respectar la normativa de accesibilidad web, sino una buena práctica para proporcionar una experiencia online equitativa y amigable para todos los usuarios. ¡Te animamos a que vayas a por ello!