Comprobar si hay problemas de contraste con el tema oscuro y el tema claro

  • Artículo
  • Tiempo de lectura: 2 minutos

Al probar la accesibilidad de color, puede haber diferentes temas de color para mostrar que necesita probar para problemas de contraste.

La mayoría de los sistemas operativos vienen con un modo oscuro y un modo claro. La página web puede reaccionar a esta configuración del sistema operativo mediante una consulta multimedia CSS. Puede probar estos temas y probar la consulta multimedia CSS sin tener que cambiar la configuración del sistema operativo mediante las opciones prefers-color-scheme CSS de la herramienta de representación.

Por ejemplo, la página de demostración de pruebas de accesibilidad incluye un tema claro y un tema oscuro. La página de demostración hereda la configuración del tema oscuro o claro del sistema operativo. Si usamos DevTools para simular el sistema operativo que se va **** a establecer en un esquema de luz y, a continuación, actualizar la página web de demostración, la herramienta Problemas muestra seis problemas de contraste de color en lugar de dos. (Es posible que vea números diferentes).

Para emular la selección de un usuario del tema de color preferido:

  1. Abra la página web de demostración de pruebas de accesibilidad en una nueva pestaña del explorador y, a continuación, seleccione F12 para abrir DevTools.

  2. Seleccione Esc para abrir el cajón en la parte inferior de DevTools. Seleccione el icono en la parte superior del cajón para ver la lista de herramientas y, a + continuación, seleccione Representación. Aparece la herramienta de representación.

  3. En la lista desplegable Emular elementos multimedia CSS prefers-color-scheme, seleccione prefers-color-scheme: light. La página web se vuelve a representar mediante light-theme.css .

    Uso de la herramienta de representación para simular un modo de luz y desencadenar el otro tema del documento

  4. Seleccione la herramienta Problemas y, a continuación, expanda la sección Accesibilidad. Dependiendo de varios factores, es posible que reciba Insufficient color contrast advertencias. Observe que en RECURSOS AFECTADOS hay 6 elementos con contraste de color insuficiente.

    Nuevos problemas de contraste detectados debido al cambio al tema claro

    En nuestra página de demostración, la sección Estado de donación de la página es ilegible en modo claro y debe cambiar.

    La sección Estado de donación tiene problemas de contraste en modo claro

  5. En DevTools, seleccione la herramienta Elementos y, a continuación, seleccione Ctrl+F en Windows/Linux o Command+F en macOS. Aparece el cuadro de texto Buscar, para buscar en el árbol DOM HTML.

  6. Escriba scheme . Se encuentran las siguientes consultas multimedia CSS y ahora se pueden actualizar los archivos CSS correspondientes.

    <link rel="stylesheet" href="css/light-theme.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">
<link rel="stylesheet" href="css/dark-theme.css" media="(prefers-color-scheme: dark)">

Vea también