Haz que tu sitio web sea más legible

Sofia Emelianova

Punto clave: El texto de bajo contraste es el principal problema de accesibilidad en la Web. En febrero de 2022, el 83.9% de los millones de páginas principales principales tuvieron este problema. Consulta el informe WebAIM Million 2022 para obtener más información.

Los textos con poco contraste hacen que tu sitio web sea menos legible para todos los usuarios, incluso más para los usuarios con deficiencias en la visión. Las Herramientas para desarrolladores pueden encontrar automáticamente problemas de contraste bajo y sugerir mejores colores para ayudarte a corregirlos.

Usa las Herramientas para desarrolladores para hacer lo siguiente:

• Descubrir problemas de contraste. Usa el panel Descripción general de CSS, la pestaña Problemas (vista previa) o un informe de Lighthouse para obtener una lista de todos los problemas.
• Corrige los problemas de contraste. Consulta los problemas con información sobre la herramienta en el modo de inspector y selecciona los colores que sugiere el selector de colores para corregir la proporción de contraste.
• Emular deficiencias en la visión. Observe su sitio de la misma manera en que lo ven sus usuarios.

Descubre texto de bajo contraste

Para descubrir texto con contraste bajo, haz lo siguiente:

1. Abre Herramientas para desarrolladores en tu página. En este instructivo, puedes usar esta página de demostración.

2. Obtén una lista de todos los problemas de contraste mediante uno de los tres paneles:

   • Descripción general de CSS
   • (vista previa) Problemas
   • Faro

Contrastar los problemas en el panel Resumen de CSS

Para obtener una descripción general, haz lo siguiente:

1. Abre el Resumen de CSS.
2. Obtén una descripción general.
3. Abre la sección Colores, desplázate hasta Problemas de contraste y haz clic en un problema, si corresponde.

4. En la tabla Problemas de contraste, coloca el cursor sobre un elemento y haz clic en el vínculo que está a su lado.

   

5. Soluciona el problema como se describe en la sección Cómo corregir el texto de bajo contraste.

(Vista previa) Problemas de contraste en la pestaña Problemas

Nota: Esta es una función de vista previa inhabilitada de forma predeterminada.

Para obtener una lista de los problemas, haz lo siguiente:

1. Habilita los informes de problemas de contraste en la pestaña Problemas:
   1. Abre Configuración > Experimental.
   2. En la barra de filtros, busca contrast issue.
   3. Marca Habilitar informes automáticos de problemas de contraste en el panel Problemas.
   4. En el mensaje que aparece en la parte superior, haz clic en Volver a cargar Herramientas para desarrolladores.
2. Abre la pestaña Problemas.

3. Expande los problemas de contraste encontrados en Herramientas para desarrolladores, luego expande la tabla de elementos y haz clic en un vínculo junto al elemento.

   

4. Soluciona el problema como se describe en la sección Cómo corregir el texto de bajo contraste.

Cómo contrastar problemas en un informe de Lighthouse

Para ejecutar un informe, siga estos pasos:

1. En Herramientas para desarrolladores, abre Más pestañas > Lighthouse.
2. Genera un informe de Lighthouse con la siguiente configuración:
   • Modo: Navegación (predeterminado)
   • Categorías: Accesibilidad
   • Dispositivo: Computadora de escritorio
3. Haz clic en Analizar la carga de la página y espera a que Lighthouse genere el informe.
4. Desplázate hacia abajo hasta la sección Contraste y, en la lista de elementos, haz clic en un vínculo a un elemento afectado.
5. Soluciona el problema como se describe en la sección Cómo corregir el texto de bajo contraste.

Cómo corregir el texto de bajo contraste

Para solucionar un problema de contraste bajo, haz lo siguiente:

1. Busca un problema de contraste y haz clic en un vínculo a un elemento afectado en el panel Descripción general de CSS, la pestaña Problemas o el informe Lighthouse. Las Herramientas para desarrolladores te dirigirán al panel de Elementos y seleccionarán el elemento correspondiente. Por ejemplo, en esta página de demostración, el primer elemento afectado es h1.line1.

2. Haz clic en Inspect en la esquina superior derecha de Herramientas para desarrolladores y coloca el cursor sobre el elemento en el viewport. Herramientas para desarrolladores muestra información sobre este elemento.

   

   Observa la señal de advertencia junto al valor de la proporción de contraste en la información sobre la herramienta. La relación de contraste mide la diferencia de brillo entre los colores del primer plano (color del texto) y el fondo.

3. Abre el Selector de color junto a la declaración de color del texto del elemento y, en el Selector de colores, expande la sección Relación de contraste.

   

   El selector de color te indica que la relación de contraste no cumple con los niveles AA o AAA de los lineamientos de WebAIM.

4. Haz clic en el botón Use suggested color junto al nivel de AAA. El Selector de color aplica el color del texto que cumple con los lineamientos de proporción de contraste.

   

5. Como alternativa, para escoger un color manualmente, puedes arrastrar el círculo en la vista previa de las sombras. Para mantenerte dentro del nivel AA o AAA, elige un color debajo de la línea superior o inferior, respectivamente.

   

6. Del mismo modo, puedes corregir todos los problemas de contraste que encuentres en el panel Descripción general de CSS, la pestaña Problemas o el informe Lighthouse.

Guarde los cambios.

Para guardar los cambios que hiciste en las Herramientas para desarrolladores, sigue estos pasos:

• Copia todos los cambios de CSS a la vez y pégalos en tu código
• Considera configurar un espacio de trabajo que permita a las Herramientas para desarrolladores guardar archivos directamente en tus fuentes.

¿Qué sigue?

Más información:

• Información sobre accesibilidad en general
• Accesibilidad del color y contraste en particular