Haz que tu sitio web sea más legible

Sofia Emelianova
Sofia Emelianova
GitHub

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

Usa DevTools para lo siguiente:

  • Descubre los 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.
  • Soluciona los problemas de contraste. Consulta los problemas con una información sobre herramientas en el modo Inspector y selecciona los colores que sugiere el Selector de color para corregir la proporción de contraste.
  • Emula deficiencias de visión. Observa tu sitio de la misma manera que lo hacen tus usuarios.

Cómo descubrir texto con contraste bajo

Para descubrir texto con contraste bajo, haz lo siguiente:

  1. Abre DevTools 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 con uno de los tres paneles:

Problemas de contraste en el panel Resumen de CSS

Para obtener una descripción general, sigue estos pasos:

  1. Abre Resumen de CSS.
  2. Captura una descripción general.
  3. Abre la sección Colores, desplázate hasta 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.

    Lista de problemas de contraste en la página Resumen de CSS.

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

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

Para obtener una lista de los problemas, sigue estos pasos:

  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 la opción Habilitar informes automáticos de problemas de contraste a través del panel de problemas. Habilita los informes de problemas de contraste.
    4. Haz clic en Volver a cargar DevTools en el mensaje que aparece en la parte superior.
  2. Abre la pestaña Problemas.

  3. Expande los problemas de contraste que encontró DevTools, expande la tabla de elementos y haz clic en un vínculo junto al elemento.

    Tabla de elementos con problemas de contraste en la pestaña Problemas.

  4. Soluciona 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 DevTools, abre Más pestañas. 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 Informe de Lighthouse con la configuración de Navegación, Accesibilidad y Computadoras de escritorio.
  3. Haz clic en Analizar 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. La sección Contraste del informe de Lighthouse con una lista de elementos que tienen problemas de contraste.
  5. Soluciona 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. Encuentra un problema de contraste y haz clic en un vínculo a un elemento afectado, ya sea en el panel Resumen de CSS, en la pestaña Problemas o en el informe Lighthouse. Las Herramientas para desarrolladores te llevan al panel Elementos y seleccionan el elemento correspondiente. Un elemento con un problema de contraste seleccionado en el panel de elementos. Por ejemplo, en esta página de demostración, el primer elemento afectado es h1.line1.

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

    La información sobre la herramienta muestra un signo de advertencia junto al valor de contraste.

    Observa el signo de advertencia Advertencia. junto al valor de la relación de contraste en la información sobre herramientas. La relación de contraste mide la diferencia de brillo entre los colores del primer plano (color del texto) y 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 Proporción de contraste.

    La sección Proporción de contraste del Selector de color

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

    El color aplicado cumple con los lineamientos.

  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.

    Elegir un tono de color debajo de la línea inferior para permanecer en el nivel AAA

  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 Lighthouse.

Guarde los cambios.

Para guardar los cambios que realizaste en DevTools, haz lo siguiente:

Próximos pasos

Más información: