Actualizar el contraste del color del texto

El texto debe ser legible para todos

Es importante que el texto esté visible y sea legible. Si desea que los visitantes lo entiendan, es necesario que puedan leerlo.

Un buen contraste de texto permite que todos puedan ver el texto sobre el fondo en el que se encuentra.

No todos ven el color de la misma manera. WCAG definió requisitos de contraste específicos en las Pautas WCAG 2.1 AA para garantizar que el texto sea legible para todos. Siga estos requisitos y nuestras prácticas recomendadas de contraste para corregir o evitar los problemas de contraste.

Ally sigue los requisitos de contraste para verificar que hay suficiente contraste entre el color del texto y el color del fondo. Si el texto tiene poco contraste, es un problema importante. Los problemas importantes afectan la accesibilidad y, si bien no son graves, requieren atención.

Usar Ally para buscar texto con poco contraste

Use el informe de accesibilidad de Ally para detectar y solucionar los problemas de accesibilidad en su sitio. Use el enlace proporcionado para el informe e inicie sesión. Abra el informe y mire la lista de problemas en la tabla Problemas de accesibilidad.

La tabla Problemas de accesibilidad se encuentra en las pestañas Descripción general y Dominio. Comience en la pestaña Dominio para ver los problemas específicos de un dominio. 

El texto con poco contraste es un problema importante. Use la pestaña Importante en la tabla Problemas de accesibilidad para ver la lista de los problemas importantes. Seleccione los problemas de contraste.

Si comienza por la pestaña Descripción general, seleccione el problema y, a continuación, el dominio que lo presenta.

Los problemas de contraste pueden comenzar con el nombre Documento o HTML en la lista.

En la lista de problemas de contraste en el dominio, seleccione el indicador de puntuación junto a un elemento con el problema. Se abrirá el panel de comentarios del editor de contenido.

Vista preliminar del texto con poco contraste

El panel de comentarios de Ally le muestra una vista preliminar del contenido, y le brinda los comentarios detallados y el soporte para que pueda corregir los problemas de accesibilidad. Use la vista preliminar para ver el texto con poco contraste.

En la vista preliminar, se destaca en qué partes del documento hay problemas de accesibilidad específicos. La información destacada muestra cada instancia de un tipo de problema a la vez. Por ejemplo, si el texto tiene poco contraste, se muestra cada lugar en el que ocurre este problema específico.

Herramientas de vista preliminar

Use las herramientas de la vista preliminar para analizar los problemas del documento.

• Desplácese por la vista preliminar página por página.
• Vea cuántas veces aparece un problema determinado.
• Recorra los distintos problemas resaltados.
• Oculte o muestre la información destacada.
• Acerque o aleje el contenido de la vista preliminar.
• Si el problema se encuentra en un documento adjunto, descargue el archivo original.

Siga los pasos de Ally para solucionar los problemas de poco contraste

Se asume que usted tiene conocimiento básico sobre HTML y sabe cómo usar su sistema de gestión de contenido (CMS). Para seguir las instrucciones, debe saber cómo editar una página web en el código fuente o HTML del CMS.

También se asume que cuenta con los permisos para actualizar el color en su sitio web. El color suele definirse en la guía de estilo de un sitio y puede reflejar la marca. Antes de realizar cambios, consulte la guía de estilo del sitio. 

Junto con la vista preliminar, Ally le ofrece una guía detallada para corregir el problema. Estos comentarios se organizan en un árbol de decisiones.Solo debe leer las instrucciones y seguir todas las indicaciones. Podrá saber cuál es el problema, conocer su importancia y aprender a corregirlo adecuadamente.

Seleccione Cómo corregir el contraste y siga los pasos.

Formas de solucionar los problemas de contraste

Este problema significa que no hay suficiente contraste de color entre el texto y el fondo en el que se encuentra.

En la guía de pasos de Ally, se explica cómo cambiar el color del texto. También puede modificar el color del fondo. 

Antes de realizar cualquier cambio, consulte la guía de estilo del sitio. El color suele relacionarse con la marca, y hay que tener cuidado al modificarlo.

En la guía de pasos de Ally, también se explica cómo realizar las actualizaciones en el código fuente de HTML de las páginas web individuales. Los CMS pueden variar. Algunos tienen un editor de texto enriquecido (RTE) que puede ofrecer formas sencillas de estilizar el texto. Con el RTE, puede elegir el estilo preestablecido para los encabezados, los colores, las fuentes, las imágenes, etc. Sin embargo, no todos los CMS proporcionan un editor de texto enriquecido y requieren modificaciones en el código fuente con HTML. En ocasiones, tanto el HTML como el RTE están disponibles.

Para los problemas de contraste recurrentes, se recomienda que actualice la plantilla. Las actualizaciones de las plantillas pueden depender de la marca del sitio y, para realizarlas, se necesita cierto conocimiento de HTML y CSS . 

Visite w3schools para obtener más información sobre HTML y CSS

Color HEX o RGB

HEX y RGB son diferentes formas en las que se puede definir el color.

• RGB define el color por la cantidad de rojo, verde y azul utilizada. Por ejemplo, un tono de rojo se podría definir como RGB (253, 2, 2).
• HEX es un formato hexadecimal que define un color por los valores de rojo, verde y azul en una combinación de seis letras y números. Los hexadecimales empiezan con el símbolo numeral (#). Por ejemplo, la misma tonalidad de rojo se definiría como #fd0202.

El formato hexadecimal es la forma más común de definir colores en las páginas web.

Prácticas recomendadas para el contraste del texto

Hay muchos ajustes que se pueden realizar con facilidad para mejorar la legibilidad del texto.

• Utilice fuentes con caracteres de trazo ancho.
• Use un tamaño de fuente de 12 puntos como mínimo. Si utiliza una fuente con caracteres de trazo fino, use al menos 16 puntos.
• Utilice fuentes "delgadas" en fondos oscuros.
• Utilice un color de texto claro en fondos oscuros.
• Utilice un color de texto oscuro en fondos claros.
• Evite utilizar las siguientes combinaciones de colores:
  • Verde y rojo
  • Verde y marrón
  • Azul y violeta
  • Verde y azul
  • Verde claro y amarillo
  • Azul y gris
  • Verde y gris
  • Verde y negro

¿No está seguro si el contraste del texto es suficiente?Utilice la herramienta Colour Contrast Analyser de The Paciello Group para analizar el contenido.

¿Por qué es importante el contraste del texto?

Un texto con un contraste deficiente puede ser difícil de leer en muchas situaciones.

• Al proyectarlo en clase
• Para estudiantes con daltonismo
• En un móvil con luz brillante o con reflejos en la pantalla
• En monitores de baja calidad

El contraste deficiente puede ocasionar cansancio de la vista, dificulta la detección y el análisis del contenido y genera frustración.

Un buen contraste implica que todos puedan ver el texto con claridad y disfrutar de una mejor experiencia general cuando lean el contenido.