Haz que tu sitio web sea más legible

Sofia Emelianova

Los textos con contraste bajo hacen que tu sitio web sea menos legible para todos los usuarios, en especial 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.

Usa las Herramientas para desarrolladores para hacer lo siguiente:

• Descubrir problemas de contraste. Usa el panel Resumen de CSS , la pestaña Problemas (versión preliminar) o un informe de Lighthouse para obtener una lista de todos los problemas.
• Corregir problemas de contraste. Visualiza los problemas con una información sobre la herramienta en el modo de inspector y selecciona los colores que sugiere el Selector de color para corregir la proporción de contraste.
• Emular deficiencias de visión. Mira tu sitio de la misma manera en que lo ven tus usuarios.

Descubre texto con contraste bajo

Para descubrir texto con contraste bajo, haz lo siguiente:

1. Abre las Herramientas para desarrolladores en tu página.

2. Para enumerar todos los problemas de contraste, usa uno de los tres paneles:

   • Resumen de CSS
   • (versión preliminar) Problemas
   • Lighthouse

Puedes experimentar abriendo nuestro CodePen.

Problemas de contraste en el panel Resumen de CSS

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

1. Abre Resumen de CSS.
2. Captura una descripción general.
3. Abre la sección Colores, ve a Problemas de contraste y haz clic en un problema, si hay alguno.

4. En la tabla Problemas de contraste, coloca el cursor sobre un elemento y haz clic en el vínculo que aparece junto a él.

   

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

Problemas de contraste (versión preliminar) en la pestaña Problemas

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. Selecciona Habilitar informes automáticos de problemas de contraste a través del panel Problemas.
   4. Haz clic en Volver a cargar las 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 encontraron las Herramientas para desarrolladores, luego expande la tabla de elementos y haz clic en un vínculo junto al elemento.

   

4. Corrige el problema como se describe en la sección Cómo corregir el texto con 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:

   • Modo: Navegación (predeterminado)
   • Categorías: Accesibilidad
   • Dispositivo: Computadora de escritorio

   

3. Haz clic en Analizar carga de página y espera a que Lighthouse genere el informe.

4. Ve a la sección Contraste. En la lista de elementos, haz clic en un vínculo a un elemento afectado.

   

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

Cómo corregir el texto con contraste bajo

Para corregir 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 Resumen de CSS, la pestaña Problemas o el informe de Lighthouse. Las Herramientas para desarrolladores te llevan al panel Elementos y seleccionan el elemento correspondiente.

   

   Por ejemplo, en nuestra demostración inaccesible de CodePen, el primer elemento afectado es h1.line1.

2. Haz clic en Inspeccionar en la esquina superior derecha de las Herramientas para desarrolladores y coloca el cursor sobre el elemento en la ventana gráfica. Las Herramientas para desarrolladores muestran una información sobre la herramienta para este elemento.

   

   Observa el signo de advertencia junto al valor de la proporción de contraste en la información sobre la herramienta. La proporció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 color, expande la sección Proporción de contraste.

   

   El Selector de color te 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 Usar color sugerido junto al nivel AAA. El Selector de color aplica el color de texto que cumple con los lineamientos de la proporción de contraste.

   

5. Como alternativa, para elegir un color de forma manual, puedes arrastrar el círculo en la vista previa de los tonos. Para mantenerte dentro del nivel 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 encontraste con el panel Resumen de CSS, la pestaña Problemas, o el informe de Lighthouse.

Guarde los cambios.

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

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

Próximos pasos

Más información:

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