고대비 테마 지원(HTML)

이 항목의 C#/VB/C++/XAML 버전을 찾고 계세요?고대비 테마 지원(HTML)을 참조하세요.

Windows 런타임은 모든 앱에 대해 기본적으로 고대비 테마를 지원합니다. 사용자가 고대비 테마로 전환할 경우 이 프레임워크는 자동으로 모든 색과 CSS 스타일시트 설정을 고대비 모양으로 바꿉니다. 따라서 고대비를 지원하기 위해 앱에 추가 작업을 수행할 필요가 없습니다.

경우에 따라 앱의 고대비 모양에 대해 추가 컨트롤이 필요할 수 있습니다. 예를 들어 단추의 이미지를 CSS 배경으로 설정할 경우 Windows 런타임 플랫폼이 모든 배경 이미지를 제거하므로 고대비에서 단추가 보이지 않습니다. 특정 요소에 대한 기본 고대비 동작을 다시 정의하려면 부모 요소에 ms-high-contrast-adjust: none을 사용합니다. CSS 미디어 쿼리를 사용하여 고대비를 사용자 지정할 수도 있습니다.


/* 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 {
       ...
    }
}

이때 고대비에서 이미지가 어떻게 표시될지도 함께 고려해야 합니다. 이미지 색이 고대비 테마에서 제대로 표시되지 않으면 이미지의 고대비 버전을 제공하고 권장되는 파일 명명 규칙을 따릅니다. 예를 들어, back.png 이미지 파일에는 고대비 테마와 사용할 back.contrast-high.png, 검정 고대비 테마와 사용할 back.contrast-black.png, 또는 흰색 고대비 테마와 사용할 back.contrast-white.png라는 버전이 있을 수 있습니다.

이 프레임워크에서는 고대비 테마가 현재 사용되는 경우 JavaScript를 사용하여 특정 작업을 수행할 수도 있습니다.


// 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. 
}

관련 항목

AccessibilitySettings
기본 접근성 요구 사항 충족

 

 

표시:
© 2015 Microsoft