Co tak naprawdę dzieje się z CSS w trybie wysokiego kontrastu?

Question

Czy ktoś może wyjaśnić, co dzieje się z CSS w trybie wysokiego kontrastu?

http://hardlikesoftware.com/weblog/2009/11/04/css-sprites-vs-high-contrast-mode/

W tryb wysokiego kontrastu wszystkie obrazy tła i kolory są ignorowane - zastąpione wysokim kontraście kolorach, takich jak biały na czarnym lub czarno na białym . Innym problemem jest to, że obrazy tła nie zawsze są drukowane.

Czy jest coś więcej niż to?

Mam formularza logowania, który wygląda suboptimal i staram się badać.

Do niedawna było https://www.google.com/search?q=axs+aol+accesibility+library, ale wydaje się, że już nie istnieje.

Generalnie widzę tam dwa podejścia:

1. Detect HCM (tryb wysokiego kontrastu) i ustawić CSS odpowiednio
2. Wykonane CSS bardziej ogólny do niech to działa w każdym trybie

W obu Chciałabym wiedzieć, co się stanie w trybie wysokiego kontrastu pod względem zmian w CSS.

Jak widać zachowanie zmienia się więc swoją wiedzę będą mile widziane.

Answer 1

Czy zdefiniowałeś kolory tekstu i tła dla elementów formularza?

Oto odpowiednie kryteria z listy referencyjnej Accessiweb 2,1: On each Web page, are CSS declarations for colours for element background and fonts used properly? (poziom Srebrny równa WCAG 2.0 AA)
Stosowna WCAG 2.0 Awaria technika jest F24: specifying foreground colors without specifying background colors or vice versa

Niedawny WebAIM post o trybie Kontrast: http://webaim.org/blog/high-contrast/

O strona główna Google: Google jest znane z wąchania przeglądarki i silnie modyfikowanych stron w zależności od przeglądarki, zalogowania się do usług lub nie, aktywacji JS, czy też nie. Będzie nawet używał protokołu SPDY zamiast HTTP (chociaż to nie zmienia treści otrzymanych przez przeglądarkę per se).
nie uważam stron z tej firmy do porównań między przeglądarkami;)

Answer 2

@media screen and (-ms-high-contrast: active) { 
    /* put your styling rules here */ 
} 

Pracuje w IE i MS Edge. Przetestowano w systemie Windows 10.

Chrome nie wie, czy system Windows 10 jest w trybie wysokiego kontrastu.

Answer 3

Jeśli stosujesz wysoki kontrast w swojej aplikacji internetowej, użyj poniższego bloku kodu do wyboru kontrastu "czarno-biały" i "biały-czarny". To zadziała dobrze w IE.

@media screen and (-ms-high-contrast: black-on-white) { 
       /* 
       Put your styling code............. 
       */ 

      } 
@media screen and (-ms-high-contrast: white-on-black) { 
       /* 
       Put your styling code............. 
       */ 

      }