Przejdź do treści
Pandus
pl Zmień język
Menu

Wymaganie WCAG A/AA Priorytet: Poważne

Tekst jest trudny do odczytania z powodu niskiego kontrastu

Część tekstu jest zbyt jasna w stosunku do tła, np. szary tekst na białym tle lub biały tekst na bladym przycisku.

Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.

Dlaczego to ważne dla Twoich klientów

Osoby gorzej widzące, starsi klienci i każdy, kto korzysta z telefonu na zewnątrz, mogą przeoczyć ceny, warunki dostawy lub opisy przycisków. Trudny do odczytania tekst prowadzi do wahania i porzuconych koszyków.

Kogo to dotyczy

  • osoby słabowidzące
  • starsi klienci
  • osoby z zaburzeniami widzenia barw
  • osoby korzystające z telefonu w ostrym świetle

Jak to naprawić

Zapewnij współczynnik kontrastu co najmniej 4.5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu (24px lub 18.66px pogrubiony). Sprawdź placeholdery, stany wyglądające na nieaktywne, tekst na zdjęciach i plakietki promocji. Poprawiaj kolory w tokenach projektu lub CSS, a nie w pojedynczych elementach.

W Shopify

Zwykle wynika ze schematu kolorów motywu. Najpierw dostosuj kolory tekstu i tła w ustawieniach kolorów edytora motywu; jeśli motyw ma kolory wpisane na stałe, zmień je w CSS lub sekcjach Liquid motywu.

W Shoptet (CZ)

Zwykle wynika z wybranego szablonu i jego ustawień kolorów. Dostosuj kolory w ustawieniach szablonu lub dodaj własny CSS przez opcje własnego kodu w Shoptet.

W PrestaShop

Zwykle zdefiniowane w CSS motywu. Nadpisz kolory w pliku custom CSS motywu lub w motywie potomnym; niektóre motywy udostępniają opcje kolorów w module konfiguracji motywu.

W WooCommerce

Zwykle ustawiane przez aktywny motyw lub kreator stron. Zmień kolory w customizerze motywu lub stylach globalnych albo nadpisz je w CSS motywu potomnego, aby aktualizacje nie cofnęły poprawki.

Normy

Normy
NormaPunkt
WCAG 2.2 1.4.3 (AA) Contrast (Minimum)
WCAG 2.1 1.4.3 (AA) Contrast (Minimum)
WCAG 2.0 1.4.3 (AA) Contrast (Minimum)
EN 301 549 4.1.1 9.1.4.3
EN 301 549 3.2.1 9.1.4.3
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.4.3

Automatyczny test: reguła axe-core color-contrast. dequeuniversity.com, github.com, www.w3.org

Podobne testy

Wszystkie reguły, które sprawdzamy