WCAG AAA: zalecenie Priorytet: Drobne
Tekst nie osiąga podwyższonego kontrastu (AAA)
Część tekstu spełnia podstawowy poziom kontrastu, ale nie surowszy: 7:1 dla zwykłego tekstu i 4.5:1 dla dużego. To zalecana praktyka wykraczająca poza WCAG AA, a nie wymóg.
Ten tekst przetłumaczono automatycznie i nie został jeszcze sprawdzony przez native speakera.
Dlaczego to ważne dla Twoich klientów
Wyższy kontrast pomaga klientom z umiarkowaną wadą wzroku, starszym osobom i każdemu, kto czyta z telefonu w słońcu. Ceny i przyciski stają się czytelniejsze dla wszystkich, ale jego brak nie jest niezgodnością z poziomem AA, na którym opiera się prawo.
Kogo to dotyczy
- osoby słabowidzące
- starsi klienci
- osoby z zaburzeniami widzenia barw
- osoby korzystające z telefonu w jasnym świetle
Jak to naprawić
Tam, gdzie to praktyczne, podnieś kontrast do 7:1 dla zwykłego tekstu i 4.5:1 dla dużego (24px lub 18.66px pogrubione), zaczynając od tekstu głównego, cen i kasy. Przyciemnij kolory tekstu lub rozjaśnij tła w tokenach projektu lub CSS. Najpierw usuń podstawowe problemy z kontrastem 4.5:1 (reguła color-contrast); ta kontrola to tylko dodatkowa wskazówka.
W Shopify
Zwykle wynika ze schematu kolorów motywu. Wybierz ciemniejsze kolory tekstu w ustawieniach kolorów edytora motywu; jeśli kolory są wpisane na stałe, zmień je w CSS motywu.
W Shoptet (CZ)
Zwykle wynika z wybranego szablonu i jego ustawień kolorów. Wybierz ciemniejsze kolory tekstu w ustawieniach szablonu lub dodaj własny CSS przez opcje własnego kodu w Shoptet.
W PrestaShop
Zwykle zdefiniowane w CSS motywu. Nadpisz kolory we własnym pliku CSS motywu lub w motywie potomnym; niektóre motywy mają opcje kolorów w module konfiguracji.
W WooCommerce
Zwykle ustawia je aktywny motyw lub page builder. Zmień kolory w Customizerze motywu lub w stylach globalnych albo nadpisz je w CSS motywu potomnego.
Normy
| Norma | Punkt |
|---|---|
| WCAG 2.2 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.1 | 1.4.6 (AAA) Contrast (Enhanced) |
| WCAG 2.0 | 1.4.6 (AAA) Contrast (Enhanced) |
Automatyczny test: reguła axe-core color-contrast-enhanced.
dequeuniversity.com, github.com, www.w3.org
Podobne testy
-
Tekst nie osiąga podwyższonego kontrastu (AAA)
WCAG 1.4.6 AAA
-
Linki o tym samym tekście prowadzą w różne miejsca
WCAG 2.4.9 AAA
-
Strona sama się odświeża po czasie, nawet długim
WCAG 2.2.4 AAA