Haz que tu sitio web sea más legible

Sofía Emelianova

GitHub

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 tenían este problema. Consulta el informe WebAIM Million 2022 para obtener más información.

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

Use las Herramientas para desarrolladores para hacer lo siguiente:

• Descubre problemas de contraste. Usa el panel Resumen de CSS, la pestaña Problemas (vista previa) o un informe de Lighthouse para obtener una lista de todos los problemas.
• Soluciona problemas de contraste. Consulta los problemas con un cuadro de información en el modo Inspector y elige los colores que sugiere el Selector de colores para corregir la proporción de contraste.
• Emula deficiencias visuales. Analiza tu sitio de la forma en que lo ven tus usuarios.

Cómo descubrir texto con bajo contraste

Para descubrir texto con bajo contraste, 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
   • (versión preliminar) Problemas
   • Faro

Problemas de contraste en el panel Resumen de CSS

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

1. Abre la Descripción general 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 se encuentra junto a él.

   

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

(Vista previa) Contrasta los problemas de la pestaña Problemas

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

Para obtener una lista de 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 los informes de problemas de contraste automático a través del panel Problemas.
   4. Haz clic en Volver a cargar Herramientas para desarrolladores en el mensaje que aparece en la parte superior.
2. Abre la pestaña Problemas.

3. Expande los problemas de contraste que encontró 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 Corrige el texto de contraste bajo.

Problemas de contraste 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:
   • Mode: Navigation (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 Corrige el texto de contraste bajo.

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, ya sea en el panel Resumen de CSS, la pestaña Problemas o el informe Lighthouse. Herramientas para desarrolladores te lleva al panel Elementos y selecciona el elemento correspondiente. Por ejemplo, en esta página de demostración, el primer elemento afectado es h1.line1.

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

   

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

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

   

   El Selector de color indica que la proporció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 AAA. El Selector de color aplica el color del texto que cumple con los lineamientos de proporción de contraste.

   

5. De manera alternativa, para elegir un color manualmente, puedes arrastrar el círculo en la vista previa de tonos. Para permanecer dentro de los niveles AA o AAA, elige un color debajo de la línea superior o inferior, respectivamente.

   

6. Del mismo modo, corrige todos los problemas de contraste que hayas encontrado en el panel Resumen de CSS, la pestaña Problemas o el informe Lighthouse.

Guarde los cambios.

Para guardar los cambios que realizaste en Herramientas para desarrolladores, haz lo siguiente:

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

¿Qué sigue?

Más información:

• Obtén información sobre Accesibilidad en general
• Accesibilidad de color y contraste en particular