Compartir a través de

Comprobación del contraste de color de texto en el estado predeterminado mediante la herramienta Inspeccionar

Compruebe el contraste de color de texto en el estado predeterminado mediante la herramienta Inspeccionar . La superposición de información de la herramienta Inspect en la página web tiene una sección accesibilidad que incluye información de contraste .

Para los elementos que tienen texto, la superposición de información de la herramienta Inspeccionar muestra lo siguiente:

  • Relación de contraste de texto frente a colores de fondo.
  • Icono de marca de verificación verde para elementos con suficiente contraste.
  • Icono de alerta amarilla para elementos que no tienen suficiente contraste.

En algunos casos, el contraste se ve afectado al establecer el explorador en tema claro o tema oscuro.

Por ejemplo, en la página web de demostración de pruebas de accesibilidad, los vínculos azules del menú de navegación de la barra lateral tienen suficiente contraste, pero el vínculo verde Perros de la sección Estado de la donación no tiene suficiente contraste. Examine esos elementos mediante la herramienta Inspeccionar , como se indica a continuación:

  1. Abra la página web de demostración de pruebas de accesibilidad en una nueva ventana o pestaña.

  2. Haga clic con el botón derecho en cualquier lugar de la página web y, a continuación, seleccione Inspeccionar. O bien, presione F12. DevTools se abre junto a la página web.

  3. Haga clic en el botón Inspeccionar (botón Inspeccionar) de la esquina superior izquierda de DevTools para que el icono esté resaltado (azul).

  4. En la página web representada, mantenga el puntero sobre el vínculo gatos azul del menú de navegación de la barra lateral. Aparece la superposición de información de la herramienta Inspeccionar . En la sección Accesibilidad de la superposición de información, aparece una marca de verificación verde en la fila Contraste , que indica que este elemento tiene suficiente contraste de color de texto frente a color de fondo:

    Los elementos de menú tienen suficiente contraste, como se muestra en la herramienta Inspeccionar

  5. En la página web representada, en la sección Estado de la donación , mantenga el puntero sobre el vínculo Perros . La superposición de información de la herramienta Inspeccionar muestra un signo de exclamación naranja en la fila Contraste , lo que indica que este elemento no tiene suficiente contraste de texto frente a colores de fondo:

    Elemento que no tiene suficiente contraste, como se muestra en la advertencia de la herramienta Inspeccionar.

Diferentes opciones para inspeccionar el contraste de color de texto en DevTools

Use las siguientes características de DevTools para inspeccionar el contraste de color de texto:

  • Use la herramienta Inspeccionar (como una superposición de información en la página web) para comprobar si un elemento de página individual tiene suficiente contraste de color de texto. La superposición de información de la herramienta Inspect incluye una sección Accesibilidad que tiene una fila de información de contraste . La herramienta Inspeccionar solo muestra información de contraste de texto para el estado actual. Este enfoque se describe en el artículo actual.

  • La herramienta Problemas notifica automáticamente cualquier problema de contraste de color para toda la página web, cuando el texto y el color de fondo no contrastan lo suficiente. Este enfoque se describe en Comprobar que los colores del texto tienen suficiente contraste.

  • Emular un estado no predeterminado, como el hover estado . Para ello, haga clic en el botón Alternar estado del elemento (:hov) en el panel Estilos , que muestra la sección Forzar estado del elemento . Esta característica se describe en Comprobar la accesibilidad de todos los estados de los elementos.

Vea también