Compatibilidad con temas de alto contraste (HTML)

¿Buscas la versión para C#/VB/C++/XAML de este tema? Consulta Compatibilidad con temas de alto contraste (XAML).

Windows en tiempo de ejecución admite temas de contraste alto de forma predeterminada para todas las aplicaciones. Si un usuario cambia a un tema de contraste alto, el marco reemplaza automáticamente todos los parámetros de color y configuración de hojas de estilos en cascada (CSS) por la apariencia de contraste alto. No necesitas realizar ningún trabajo extra en tu aplicación para admitir el contraste alto.

En algunos casos, probablemente necesites más control sobre la apariencia de contraste alto para tu aplicación. Si, por ejemplo, estableces la imagen de un botón como un fondo de CSS, el botón será invisible en el contraste alto porque la plataforma de Windows en tiempo de ejecución quita todas las imágenes de fondo de CSS. Para anular el comportamiento de contraste alto predeterminado de un elemento específico, usa ms-high-contrast-adjust: none en el elemento principal. También puedes usar consultas multimedia de CSS para personalizar para contraste alto.


/* Back button style setting. */
.backButton {
    ...
}

@media screen and (-ms-high-contrast)
{
    .backButton {
        -ms-high-contrast-adjust: none;
        ...
    }
}

/* Back button additional customization for white high-contrast theme. */
@media screen and (-ms-high-contrast:black-on-white)
{
    .backButton {
       ...
    }
}

También tienes que considerar cómo se ven tus imágenes en el contraste alto. Si los colores de las imágenes no tienen un buen aspecto en los temas de contraste alto, proporciona versiones de contraste alto de las imágenes y sigue las convenciones para nombres de archivo recomendadas. Por ejemplo, el archivo de imagen back.png tendría una versión denominada back.contrast-high.png para usar con cualquier tema de contraste alto, back.contrast-black.png para usar con temas de contraste alto negros o back.contrast-white.png para usar con temas de contraste alto blancos.

El marco también te permite usar JavaScript para realizar acciones específicas si un tema de contraste alto está en uso.


// Take a specific action if the user has chosen a high-contrast theme.
if (matchMedia("screen and (-ms-high-contrast)").matches) {
  // A high-contrast theme is active. 
}

Temas relacionados

AccessibilitySettings
Cumplir requisitos de accesibilidad básicos

 

 

Mostrar:
© 2015 Microsoft