Tryb wysokiego kontrastu: kompletny przewodnik dla deweloperów

Spis treści

• Błąd, którego Twój zespół nie zobaczy
• Ile kosztuje zignorowanie tego problemu
• Co tak naprawdę robi przeglądarka
• Czym przeglądarka zastępuje Twoje kolory
• 8 sztuczek na tryb wysokiego kontrastu
• Kiedy nadpisywać kolory, a kiedy tego nie robić
• Jak to przetestować
• Kluczowe wskazówki

Błąd, którego Twój zespół nie zobaczy

Wyobraź sobie, że klient może dokończyć zakup na Twojej stronie i zapłacić za coś, czego nigdy nie wybrał. Po Twojej stronie nie pojawi się żaden błąd, ani zapis w logach. Brzmi abstrakcyjnie?

Weźmy dla przykładu wybór dostawy w koszyku. Mamy do wyboru trzy opcje jako klikalne karty: "standardowa", "ekspresowa" oraz "na jutro". Prawdziwy input radio jest ukryty tak, jak ukrywa go większość design systemów, a wybraną kartę wyróżnia wypełnione kółko. Na aktualnym systemie Windows jedno ustawienie dostępności spowoduje, że przeglądarka wyrzuci to wypełnienie i nie będzie żadnej różnicy pomiędzy kartami. W rezultacie klient kliknie dostawę "na jutro" i nie zobaczy na stronie żadnej zmiany.

Zamówienie idzie więc dalej z opcją, która faktycznie była zaznaczona. Nic się nie wysypało, kliknięcie zostało zarejestrowane, a płatność przeszła. Pierwszą osobą, która się o tym dowie, jest ktoś, kto dwa dni później odbierze reklamację.

Trudno to wychwycić, a jeśli już ktoś z zespołu to zauważy, zacznie zastanawiać się, czy to w ogóle błąd wart naprawy. No bo w końcu na "normalnej" przeglądarce nic nie wygląda na zepsute, a żadne automatyczne narzędzie też tego nie wyłapie. Czy warto w ogóle się tym przejmować?

Ile kosztuje zignorowanie tego problemu

Otwórz analitykę i sprawdź, jaki udział w ruchu w koszyku ma Windows. Weź z tego 4%. Przy typowym europejskim podziale B2C, czyli mniej więcej 30% Windowsa na desktopie, dolną granicą jest około jedna na 800 sesji. Większość pracy nad dostępnością zaczyna się bez żadnej liczby. To można policzyć przed założeniem pierwszego ticketu.

Te 4% podaje Microsoft, szacując na tyle udział osób korzystających z wysokiego kontrastu wśród użytkowników Windowsa. W badaniu WebAIM wśród osób słabowidzących połowa respondentów zadeklarowała, że go używa. Ta druga liczba ma znaczenie, jeśli Twój produkt obsługuje starszych albo słabowidzących klientów.

Jedna sesja na 800 to wersja bardzo optymistyczna. Klient, który nie może dokończyć zakupu, nie wraca w przyszłym miesiącu, więc tracisz nie jeden koszyk, ale wszystko, co wydałby później. Do tego średnia mija się z prawdą w większości branż. Apteki i ubezpieczyciele spotykają takich użytkowników znacznie częściej niż sklep dla graczy.

To większa grupa niż ta, pod którą Twój zespół już projektuje. Użytkownicy czytników ekranu to ułamek procenta ruchu i nikt nie zastanawia się, czy warto ich wspierać. Tryb wysokiego kontrastu często jest pomijany dlatego, że nie jest to bezpośrednie naruszenie WCAG, nie dlatego, że jest rzadki.

Za tą liczbą nie stoją wyłącznie osoby z poważną wadą wzroku:

• Osoby z zaćmą lub jaskrą, u których obniżona wrażliwość na kontrast sprawia, że jasna szarość na bieli robi się nieczytelna.
• Osoby ze światłowstrętem i migreną, dla których biała strona jest fizycznie bolesna.
• Osoby neuroróżnorodne, które czytają szybciej na kontrolowanej, przewidywalnej palecie.
• Pracownicy terenowi z laptopem w pełnym słońcu, którzy włączają go na godzinę i zaraz go wyłączają.

Zostaje jeszcze kwestia prawna. Europejski Akt o Dostępności obowiązuje od 28 czerwca 2025 roku we wszystkich 27 państwach członkowskich i obejmuje e-commerce, bankowość, sprzedaż biletów i e-booki sprzedawane konsumentom w UE. Kary krajowe sięgają sześciu cyfr.

Warto jednak precyzyjnie powiedzieć, czego wymaga prawo. EAA ustala wymagania funkcjonalne, a szczegóły zostawia normie EN 301 549. Ta norma dotyka trybu wysokiego kontrastu z dwóch stron.

Klauzula 9 odsyła Cię do WCAG 2.1 AA. Żadne kryterium sukcesu WCAG nie wspomina o trybie wysokiego kontrastu. Audytor sprawdza kryteria 1.4.1 (użycie koloru), 1.4.11 (kontrast elementów nietekstowych) i 2.4.7 (widoczny fokus). Przycisk, który traci swoją jedyną widoczną granicę, albo znikający wskaźnik fokusa oblewają te trzy kryteria dokładnie tak samo jak wszędzie indziej.

Klauzula 11.7 idzie dalej i to ją zespoły rzadko kiedy czytają. Mówi, że oprogramowanie, które nie jest odizolowane od swojej platformy, "powinno stosować się do wartości preferencji użytkownika dla ustawień platformy w zakresie: jednostek miary, koloru, kontrastu, kroju pisma, rozmiaru pisma i kursora fokusa". Dla strony internetowej platformą jest przeglądarka. Tryb wysokiego kontrastu to sposób, w jaki przeglądarka przekazuje dalej preferencję ustawioną w Windowsie, a w EN 301 549 klauzula 11.7 jest wskazana jako mająca zastosowanie do treści internetowych.

Jest jedno zastrzeżenie, które wpływa na to, jak mocno możesz się na tym opierać. To, czy 11.7 w ogóle powinna dotyczyć stron internetowych, pozostaje otwartym pytaniem wewnątrz ETSI. Projekt V4.1.0 z listopada 2025 proponuje zawęzić ją do aplikacji desktopowych i mobilnych. Uzasadnienie biznesowe buduj na 1.4.1, 1.4.11 i 2.4.7, których nikt nie kwestionuje. Klauzulę 11.7 traktuj jako powód, dla którego regulator może wymagać więcej, niż jest w stanie udowodnić automatyczne narzędzie do sprawdzania kontrastu.

Tryb wysokiego kontrastu nie jest więc osobnym wymogiem prawnym, tylko środowiskiem, w którym Twoje istniejące błędy WCAG przestają być teoretyczne, bo znika stylowanie, które je zasłaniało.

Co tak naprawdę robi przeglądarka

Tryb wysokiego kontrastu bywa mylony z trybem ciemnym albo z filtrem nałożonym na CSS. Nie jest ani jednym, ani drugim. Przeglądarka wyrzuca Twoje kolory i podstawia paletę, którą użytkownik wybrał w systemie. Ma to trzy konsekwencje.

• To użytkownik jest właścicielem palety, nie Ty. Windows dostarcza motywy Aquatic, Desert, Dusk i Night sky, a każdy z nich można edytować co do pojedynczego koloru.
• Kolory biorą się z natywnej semantyki, nie z ARIA. Prawdziwy element <button> dostaje ButtonText, za to <div role="button"> jest traktowany jak zwykły tekst, bo silnik trybu wysokiego kontrastu czyta tag, a nie rolę.
• Podmiana działa na poziomie właściwości, nie elementu. Ruszana jest tylko ustalona lista właściwości, a wszystko spoza niej renderuje się dokładnie tak, jak to napisałeś.

Naprawa nigdy nie polega więc na "przestylowaniu komponentu". Polega na wiedzy, które właściwości są zastępowane kolorami systemowymi:

• color i background-color
• border-color i outline-color
• text-decoration-color
• column-rule-color
• oraz fill i stroke w SVG

Za to te właściwości mają wymuszaną stałą wartość niezależnie od tego, co napisałeś:

• box-shadow i text-shadow stają się none
• background-image staje się none dla gradientów
• color-scheme staje się light dark, a scrollbar-color staje się auto

Cała reszta zostaje nietknięta. Układ, odstępy, border-width, border-radius, font-size, transformacje, przezroczystość i każdy obraz z url(). Tracisz więc każdą granicę, stan i wyróżnienie, które narysowałeś samym kolorem.

Czym przeglądarka zastępuje Twoje kolory

Kiedy przeglądarka potrzebuje koloru, bierze go z zestawu systemowych kolorów z motywu wybranego przez użytkownika. Tych słów kluczowych możesz używać samodzielnie i pisząc style dla trybu wysokiego kontrastu, prawie zawsze powinieneś.

• Canvas i CanvasText. Tło strony i tekst. Twoja domyślna para.
• ButtonFace, ButtonText i ButtonBorder. Powierzchnie kontrolek, ich etykiety i obramowania.
• Field i FieldText. Tło pól formularza i tekst w nie wpisywany.
• LinkText, VisitedText i ActiveText. Trzy stany linku.
• Highlight i HighlightText. Elementy zaznaczone. Przydatne dla aktywnej zakładki albo wybranej opcji.
• GrayText. Stan wyłączony. Jedyny pewny sposób, żeby pokazać, że czegoś nie da się użyć.
• Mark i MarkText. Tekst podświetlony, zgodnie z elementem <mark>.
• AccentColor i AccentColorText. Kontrolki akcentowane, zgodnie z akcentem systemu.

Uważaj na przestarzałe słowa kluczowe. MDN oznacza jako przestarzałą długą listę, w tym Window, WindowText, ButtonHighlight, ButtonShadow, Menu, MenuText, InfoBackground i ThreeDFace. Jeśli znajdziesz je w starym arkuszu stylów, podmień je. Przykładowo Window zastępuje Canvas, a WindowText i MenuText zastępuje CanvasText.

Większość z nich chodzi w parach. Trzymaj pary razem. Canvas z CanvasText, ButtonFace z ButtonText, Field z FieldText, Highlight z HighlightText. To są zestawienia, na które faktycznie patrzyła osoba edytująca motyw, a motyw kontrastowy w Windowsie udostępnia tylko sześć próbek, więc nie ma ich wiele. Nie mieszaj par, na przykład nie stawiaj FieldText na ButtonFace, bo u osób z własnym motywem może to skończyć się brakiem dostępności.

GrayText jest tym niewygodnym. Nie ma udokumentowanego partnera, bo w edytorze motywów Windowsa odpowiada próbce "Tekst nieaktywny", dobieranej względem tła strony. Używaj go więc na Canvas i tam zadziała. Użycie go na ButtonFace albo Field jest ryzykowne.

8 sztuczek na tryb wysokiego kontrastu

Poprawki poniżej są ułożone według wpływu na twoją stronę w trybie wysokiego kontrastu. Pierwsza już naprawi większość design systemu.

Sztuczka 1: Przezroczysta ramka

Przeglądarka podmienia border-color, a transparent to właśnie jedna z wartości border-color. Przezroczysta ramka jest niewidoczna w zwykłej przeglądarce. W trybie wysokiego kontrastu natomiast, jest to jednopikselowy kontur w systemowym kolorze. Ta sztuczka działa w każdej przeglądarce, która obsługuje ten tryb.

Nowoczesne przyciski często bazują na samym background-color. Po zabraniu tła zostaje nam słowo wiszące w powietrzu, bez niczego, co mówiłoby, że da się w nie kliknąć.

@media (forced-colors: active) {
    button, [type="button"] {
        border: 1px solid transparent;
    }
}

Przykład: Twój główny przycisk to fioletowe wypełnienie z białym tekstem bez ramki. W trybie wysokiego kontrastu wypełnienie zamienia się na ButtonFace, który ma tą samą wartość co tło strony w każdym domyślnym motywie Windows. Przycisk nadal tam jest, nadal jest klikalny, nadal ma 44 piksele wysokości. Po prostu przestał wyglądać jak przycisk. Jedna przezroczysta ramka rozwiązuje to od razu.

Sztuczka 2: Wskaźniki fokusa

Jeśli Twój wskaźnik fokusa bazuje na box-shadow, w trybie wysokiego kontrastu nie istnieje. box-shadow zamienia się na none bez wyjątków i bez media query, które by go przywróciło. To bezpośrednie niespełnienie WCAG 2.4.7 i jeden z najczęstszych problemów, jakie znajdujemy.

Jak to naprawić?

Użyj outline w kolorze transparent. Do tego outline-offset, żeby dać mu trochę przetrzeni. To jedna z właściwości, które pozostają nietknięte.

button:focus-visible, [type="button"]:focus-visible {
    box-shadow: 0 0 6px 2px #A78BFA;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

Przykład: Design system ustawia outline: none na każdym elemencie interaktywnym i zastępuje go poświatą z box-shadow. Na normalnej przeglądarke wskaźnik fokusa wygląda świetnie, lecz w trybie wysokiego kontrastu osoba korzystająca z klawiatury przechodzi przez cały koszyk bez żadnego widocznego fokusa, bo cień zostaje usunięty. Przezroczysty outline to naprawia.

Sztuczka 3: Ikony, które dziedziczą kolor

SVG z zakodowanym na sztywno czarnym wypełnieniem znika na czarnym tle. Tryb wysokiego kontrastu podmienia w SVG fill i stroke, ale tylko wtedy, gdy potrafi rozpoznać, do czego ikona należy.

Jak to naprawić?

Użyj fill="currentColor" albo stroke="currentColor" na inline SVG. Ikona dziedziczy wtedy kolor, który system przypisał otaczającemu tekstowi. Pamiętaj, że ten kolor bywa różny w zależności od kontekstu. By mieć pewność, że zostanie on odpowiednio odziedziczony, użyj ButtonText w przycisku i LinkText w linku.

<button class="button" type="submit">
    <svg class="icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M6 5h15l-2 9H8L6 5Zm2 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" />
    </svg>
    Add to cart
</button>

svg {
    fill: currentColor;
}

@media (forced-colors: active) {
    button, [type="button"] {
        fill: ButtonText;
    }

    a {
        fill: LinkText;
    }
}

Przykład: Ikona koszyka w nagłówku to czarny SVG. Użytkownik ma włączony motyw Night sky, więc tło nagłówka robi się prawie czarne. Ikona nadal się ładuje, nadal jest na swoim miejscu, nadal klikalna, tylko zupełnie niewidoczna. Po dodaniu stroke: currentColor do tego SVG na motywie Night sky robi się biała sama z siebie.

Sztuczka 4: Obrazy i gradienty

Gradient zapisany jako background-image zostaje usunięty, ale obraz rastrowy albo wektorowy wczytany przez url() zostaje. Jest jedno miejsce, w którym Chromium i Firefox się rozjeżdżają i jest nim border-image. Chromium zachowuje w nim i prawdziwe obrazy, i gradienty, Firefox usuwa jedno i drugie. Testuj i w Firefoksie, i w przeglądarkach opartych na Chromium, żeby mieć pewność, że obsługujesz tryb wysokiego kontrastu w każdym środowisku.

Jak to naprawić?

• Wstaw obraz w tag <img> z prawdziwym tekstem alt, jeśli obraz niesie treść.
• Jeśli budujesz granicę interfejsu używając gradientu, na przykład za pomocą separatora, dołóż do niej przezroczystą ramkę.
• Twoje tła gradientowe znikną w trybie wysokiego kontrastu. To poprawne zachowanie i nie traktuj go jak błędu.

hr {
    height: 2px;
    background-image: linear-gradient(90deg, #6D28D9, #DB2777);
}

@media (forced-colors: active) {
    hr {
        height: 0;
        border-top: 2px solid CanvasText;
    }
}

Przykład: Pasek postępu w formularzu wieloetapowym wypełnia się gradientem i nie ma żadnego tekstu. W trybie wysokiego kontrastu wypełnienie zostaje usunięte, a ścieżka na każdym kroku jest pusta, więc osoba na czwartym ekranie wniosku ubezpieczeniowego nie ma jak sprawdzić, ile jej zostało. Jeśli nie możesz dodać etykiety "Krok 4 z 6", która jest tu najlepszą poprawką od strony UX, postaw na ramkę wokół wypełnionej części.

Sztuczka 5: Nie walcz z podkładką pod tekstem

Kiedy tekst leży na obrazie, przeglądarki rysują pod nim prostokąt, nazywany backplate. Istnieje dlatego, że obrazy z url() nie zostają usunięte w trybie wysokiego kontrastu, a kolor tekstu się zmienia. Twój starannie dobrany biały nagłówek staje się CanvasText, zdjęcie pod spodem zostaje dokładnie tak jasne, jak było, i bez backplate'u jedno zlałoby się z drugim.

To nie jest błąd. Jedyny sposób, żeby to wyłączyć, to forced-color-adjust: none, które odbiera użytkownikowi jego preferencje kolorów dla danego elementu i w większości przypadków jest antywzorcem. Jeśli podkładka Ci przeszkadza, daj tekstowi własne tło, a w większości przypadków przestanie się pojawiać.

.hero {
    background-image: url('/hero.jpg');
}

@media (forced-colors: active) {
    .hero__panel {
        background-color: #FFFFFF;
        border: 1px solid transparent;
    }
}

Sztuczka 6: Stan to więcej niż kolor

Aktywne zakładki czy zaznaczone wiersze w większości design systemów są oznaczane samym kolorem. Albo wypełnienie, albo ramka, albo odcień tekstu. Z perspektywy trybu wysokiego kontrastu, one wszystkie korzystają z tych samych dwóch, bądź trzech wartości systemowych, więc stan przestaje być widoczny.

Jak to naprawić?

• Użyj Highlight i HighlightText dla stanu aktywnego lub zaznaczonego. To para, której motyw użytkownika używa do zaznaczenia, więc zawsze będzie odróżnialna.
• Nigdy nie sygnalizuj błędu samą czerwoną ramką. Każda ramka pola sprowadza się do tego samego koloru systemowego, więc pole niepoprawne wygląda identycznie jak cztery poprawne nad nim. Dodaj ikonę i komunikat spięty przez aria-describedby, czego WCAG 1.4.1 i tak od ciebie wymaga.

@media (forced-colors: active) {
    [role="tab"][aria-selected='true'] {
        background-color: Highlight;
        color: HighlightText;
    }
}

Przykład: Formularz oznacza niepoprawne pola czerwoną ramką i niczym więcej. W trybie wysokiego kontrastu każde pole ma identyczną ramkę, więc osoba, której nie udało się zarejestrować, dowiaduje się, że coś jest nie tak, bez możliwości ustalenia które pole wypełniła niepoprawnie. Ta sama awaria dotyka każdej osoby z daltonizmem czerwono-zielonym (deuteranopią) i właśnie po to istnieje 1.4.1.

Sztuczka 7: Modale, które się wyróżniają

Dziś modale oddziela od strony półprzezroczysta nakładka albo backdrop-filter: blur(), a jedno i drugie na szczęście przeżywa tryb wysokiego kontrastu. Jeśli jednak trafisz na modal, który nie trzyma się tych wzorców, w trybie wysokiego kontrastu może wyrenderować się jak okno położone na tekście. To nie jest wprost naruszenie dostępności, ale wyraźne oddzielenie okien dialogowych od tła jest po prostu dobrym UX.

Jak to naprawić?

Daj oknu dialogowemu przezroczystą ramkę. Na dużych powierzchniach warto zrobić ją trochę grubszą. Dwa albo trzy piksele powodują, że takie okno jest znacznie lepiej czytelne.

@media (forced-colors: active) {
    dialog, [role="dialog"] {
        border: 3px solid transparent;
    }
}

Przykład: Koszyk przenosi krok z adresem do natywnego elementu <dialog> i nigdy nie stylowano w nim pseudoklasy ::backdrop. W trybie wysokiego kontrastu domyślny backdrop nie daje wystarczającego kontrastu, więc z perspektywy użytkownika tło okna ucina podsumowanie zamówienia w połowie zdania i nie ma między nimi żadnej krawędzi. Użytkownik odbiera to jako zepsutą stronę, klika w podsumowanie za oknem i nic się nie dzieje, bo strona pod modalem jest nieklikalna. Jeśli nie możesz dodać backdropa, ramka zdecydowanie pomoże twojemu użytkownikowi.

Sztuczka 8: Trzymaj to w jednym miejscu

Style pod tryb wysokiego kontrastu pisze się właściwie dość prosto. Większość tego, co jest zepsute, da się naprawić globalnie, bo w większości przypadków to ta sama garstka właściwości psuje się w ten sam sposób. Możesz wrzucić małą warstwę bazową do globalnego arkusza stylów, a po modyfikacje na poziomie komponentów sięgaj dopiero wtedy, gdy konkretny komponent naprawdę tego potrzebuje. Poniżej nasza globalna warstwa załatwiająca 99% problemów z trybem wysokiego kontrastu:

@media (forced-colors: active) {
    :focus-visible {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

    button, [type='button'], [type='submit'] {
        border: 1px solid transparent !important;
    }

    svg {
        stroke: currentColor !important;
    }

    button svg, [type="button"] svg {
        fill: ButtonText !important;
    }

    a svg {
        fill: LinkText !important;
    }

    dialog, [role="dialog"] {
        border: 3px solid transparent !important;
    }

    [role="tab"][aria-selected='true'] {
        background-color: Highlight !important;
        color: HighlightText !important;
    }

    [type="radio"] {
        opacity: 1;
        position: relative;
        clip: unset;
    }

    hr {
        height: 0;
        border-top: 2px solid CanvasText;
    }
}

Kiedy nadpisywać kolory, a kiedy tego nie robić

forced-color-adjust: none mówi przeglądarce, żeby nie zamieniała kolorów na preferencje użytkownika na danym elemencie. Sięganie po tą właściwość, żeby "dopasować" systemową paletę do swojego projektu, jest antywzorcem. Ludzie wybierają tryb wysokiego kontrastu, bo bez tych konkretnych zestawień kolorów w ogóle nie przeczytają strony. Nadpisując je, oddajesz im z powrotem problem, który tym trybem rozwiązywali.

Jest jednak przypadek, w którym to podejście jest słuszne. Wtedy, gdy kolor jest informacją. Kontrolka koloru czerwonego T-shirtu musi zostać czerwona, inaczej klient nie wybierze koloru. Wskaźnik statusu w zieleni, żółci i czerwieni nie niesie już nic, kiedy wszystkie trzy staną się CanvasText.

@media (forced-colors: active) {
    .color-swatch {
        forced-color-adjust: none;
        border: 1px solid CanvasText;
    }
}

Zapamiętaj jeszcze jedno: nie odwracaj kolorów, żeby wyróżnić komponent, na przykład zamieniając miejscami tło i tekst względem palety użytkownika. To przekreśla sens tego, że użytkownik wybrał sobie własne kolory.

Jak to przetestować

Tryb wysokiego kontrastu przetestujesz w przeglądarce opartej na Chromium, ale w większości przypadków to nie wystarczy. Pełne testy powinny odbyć się w natywnym środowisku Windows.

DevTools wystarczą na testy podstawowe na etapie kodowania. W Chrome albo Edge otwórz command menu przez Cmd/Ctrl + Shift + P, wpisz Rendering i włącz Emulate CSS media feature forced-colors. Jest to szybkie, ale emulacja ta nakłada tylko jedną domyślną paletę i nie symuluje własnych motywów użytkownika.

Windows jest źródłem prawdy. lewy Alt + lewy Shift + Print Screen przełącza motywy kontrastowe. Możesz też wejść w Ustawienia → Ułatwienia dostępu → Motywy kontrastowe.

• Przetestuj motyw ciemny i jasny. Komponent, który przeżył Night sky, wciąż potrafi zniknąć w Desert. Źródłem błędu jest zwykle brakująca granica, a nie zły kolor, a to, który motyw pokaże ten błąd, wychodzi dopiero przy dokładnych testach.
• Przetestuj klawiaturą i przejdź tabem przez całą ścieżkę. Wskaźnik fokusa, który przestał istnieć, jest niewidoczny dla każdego, kto pracuje myszką, łącznie z osobą testującą.

Jedno zastrzeżenie dla zespołów pracujących na Macu. Ustawienie Zwiększ kontrast w macOS to zupełnie inna funkcja. Pogrubia ramki i przyciemnia tekst, ale nie wymusza palety i nie uruchamia forced-colors: active. Testowanie na Macu nie powie Ci o tym wszystkim nic. Użyj maszyny wirtualnej z Windowsem, zapasowego laptopa albo usługi takiej jak na przykład Assistiv Labs.

Kluczowe wskazówki

• Oszacuj skalę strat na własnym ruchu z Windowsa. Microsoft podaje, że z wysokiego kontrastu korzysta około 4% użytkowników Windowsa, a badanie WebAIM wskazuje blisko połowę osób słabowidzących. Pomnóż to przez swój udział Windowsa i masz liczbę potencjalnie sfrustrowanych klientów, którzy nie skonwertowali.
• Żadne kryterium WCAG nie nazywa trybu wysokiego kontrastu, ale robi to klauzula 11.7 z EN 301 549. Dlatego WCAG 1.4.1, WCAG 1.4.11 i WCAG 2.4.7 mogą zostać oblane w trybie wysokiego kontrastu tak samo, jak w zwykłym środowisku.
• Naucz się listy właściwości. Właściwości kolorystyczne są podmieniane, box-shadow i text-shadow wymuszane na none, gradienty znikają, a układ zostaje bez zmian.
• Przezroczysta ramka to najtańsza poprawka, jaką kiedykolwiek wdrożysz. Twoi użytkownicy będą wdzięczni za ten dodatkowy kontur w kolorze systemowym bardziej, niż Ci się wydaje.
• Do fokusa używaj outline. box-shadow jest wymuszany na none, więc wskaźnik fokusa oparty na tej właściwości po prostu dla tych osób nie istnieje.
• Łącz kolory systemowe w pary, nigdy ich nie mieszaj. CanvasText na Canvas, ButtonText na ButtonFace. Mieszanie par tworzy znacznie więcej problemów, niż to potrzebne.
• Po forced-color-adjust: none sięgaj tylko wtedy, gdy kolor jest informacją. Kontrolki kolorów i wskaźniki statusu są tym wyjątkiem. Nakładaj to na sam element, którego dotyczy poprawka, żeby uniknąć niezamierzonych skutków ubocznych.

Źródła:

• CSS at-rule: @media: forced-colors media feature
• CSS property: forced-color-adjust
• CSS type: system-color keywords
• Microsoft Edge Blog, Styling for Windows high contrast with new standards for High Contrast Mode
• WebAIM, Survey of Users with Low Vision
• European Accessibility Act, Directive (EU) 2019/882
• EN 301 549, clause 11.7 User preferences
• ETSI issue 23, Re-examine appropriateness of 11.7 for websites and mobile applications

Windows jest znakiem towarowym grupy spółek Microsoft. Pozostałe znaki towarowe należą do ich właścicieli. Ten artykuł jest niezależny i nie jest powiązany z Microsoft Corporation, ani przez tę firmę autoryzowany, sponsorowany czy zatwierdzony.