Jak dodać tryb wysokiego kontrastu w WordPress?

Tryb wysokiego kontrastu w WordPressie możesz dodać przez gotową wtyczkę albo własny kod JavaScript i CSS. Wtyczka przyspiesza wdrożenie, natomiast własne rozwiązanie daje większą kontrolę nad wyglądem i wydajnością. Sam przełącznik nie zastępuje jednak poprawnego kontrastu bazowego ani pełnego audytu WCAG.

Dlaczego wysoki kontrast ma znaczenie?

Kontrast między tekstem a tłem wpływa na czytelność strony dla osób słabowidzących, użytkowników z daltonizmem oraz osób korzystających z serwisu w jasnym lub bardzo ciemnym otoczeniu. Wytyczne WCAG przyjmują dla zwykłego tekstu minimalny współczynnik kontrastu 4,5:1. Dla wyższego poziomu dostępności stosuje się wartość 7:1.

Dedykowany przełącznik na stronie różni się od systemowego trybu wysokiego kontrastu w Windows lub ustawień zwiększonego kontrastu w macOS. Ustawienia systemowe może włączyć użytkownik, ale witryna powinna także zachować czytelność po ich aktywowaniu. Własny tryb kontrastu jest dodatkowym ułatwieniem, a nie zamiennikiem prawidłowego projektu kolorystycznego.

Wtyczka czy własny kod?

Wybór zależy głównie od możliwości technicznych administratora i budowy motywu. Wtyczka będzie wygodniejsza przy standardowym motywie, a własny kod lepiej sprawdzi się w autorskim motywie, gdy chcesz ograniczyć liczbę dodatkowych skryptów.

Gotowe rozwiązanie skraca pracę, ale może dodawać funkcje, których nie potrzebujesz, oraz wpływać na wynik PageSpeed. Własny skrypt trzeba z kolei utrzymywać po zmianie motywu, struktury HTML lub kolorystyki strony.

Metoda 1 – wtyczka do dostępności

W repozytorium WordPressa znajdziesz narzędzia takie jak WP Accessibility oraz One Click Accessibility. Ich zakres funkcji może się różnić, dlatego przed instalacją sprawdź aktualizacje, zgodność z używanym motywem i ostatnie opinie użytkowników.

Przy wyborze wtyczki zwróć uwagę na następujące kwestie:

• Zakres funkcji – sprawdź, czy narzędzie rzeczywiście oferuje przełącznik kontrastu, a nie tylko poprawki fokusowania lub powiększanie tekstu.
• Wydajność – porównaj czas ładowania strony przed instalacją i po aktywacji wtyczki.
• Zgodność z motywem – przetestuj menu, formularze, przyciski, wyskakujące okna i elementy dodawane przez page builder.
• Możliwość wyłączenia zbędnych opcji – ograniczenie liczby aktywnych funkcji zmniejsza ryzyko konfliktów i niepotrzebnego obciążenia.

Po instalacji aktywuj tylko potrzebne funkcje, ustaw położenie przycisku i sprawdź tryb na stronie głównej, podstronach, w menu oraz w formularzach. Nie zakładaj, że sama obecność przełącznika oznacza zgodność z WCAG.

Metoda 2 – własny JavaScript i CSS

Własne rozwiązanie składa się z przycisku, klasy dodawanej do elementu body, stylów kontrastowych oraz zapisu ustawienia w localStorage. Kod możesz dodać w motywie potomnym, własnym pliku skryptu lub za pomocą narzędzia do wstawiania własnego CSS i JavaScript.

1. Dodaj przycisk w szablonie – umieść go w miejscu dostępnym z klawiatury, na przykład w nagłówku strony:
   <button type="button" id="contrast-toggle" aria-pressed="false">Włącz wysoki kontrast</button>
2. Dodaj style dla trybu kontrastu – dopasuj selektory do struktury swojego motywu:
   body.high-contrast {
     background: #000;
     color: #fff;
   }

   body.high-contrast a {
     color: #ff0;
     text-decoration: underline;
   }

   body.high-contrast button,
body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background: #000;
  color: #fff;
  border: 2px solid #fff;
}

3. Dodaj obsługę przełącznika – skrypt zmieni klasę, stan ARIA i zapisze wybór użytkownika:
   document.addEventListener('DOMContentLoaded', function () {
     const button = document.querySelector('#contrast-toggle');
     const body = document.body;

     if (!button) return;

     const saved = localStorage.getItem('highContrast') === 'true';
     body.classList.toggle('high-contrast', saved);
     button.setAttribute('aria-pressed', String(saved));

     button.addEventListener('click', function () {
    const enabled = body.classList.toggle('high-contrast');
    button.setAttribute('aria-pressed', String(enabled));
    localStorage.setItem('highContrast', String(enabled));
  });
});

Sprawdź także grafiki, ikony, obramowania, aktywne elementy menu i komunikaty formularzy. Nie przekazuj znaczenia wyłącznie kolorem. Błąd formularza powinien mieć również tekstowy komunikat, a aktywna pozycja menu powinna być rozpoznawalna na przykład przez podkreślenie lub oznaczenie semantyczne.

Ważne: selektor body.high-contrast zadziała tylko wtedy, gdy style obejmą wszystkie istotne komponenty motywu. Globalna zmiana tła i tekstu może nie wystarczyć dla bloków, widgetów oraz elementów tworzonych przez zewnętrzne wtyczki.

Jak przetestować wdrożenie?

Po dodaniu przełącznika sprawdź zarówno jego działanie, jak i zachowanie całej strony. Lighthouse może wykryć część problemów z kontrastem, ale automatyczny test nie zastępuje ręcznej kontroli.

Przejdź przez następującą listę kontrolną:

• Przycisk kontrastu jest widoczny i można go aktywować klawiszem Tab oraz Enter.
• Fokus klawiatury pozostaje wyraźny także po włączeniu trybu kontrastu.
• Tekst, linki, przyciski, pola formularzy i komunikaty mają wystarczający kontrast.
• Linki są rozpoznawalne nie tylko dzięki kolorowi, lecz także przez podkreślenie lub inny wyróżnik.
• Aktywne elementy menu, komunikaty błędów i stany formularzy pozostają zrozumiałe.
• Grafiki zawierające ważne informacje nie tracą znaczenia po zmianie kolorów.

Sprawdź stronę także po włączeniu wysokiego kontrastu w systemie operacyjnym, powiększeniu widoku i na urządzeniu mobilnym. Jeżeli serwis publiczny ma spełniać określone wymagania dostępności, rozważ test z udziałem osób korzystających z technologii wspomagających lub pełny audyt WCAG.

Najprościej zacząć od wtyczki, gdy liczy się szybkie wdrożenie bez programowania. W autorskim motywie zwykle lepszą kontrolę daje krótki własny skrypt, pod warunkiem że obejmiesz nim wszystkie elementy interfejsu i przetestujesz je także poza trybem kontrastu.

Artykuł ma charakter informacyjny i nie stanowi pełnego audytu zgodności z WCAG ani porady prawnej. Spełnienie wymagań dostępności zależy od całej konstrukcji serwisu, nie tylko od przełącznika wysokiego kontrastu.